homepage Welcome to WebmasterWorld Guest from 54.204.215.209
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Margin disappears in FF
While visible in IE
adb64




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

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>?

 

swa66




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

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.

adb64




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved