Very simple layout - extra margin-top being applied in IE

[deronsizemore]

http://www.randomjabber.com/test

This is the layout that I'm working with. I've applied a 20px margin-top to the footer which displays correctly on FireFox, Opera, and Safari (Win) but seems to be doubling the margin-top 20px in IE 6/7 making it 40px.

What's causing this? I know there is the double margin bug in IE, but as I understand it, it only is a problem when adding margins to floated elements, which in this case, the footer isn't floated.

Thanks

[Paul O'B]

Hi,

You have to be careful when mixing margins on static content and floats in IE.

It looks like your problem can simply be resolved by floating the navbar.

#navbar {
width: 940px;
background: #3080cb;
margin-bottom: 20px;
float:left;
clear:both;
}

[deronsizemore]

Hey Paul,

Thanks for the fix. Seems the header was messing everything up. Looks like (although may not be the best way to do it) I could have just removed the margin-bottom from #header and applied a border top/bottom of 20px to #navbar and got the same results without the repercussion of the footer messing up.

Do you have a link or anything or can you explain a little more why this happened? I mean, seems simple enough. I have a basic div with two children floats which I want a margin-bottom applied to. I'm still not quite sure why it happened on something seemingly so simple.

Also, maybe you can confirm or deny this, but I don't think I need the "clear: both" on #navbar as I'm already using the .clearfix method. Or am I wrong on that?

