Can't understand whats going on, I'm pretty used to making horizontal lists and this hasn't happened before!

In IE6, the list has too much of a top margin [even though it's set to 0], stopping it from aligning with the surrounding images.

Here's my code if anyone can help!

CSS:

/*STYLE'S///////////////////////////////////////////*/
body {margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;font-size:10px;}
a {color:#F0F0F0;}
a:hover {color:#FFF;}

/*DIV'S///////////////////////////////////////////*/
#container {width:720px;float:right;}
#banner {background-image:url(../Images/banner.jpg);height:253px;}
#swirl {background:url(../Images/swirl.jpg) 0 0 no-repeat;padding-left:30px;}
#content {width:100%;clear:left;padding:0;}
#footer {clear:left;height:40px;background-image:url(../Images/bg_bottom.jpg);}

/*LIST'S///////////////////////////////////////////*/
#nav {background:url(../Images/nav_ul.jpg) 0 0 repeat-x;padding:0;margin:0;
list-style-type:none;width:100%;float:left;}
#nav li {display:inline;}
#nav a {display:block;float:left;padding:8px 25px 12px 3px;background:url(../Images/nav_a.jpg)
100% 0 no-repeat;font-weight:bold;text-decoration:none;}

HTML:
Code:

<div id="container">
<div id="banner"></div>
<div id="swirl">
<div id="content"></div>
<ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">PRICE GUIDE </a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div id="div">Content for id &quot;content&quot; Goes Here</div>
</div>
<div id="footer">&nbsp;</div>
</div>

Isn’t it just your #content div who causes the different “top-margin”?


In Firefox the content-div is flat in the height, but in IE (6 and 7) it’s not. (and I don’t think you can get it flat in all browsers, except with display:none; or removing the element)


If this is not where you were searching for, or if you want more help with this, you maybe can give us your full code, then it’s probably a lot easier to help you.

Hmmm I've tried adding:

margin:0;

to #content, but it doesn't fix the problem. I didn't specify a margin for it in the first place so I didn't think that would be the problem.

Also, that's all of the code at the moment! Well, except for the head and body tags, which I didnt really think were necesarry.

Thats why Im so confused as the page hardly has any code and already I've ran into several problems!

Hmmm I've tried adding:
margin:0;
to #content, but it doesn't fix the problem.

Of course not, #content has no margin, but what I say is: the #content has a HEIGHT in some browsers.


Give your #content a temporary border and view in IE, so you can see what I mean.

Ahhhh good idea Ive fixed it now thanks.

Turns out there was some extra code in there that I'd missed! [and wasn't even in the sample i typed in here for some reason].

Duno how the hell it got in there!

lol the day i.e doesn't cause a problem, i'll friggin die