Fluid Layout missing a few pixels in IE

A bunch of rendering problems in the Microsoft Browser

[cgirl]

I'm working with a fluid layout like the Holy Grail example from [snip], only I'm using 2 columns - the navigation with set width and the fluid content content area. I also wrap them in a div so as to center it and set it to 95% width.

So far, everything runs astoundingly smooth in all bowsers, with the exception of a few pixels of extra margin and a missing border in Internet Explorer. However, these pixels are starting to drive me crazy - especially when the problems aren't very consistant.

The coding of my content section is formatted like so:

<div id="content">
<div id="banner"></div>
<div id="introtop"></div>
<div id="intro">
<p>Description text here.</p>
</div>

<div class="header">News and Announcments</div>
<div class="container">
<p>Main text area here.</p>
</div>

<div id="footer">Transitional XHTML - Valid CSS</a></div>
</div>

And the corresponding CSS:

/* Content Header */

#banner {
background: #000000 url("/wp-content/themes/victorian/images/banner.jpg") no-repeat top left;
border-top: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
height: 60px;
}

/* Headers */

#introtop {
height: 39px;
border-top: #FFFFFF 2px solid;
border-left: #FFFFFF 2px solid;
border-right: 2px solid #FFFFFF;
background: #915558;
}

.header {
height: 27px;
border-top: #FFFFFF 2px solid;
border-left: #FFFFFF 2px solid;
border-right: #FFFFFF 2px solid;
background: #919090 url("/wp-content/themes/victorian/images/bgheader.gif") no-repeat top right;
color: #F5F5F5;
text-align: right;
font-size: 20px;
font-family: Tahoma, Verdana, Sans-serif;
font-weight:bold;
padding: 8px 52px 0 0;
text-decoration: none;
}

/* Text Holders */

#intro {
border-top: #FFFFFF 2px solid;
border-left: #FFFFFF 2px solid;
border-right: 2px solid #FFFFFF;
background: #E9E4E5;
padding: 0 20px 5px 20px;
color: #000000;
}

.container {
background: #FFFFFF;
border-top: #FFFFFF 2px solid;
border-left: #FFFFFF 2px solid;
border-right: 2px solid #FFFFFF;
padding: 0 20px 5px 20px;
}

/* Footer */
#footer {
text-align: center;
background: #E3E3E3;
border-bottom: #FFFFFF 2px solid;
border-left: #FFFFFF 2px solid;
border-right: 2px solid #FFFFFF;
padding: 7px 0 5px 0;
text-transform: lowercase;
}

Now the strange problem that occurs in IE is that the div's #banner, #introtop, and .header render with about 2px of extra space between its left border and the sidebar, when in all other browsers it touches the sidebar like it's supposed two. Yet the content holding divs #intro and .container render as they are supposed to. I just can't figure out why.

The 2nd problem I have is also related with the div .header - in IE, it renders without a right border, when everything else does...

I hope someone will be able to tell me how to fix these bugs. I've tried multiple hacks for the browser already, but as I'm really not sure why its rendering this way in the first place, none of them made any difference.

Thanks in advance.
- Cgirl.

[edit: no urls, please. See CSS Forum Charter [webmasterworld.com] for details.]

[edited by: createErrorMsg at 10:11 am (utc) on July 18, 2005]

[SuzyUK]

Hi cgirl.. complicated issues going on here methinks

As I don't have your full code I can only guess that all of the issues are related to IE's hasLayout (or layout ) rendering differences.

Firstly I put brightly colored borders onto your code instead of white so I could see were they are. There are no side borders rendering on the header div at all. They come back if you remove the height from that div, but then this causes a second issue with IE's collapsing margins. (the <p> has default margins on it)

You can overcome that problem by specifying a explicit margin for your <p> elements instead of leaving it to the default e.g.
p {margin: 1em 0;}

----------
Getting the borders back....

It's unusual as the "cure" for layout errors (not bugs exactly [webmasterworld.com]) is to add a dimension to the affected element so you would expect that having the height on the the "header" div would be the cure, but actually it is the intro div that is causing the problems.

I also put a background color onto all the <p> elements and if you do that you see the the <p> element in the container div also acts a little weird, The text in that container <p> overspills to the left.

Anyhow my trick to find if there is a layout error is to add zoom: 1; to firstly all elements:
* {zoom: 1;}
and then if that fixes things you know what the problem is and you just have to find out which element is causing it.

In your code above the only elements that are not already dimensioned (have height or width) is the intro or container divs.. so then remove the zoom:1; trick and instead apply it to each if these divs in turn to see if it helps.

you should find that it is the intro div that is causing the problem, as once you apply the layout hack trick to this div not only do the borders come back to the header div but the text within the container div's paragraph goes back to the correct alignment.

I'm not sure how or if that will fix the rest of your layouts problem (the gap between the sidebar content). That problem could simply be box model differences caused by the 2px borders.

You could use zoom: 1; as a fix but be aware that IE5 doesn't understand it (5.5 does) so if you want the layout to work in IE5 you need to substitute zoom:1; with a height or width which may not be easy as you have padding and borders which again might cause box model differences if you need the height to very precise.

Alternatively you could hack in a height: 1%; ~ for IE only ~ as it treats it like min-height anyway and will stretch to fit. You have to hack it in as other browsers will try and interpret that height literally.

* html #intro {height: 1%;}

Anyhow add the zoom trick first and see if that helps any and let us know how you get on..

Suzy

[cgirl]

First off - thanks for the lengthy explainations! I really appreciate them.

Ah - well, the zoom:1 on the #intro certainly put the header and borders to right. However, it also made it so that the #intro too joined the #banner and the #introtop in the extra 2px of spacing on the left. When I tried applying zoom to the .container, it too gained the 2px. Would that still qualify as a box model difference?

The same thing happens when I use the height: 1% IE hack, only it this way, the CSS validates.

So now it's just the gap that's the problem. I think.

[edited by: SuzyUK at 5:59 pm (utc) on July 18, 2005]
[edit reason] fixed formatting [/edit]

[SuzyUK]

Would that still qualify as a box model difference?

Yes I think so, but again not seeing the rest of you code this is only a guess as the 2px equates to the width of the border ~ I know you referred to layout that was absolutely positioning the left column and margining the main content try adjusting the left margins to see if that fixes IE, if it does you may need to feed IE different values via another hack. (Which IE's this affects will also be dependant on what doctype you are using)

If you can summarise just the main layout code, left and main columns/divs (we can fill in the other bits from your original post) and let us know the doctype you are using we should be able to help with the best method/hack to use if it is a box model difference

The same thing happens when I use the height: 1% IE hack, only it this way, the CSS validates.

Yes they are both doing the same thing, giving the #intro div layout, but zoom is a Microsoft proprietary property so won't validate. If validation is an issue then the height hack may well be the better choice, zoom is generally just a good debug tool as it helps track the problem in IE without causing other issues.

Suzy