IE & Firefox rendering differently

fRostiE · 13 Aug 2008 at 18:17

First off, im a CSS novice, so go easy on me!... How come the navigation looks right in firefox (margins and padding add up using firebug and look fine) but IE goes off on one and chucks the 4th nav button down a row?

http://mattfrost.net/fotchsa/

Would prefer not to use any IE 'hacks' if possible, hoping i've just forgotten to tell IE to behave in one way or another

Thanks,

RandomTom · 13 Aug 2008 at 18:36

On firefox 2 here your button goes down a row like you say it does on IE.

Check your browser text-size.

Inquisitor · 13 Aug 2008 at 19:06

This is the double-margin float bug. Just put display: inline; on each of the li elements and it should work. It is a hack but it doesn't have any side effects and is perfectly valid CSS.

fRostiE · 13 Aug 2008 at 19:12

Thanks Inquisitor that sorted it good and proper...

Is there anywhere on the web that lists common bugs for CSS like this 'double-margin float bug'?

Thanks again

Inquisitor · 13 Aug 2008 at 19:14

Not sure, but it'd certainly be useful. The only reason I knew this was the problem is that exactly the same thing happened to me today

I've taken the attitude with IE 6 that I don't expect anything to work, I'm just surprised when it does.

Edit: more info on the bug:
http://www.positioniseverything.net/explorer/doubled-margin.html

And here's a list of bugs (though probably incomplete, knowing IE):
http://www.positioniseverything.net/explorer.html

Just search Google for more lists

fRostiE · 13 Aug 2008 at 20:03

fantastic, glad im not the only one who was caught out, thanks for the fix