homepage Welcome to WebmasterWorld Guest from 54.205.122.62
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
div won't render as expected without adding border
in FF/OP. IE6/7 are as expected
benihana

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3520937 posted 3:12 pm on Dec 5, 2007 (gmt 0)

Simplified code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>

<div id="news">
<h2>News</h2>

<h3>Headline 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do &hellip;</p>
<ul><li>Today</li><li><a href="#">More</a></li></ul>

<h3>Headline 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do &hellip;</p>
<ul><li>2 days ago</li><li><a href="#">More</a></li></ul>

<h3>Headline 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do &hellip;</p>
<ul><li>Last week</li><li><a href="#">More</a></li></ul>

</div>

CSS

#news {
width:320px;
background:#fff url(../images/news_bg.gif) top right no-repeat;
margin-top:9px;
border:1px solid #ccc;/*why why*/
}

#news h2, #news h3, #news p, #news ul {
margin-left:26px;
}

#news h2 {
color:#DEA003;
font:1em arial, sans-serif;
margin-top:24px;
}

If i remove the border from #news, FF amd Op make the margin-top:9px be a lot more than 9px, and dont respect the margin-top:24px; on the <h2>

Its not an issue ive notcied before. Anybody have any suggestions?

Thanks

 

SuzyUK

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



 
Msg#: 3520937 posted 3:56 pm on Dec 5, 2007 (gmt 0)

BH, It's collapsing margins [webmasterworld.com]

First off, Firefox is the correct rendering ;)

The margin of the h2 is collapsing/combining with the margin of the #news div because there is nothing (speaking in Box Model terms) to stop the margins adjoining. When you add the border (padding would do it too) it puts a "barrier" between the margins of the two boxes and stops the margins adjoining, therefore stopping them collapsing.

You would normally see the same effect (as FF/OP) in IE too. IE renders collapsing margins properly most of the time when a specific top margin is used on the elements involved, which you have in this case.. however our old friend hasLayout (triggered by the width on the news div) comes into play and causes a double whammy making IE not collapse the margins in either case. :o

I take it it is the IE interpretation you want, in which case if you do not want to use a border use 1px top padding instead.

hth

edit reason: added reference link - or try this search [google.com]

[edited by: SuzyUK at 3:59 pm (utc) on Dec. 5, 2007]

benihana

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3520937 posted 4:07 pm on Dec 5, 2007 (gmt 0)

:)

Thanks Suzy. Fixed. And it makes sense now ;)

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