Firefox floated <ul>... extra top padding or margin, even after default reset?

Question

I've got a simple floated horizontal list that is looking good in IE and Opera, but Firefox has extra padding or margin at the top that I don't know how to fix.. It looked fine until I had to add a display:inline to an image link next to it because of another issue, so I think it's something to do with the display attribute.. any ideas? I've been trying to figure this out for the past eight hours.

#header {
 background: url(../Images/header_bkg.png) repeat-x;
 width: 800px;
 height: 125px;
 position: relative;
}
#header ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 float: right;
}
#header li {
 float: left;
 padding: 0 6px 0 0;
 margin: 0;
}
#header a, #header a:visited {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: .7em;
 color: #333333;
 text-decoration: none;
 padding: 2px;
 display: block;
}
#header a:hover {
 font-size: .7em;
 color: #FFFFFF;
 background: #DCAD33;
 text-decoration: none;
 display: block;
}

<div id="header">
<img src="../Images/right_header_bar.png" style="float:right" />
<a href="../index.html" style="background:none; display: inline"><img src="../Images/Scofield_logo.png" style="float:left; padding: 0 0 0 20px" /></a>
<ul>
<li><a href="../index.html">HOME</a></li>
<li><a href="../Portfolio/portfolio.aspx">PORTFOLIO</a></li>
<li><a href="../Unique/ShipReady.aspx">RARITIES</a></li>
<li><a href="../custom.html">CUSTOM</a></li>
<li><a href="../trade.html">TRADE</a></li>
<li><a href="../Company.html">COMPANY</a></li>
<li><a href="../press.html">PRESS</a></li>
<li><a href="http://scofieldhistoriclighting.blogspot.com/" target="_blank">BLOG</a></li>
<li><a href="../Contact.html">CONTACT</a></li>
</ul>
</div>

Answer 1

I don't see it, given the code above. More complete test case?

In general, when you are mixing floated content and inline flow content, you have to put the right-floated content before the flow content or it tends to jump down to the next text line below the one you're currently writing on. This affects IE worse than it does Firefox though.

Answer 2

I dont think that is what he has encountered. Found this post with a similar issue.

if you take a float:right for example and place it above the next div in theory they should be side by side. Now add a h1 tag or something to both of those divs and you will see that in firefox the float:right div will have double padding or extra padding above it. This exists even if you place margins and paddings at zero.

e.g.

< div style="float:right:margin:0;padding:0;width:280px;"> < h1>Head Right< / h1> < /div>

< div style="margin:0;padding:0;width:300;"> < h1>Head Left< /h1> < /div>

what odd is that you can add a border around the div thats not floated (left my example) and set it to 1px solid white so its not visually visable and it will negate that extra space.... I cant figure out why its there. I even tried adding a width to the left non floated div and still got the space.

Answer 3

Solved the problem I was having, it may fix yours. My right float had the extra space at the top even though both side by side divs had the same h1 tag. To solve it I simply added zero top padding and zero top margin to the h1 that was in the float, thus making it equally flushed at top with the h1 on the left non floated.

Perhaps adding some zero padding and margin to your UL or LI's will solve yours.

Answer 4

I had to make two changes to get all those browsers to look equal:

body
{
    margin: 8px;
}

This made the browsers margin to align, each browser has its own default margin that you preemptively should reset before starting your coding, since I dont have the rest of your code this could be the issue.

Also, instead of the display: inline

 <a href="../index.html" style="background: none; float: left">