Forum Moderators: not2easy
I'm pretty new to CSS so I'm going to try to post only what's relevant to the issue I'm experiencing here, please go along with me, it's a bit to look at...
The problem I'm having comes in between the inner and header divs (In Firefox, this renders fine in IE). It seems that Firefox is placing some kind of top margin between the inner and header divs. The header div detailed here is pushed down way too far within the inner div in firefox (about 100px)...
Now, the strange thing is that if I add a border to the header div, it lines up just fine. If I remove the border, bam it moves back down. (The left margin renders fine either way, but not the top)
Any ideas? Sorry for the long post... Let me know if you need more details, it's a strange issue.
P.S. - The CSS validates 100%.
HTML (Relevant):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="main">
<div id="inner">
<div id="header">
<div id="links">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
<li><a href="#">Fourth</a></li>
<li><a href="#">Fifth</a></li>
</ul>
</div>
Closing divs...
CSS:
#main
{
background-image: url(../images/mainbackground.png);
width: 760px;
height: 770px;
padding: 0px 0px;
margin: 49px auto 0px auto;
}
#inner
{
position: relative;
width: 622px;
height: auto;
margin: 35px 0px 0px 72px;
padding: 0px 0px 0px 0px;
}
#header
{
background-image: url(../images/banner.png);
width: 621px;
height: 90px;
padding: 0px 0px;
margin: 0px 0px;
}
#links
{
margin: 63px 0px 0px 9px;
padding: 0px 0px;
height: 18px;
width: 603px;
}
I think its because the 63px margin on the links div collapses, due to not having any content. eh? Sorry hard to explain, mum or dad may come along and help (suzyuk drdoc). Or you may like to read this collapsing-margins [w3.org]
When you give the div a border it then has a layout/content.
ps its IE thats being the pain. opera firefox and safari all look the same.
See these examples
<!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>Untitled Document</title>
<style type="text/css">
#red {margin:30px; background:red;}
#yellow {margin:30px; background:yellow;}
#pink {margin:30px; background:pink;}
#green {margin:30px; background:green;}
</style>
</head>
<body>
<div id="red">
<div id="yellow">
<div id="pink">
<div id="green"> Some content </div>
</div>
</div>
</div>
</body>
</html>
#################
<!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>Untitled Document</title>
<style type="text/css">
#red {margin:30px; background:red;}
#yellow {margin:30px; background:yellow;}
#pink {margin:30px; background:pink;}
#green {margin:30px; background:green;}
</style>
</head>
<body>
<div id="red">CSS
<div id="yellow">is
<div id="pink">fun
<div id="green"> Some content </div>
</div>
</div>
</div>
</body>
</html>
#############
<!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>Untitled Document</title>
<style type="text/css">
* { border:2px solid black}
#red {margin:30px; background:red;}
#yellow {margin:30px; background:yellow;}
#pink {margin:30px; background:pink;}
#green {margin:30px; background:green;}
</style>
</head>
<body>
<div id="red">
<div id="yellow">
<div id="pink">
<div id="green"> Some content </div>
</div>
</div>
</div>
</body>
</html>
Thanks for the link and examples...
If anyone has any idea on how to fix it, please post while I'm searching away, I'd appreciate it.
I'm not sure what you actually want it to look like but if you want to get rid of the collapsing margin issue either apply a border or a small amount of padding.
eg
padding: 1px 0;
That would then make it render the same in IE opera and FF.
You can then style it to how you want it, just be aware that margins are supposed to do what there doing in firefox and opera and safari.
and while i'm here, it helps to post examples that dont need working on to see what the users want. If you load the code you gave into a document all we get to see is five links on a white background. The easier you make it for others to test the code the more help you will get.
oh and
welcome to WebmasterWorld ;)
Next time I'll post some real examples too :)
And thanks for the help + welcoming :D
