Welcome to WebmasterWorld Guest from 23.23.46.20

Forum Moderators: not2easy

Margin disappears in FF

While visible in IE

   
6:43 am on Sep 4, 2009 (gmt 0)

10+ Year Member



When I use the following HTML/CSS the 10px margin above the div 'nextbox' is not visible in FF while it is visible in IE (6,7,8).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
.outerbox {border: 2px solid red;}
.smallbox {border: 2px solid black; float: left;}
.nextbox {border: 2px solid blue; margin-top: 10px; clear: left;}
</style>
</head>
<body>
<div class="outerbox">
<div class="smallbox">Blablah</div>
<div class="smallbox">Halbhalb</div>
<!-- <div style="clear:left"></div> -->
</div>
<div class="nextbox">
BlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablah
BlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablah
BlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablah
BlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablah
BlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablahBlablah
</div>
</body>
</html>

When the empty <div> is uncommented, the margin is also visible in FF. I can then also remove the clear: left from the .nextbox class. Why do I need to add the empty <div> for FF? And is there another way to have the margin (CSS?) without using an empty <div>?

1:55 am on Sep 5, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



On first looks it might be a case of collapsing margins (quite a complex topic on it's own: [w3.org...] ) but since there is only one margin involved, that's not going to be the case here.

So what's going on? (in standards compliant browser, keeping IE out of the picture as it tempts logic all the time)

Your outerbox (red border) gets no height cause there are no children that remain in the flow (they are all floated).

The nextbox (with it's clearance it has) needs to be under the floated boxes, but there is no problem in overlapping the margins under the floated items.

Floated elements don't push aside margins, they push aside content.

Now IE6 and IE7 suffer from a broken box model and whatnot, no surprise they get it different from all other browsers.

IE8 was supposed not to have these deviations anymore, and my copy renders it the same as Firefox (and Safari, Opera etc.) unless I press the "as broken as IE7" button.

Most out here would use padding instead of margins, but there are plenty of other solutions, just don't stare yourself blind on how legacy IE versions render things.

1:51 pm on Sep 6, 2009 (gmt 0)

10+ Year Member



Swa66,

Thanks for the info. You are right about IE8. It has the same, correct, behaviour as FF. Normally I use the IEtab plugin in FF to verify IE and then it exhibits IE6/7 behaviour. When using IE8 standalone it is ok.

The use of padding will not work in this case as the border of 'nextbox' will stlll be adjacent to the 'outbox'.

Arjan

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month