[Paul O'B]

Hi,

It's just one of many IE bugs when dealing with floats and you have to make sure things are cleared properly. Your example could also have been fixed by moving the wrap div to encompass the floats like this:

<div id="wrapper">
    <div id="wrapper-inner">
        <div id="header" class="clearfix">
            <div id="header-left"> LOGO </div>
            <div id="header-right"> Header Right </div>
        </div>
        <div id="navbar" class="clearfix">
            <ul id="navbar-left">
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
            </ul>
            <div id="navbar-right"> image </div>
        </div>
        <div id="wrap" class="clearfix">
            <div id="homepage" class="clearfix">
                <div id="homepage-left"> Left Content Goes Here </div>
                <div id="homepage-right"> Middle  Content Goes Here </div>
            </div>
            <div id="sidebar"> Sidebar Goes Here </div>
        </div>
        <div id="footer"> Footer Goes Here </div>
    </div>
</div>

That ensures the floats are completely cleared and puts ie back on the right track.

but I don't think I need the "clear: both" on #navbar

The clearfix method has nothing to do with #navbar. The clearfix method ensures that a parent surrounds the floats but it doesn't affect inner elements which themselves may need to be cleared. The clear:both on #navbar wasn't really necessary but sometimes ie (ie5mac especially) will try and stick a float on the same line and break the layout.

The code you are using seems far to complex and involves wasted empty divs. I dislike adding empty html elements just to add padding. I much prefer using the box model hacks to do this as clean html should be of paramount importance. Also having a div that only holds padding leaves it open to haslayout issues and therefore you would be better off putting the padding on the parent that has a width (which forces haslayout) and then doing a simple box model hack if you want to support older browsers.

Note that margins on static content should have no effect on the float above unless there is something solid in the way. Ie has many bugs in these issues and incorrectly applies a margin-top when it shouldn't.

There isn't a simple answer to your question (although the fixes I gave were simple) except that you just have to make sure that IE has definitely cleared a float before you move on. This is why sometimes the clearer div method is a little more solid. In most cases you can just tweak a couple of things and you are on your way again.

[deronsizemore]

Hi,

It's just one of many IE bugs when dealing with floats and you have to make sure things are cleared properly. Your example could also have been fixed by moving the wrap div to encompass the floats like this:

<div id="wrapper">
    <div id="wrapper-inner">
        <div id="header" class="clearfix">
            <div id="header-left"> LOGO </div>
            <div id="header-right"> Header Right </div>
        </div>
        <div id="navbar" class="clearfix">
            <ul id="navbar-left">
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
            </ul>
            <div id="navbar-right"> image </div>
        </div>
        <div id="wrap" class="clearfix">
            <div id="homepage" class="clearfix">
                <div id="homepage-left"> Left Content Goes Here </div>
                <div id="homepage-right"> Middle  Content Goes Here </div>
            </div>
            <div id="sidebar"> Sidebar Goes Here </div>
        </div>
        <div id="footer"> Footer Goes Here </div>
    </div>
</div>

That ensures the floats are completely cleared and puts ie back on the right track.



The clearfix method has nothing to do with #navbar. The clearfix method ensures that a parent surrounds the floats but it doesn't affect inner elements which themselves may need to be cleared. The clear:both on #navbar wasn't really necessary but sometimes ie (ie5mac especially) will try and stick a float on the same line and break the layout.

The code you are using seems far to complex and involves wasted empty divs. I dislike adding empty html elements just to add padding. I much prefer using the box model hacks to do this as clean html should be of paramount importance. Also having a div that only holds padding leaves it open to haslayout issues and therefore you would be better off putting the padding on the parent that has a width (which forces haslayout) and then doing a simple box model hack if you want to support older browsers.

Note that margins on static content should have no effect on the float above unless there is something solid in the way. Ie has many bugs in these issues and incorrectly applies a margin-top when it shouldn't.

There isn't a simple answer to your question (although the fixes I gave were simple) except that you just have to make sure that IE has definitely cleared a float before you move on. This is why sometimes the clearer div method is a little more solid. In most cases you can just tweak a couple of things and you are on your way again.

Thanks Paul for the explanation. I think I follow you. I'll have to read what you wrote a couple more times for it to completely sink in I think.

Yeah, I have a few empty divs for the sole purpose of adding padding. I always read where you shouldn't use hacks, etc., so this is why I went this route. I'll look into the box model hacks as I agree, sometimes I get confused myself with the extra empty divs, so not having those would be great.

[Paul O'B]

I always read where you shouldn't use hacks, etc.

Yes, of course you shouldn't use hacks when you don't need to but if you do use a hack then make sure its a css hack and not an html hack. Adding a non-semantic div is a big hack and once it's in your page it will likely never get removed.

If the hack is in the stylesheet then one day when ie5.+ is completely buried then you can remove the hack in seconds. Anyway ie5.+ is such a small user base now that I often don't bother with small box model hacks when it just means they are a few pixels out etc.

[deronsizemore]

Yes, of course you shouldn't use hacks when you don't need to but if you do use a hack then make sure its a css hack and not an html hack. Adding a non-semantic div is a big hack and once it's in your page it will likely never get removed.

If the hack is in the stylesheet then one day when ie5.+ is completely buried then you can remove the hack in seconds. Anyway ie5.+ is such a small user base now that I often don't bother with small box model hacks when it just means they are a few pixels out etc.

Yeah, that makes a lot of sense. I never thought about it that way. I can remove a CSS hack in seconds if/when it's fixed in new browsers.

With the box model issue of adding padding/margins on an element with a static width, is that only in ie5.+? I was under the impression that it was ie6.+ also or I wouldn't have even bothered using any hacks html or otherwise as I don't even care to design for ie5.+ now.

[Paul O'B]

With the box model issue of adding padding/margins on an element with a static width, is that only in ie5.+?

As long as you code in standards mode then ie6 is the same as firefox and the other browsers. If you are not worried about ie5 and 5.5. then there's no need to do box model hacks.

[deronsizemore]

As long as you code in standards mode then ie6 is the same as firefox and the other browsers. If you are not worried about ie5 and 5.5. then there's no need to do box model hacks.

Thanks Paul. That's very good information to know. The only reason I've been using the extra divs is because I didn't realize that ie6 would render the same as firefox and other browsers as long as I was coding in standards mode. I was simply trying to avoid the box model by applying all padding/margins to the inner elements when I didn't need to.

I'll have to clean up this layout and remove the extra divs now that I know this. I can clean up this html a lot.