homepage Welcome to WebmasterWorld Guest from 107.20.34.144
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Margin disappears in FF
While visible in IE
adb64

10+ Year Member



 
Msg#: 3983859 posted 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

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



 
Msg#: 3983859 posted 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

10+ Year Member



 
Msg#: 3983859 posted 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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved