Welcome to WebmasterWorld Guest from 54.211.101.8

Forum Moderators: not2easy

div won't render as expected without adding border

in FF/OP. IE6/7 are as expected

   
3:12 pm on Dec 5, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

3:56 pm on Dec 5, 2007 (gmt 0)

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



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]

4:07 pm on Dec 5, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



:)

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

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month