Zikula Community

• craigh
  
  

  • Rank: Developer
  • Registered: Jun 16, 2003
  • Last visit: May 29, 2010
  • Posts: 1966

  Posted: Feb 28, 2005 - 08:37 AM

  I'm developing a new theme for one of my sites using Xanthia (was working with .750) and having some serious issues with widths. I'm pretty sure I remember reading about this here somewhere before, but a search was fruitless:
  
  The main problem is that in some cases, the "main content" of any page will extend beyond the UA browser window (to the right). This is noticable in the admin.php page specifically - and others. Most of the divs and tables are set to 100% width and there are various paddings and so on set up that could be the problem. But, I'm guessing it is more than that.
  
  Does anyone know what can cause a theme to extend beyond the UA like this? Is this a browser specific problem or a CSS issue? I'm at a loss.
  
  TIA

  • 
  •  
• HalbrookTech
  
  

  • Rank: Developer
  • Registered: Dec 31, 1969
  • Last visit: Jun 01, 2010
  • Posts: 6859

  Posted: Feb 28, 2005 - 08:42 AM

  Did you try setting the right margin?
  
  --
  Home Page | Find on Facebook | Follow on Twitter
  

  • 
  •  
• craigh
  
  

  • Rank: Developer
  • Registered: Jun 16, 2003
  • Last visit: May 29, 2010
  • Posts: 1966

  Posted: Feb 28, 2005 - 08:50 AM

  like?
  
  

  Code

  margin-right:8px;

  
  
  yes, basically - I have
  
  

  Code

  body {
  margin: 0;
  }
  
  #mainbody {
  padding:8px;
  }
  
  #table1 {
      width: 100%;
      border: 1px solid black;
      margin: 0;
      padding: 8px;
  }

  • 
  •  
• **unknown user**
  
  

  • Rank: Senior
  • Registered: Mar 16, 2002
  • Last visit: Oct 21, 2009
  • Posts: 2204

  Posted: Feb 28, 2005 - 12:55 PM

  how are they being used?

  • 
  •  
• **unknown user**
  
  

  • Rank: Helper
  • Registered: Mar 16, 2002
  • Last visit: Oct 21, 2009
  • Posts: 676

  Posted: Feb 28, 2005 - 05:00 PM

  I seem to remember this problem with DIVs set to 100% where padding or margins have been applied; if none, the DIVs extend as expected to the sides, but with them applied, horizontal scrollbars appear. Note that DIVs by nature expand as far as they can go, ie 100%, so try removing it from the DIVs and avoid using 100% for the centre table cell. If left and right columns are set to a fixed width, the centre column will naturally extend, as if set to 100%.
  This occurs in all the standards browsers as far as I can remember, and I believe an inherent problem in the Standard box model, where Width applies to the content, and Margins, Padding, and Borders are added to that; in effect, the box width is 100% + margin + padding + border
  Since IE usually implement its own box model (except in IE6 Compliance mode, not the default), where width of a box includes margins, padding, and border widths, and hence taken out of the content, this shouldn't occur.
  Both methods have their uses, and it would be nice if CSS had a way to switch between either.

  • 
  •  
• craigh
  
  

  • Rank: Developer
  • Registered: Jun 16, 2003
  • Last visit: May 29, 2010
  • Posts: 1966

  Posted: Mar 01, 2005 - 12:41 AM

  gives new meaning to giving 110%... lol
  
  seriously - this is exactly why I love being able to ask these kind of questions here - I know there is some expert here who will give me a great answer!
  
  removing the "100%" from any and all areas has _almost_ solved the problem! At least everything is within the window - I occasionally get a horizontal scroll bar however. Any other tricks I can look for?
  
  (you know, after you pointed it out - I discovered that *knew* that divs are 100% as a default - I just hadn't put 2 and 2 together! - so I changed table2 to a span instead :) )

  • 
  •  
• markwest
  
  

  • Rank: Team Member
  • Registered: Mar 18, 2002
  • Last visit: Oct 21, 2009
  • Posts: 6606

  Posted: Mar 01, 2005 - 12:47 AM

  Craig,
  
  One little tip that Lobos provided me with for my xnuclues theme port was that textareas can sometimes force a horizontal scroll bar. This can be fixed with
  
  textarea {
  width: 99%;
  }
  
  -Mark
  
  --
  Visit My homepage and Zikula themes.

  • 
  •  
• craigh
  
  

  • Rank: Developer
  • Registered: Jun 16, 2003
  • Last visit: May 29, 2010
  • Posts: 1966

  Posted: Mar 01, 2005 - 01:49 AM

  thanks Mark!
  
  I've implemented it, but it hasn't helped this particular issue.
  
  hmmm.

  • 
  •  
•  
•  

Users on-line

• bronto

This list is based on users active over the last 60 minutes.