Troubleshooting 1px margin difference Chrome v. Firefox

[svcghost]

Hey guys,

Can you please just give me a big list of things I can do to figure out why a list element would be 1px higher in margin on Safari and Chrome than it is on Firefox? I looked this up but nothing I saw worked, so I'd like to compile a list here.

Here is an image showing this discrepancy:


HTML:

<ul id="menu-2" class="sf-menu sf-right sf-js-enabled sf-shadow">
	<li>
		<a class="sf-with-ul" href="link.html">LINK</a>
	</li>
	<li>
			<a class="sf-with-ul" href="#">MENU</a>
		<ul class="sub-list" style="display: none; visibility: hidden;">
			<li>
				<a class="sf-with-ul-sub" href="/link">Menu</a>
			</li>
			<li>
				<a class="sf-with-ul-sub" href="/link">Menu</a>
			</li>
			<li>
				<a class="sf-with-ul-sub" href="/link">Menu</a>
			</li>
			<li>
				<a class="sf-with-ul-sub" href="/bookmarks.php">Menu</a>
			</li>
			<li>
				<a class="sf-with-ul-sub" href="/link">Menu</a>
			</li>
		</ul>
	</li>	
</ul>

[ralph.m]

It would be much easier to help with this if we had a live link. Otherwise we are just shooting in the dark pretty much.

[svcghost]

I can try and get that up. Need to get a free web host first. Any shots in the dark? Thanks man.

[ralph.m]

I can try and get that up. Need to get a free web host first. Any shots in the dark? Thanks man.

Usually you get free hosting space with your ISP. Otherwise, if the design holds up without images loaded, you could post a working page with embedded CSS—or post the necessary images here too.

[Paul O'B]

It's probably a rounding error on the line-height or you haven't set the line-height consistently between browsers. It may be that you have set the height of the element by its font size and padding only and that will never be the same cross browser as all vary in the space for the glyphs (not accounting for rounding errors).

It should be easy for you to knock up a code example that exhibits the problem. Just post full html and css here if you don't have anywhere online to show it.

[deathshadow60]

Paul likely hit it on the head on rounding errors -- if you are using %/em for your padding or font size on this type of menu, FF will often round up what every other browser on the planet rounds down.

That said the HTML presented suffers greatly from "not every ejaculation deserves a name" -- which is to say NONE of the classes present should even be in there in the first place... much less the inlined style... SF I assume is short for some form of stupidfish menu, which I don't consider anywhere near as practical as just writing a CSS menu properly and throwing a behavior file at IE6-.

It's funny, but I often say that CSS without the HTML it's applied to is gibberish; this time out we have the opposite problem. Without the CSS we have no clue what you are even trying to do to that markup; that said, there is NO legitimate reason for that HTML to be much more than:

<ul id="menu-2">
	<li><a href="link.html">LINK</a></li>
	<li>
		<a href="#">MENU</a>
		<ul>
			<li><a href="/link">Menu</a></li>
			<li><a href="/link">Menu</a></li>
			<li><a href="/link">Menu</a></li>
			<li><a href="/bookmarks.php">Menu</a></li>
			<li><a href="/link">Menu</a></li>
		</ul>
	</li>	
</ul>