Render different in chrome and firefox

Question

I've just finish a navbar but strangely and I don't get why, it is not rendering the same on firefox and chrome.

I'll show you the difference, do you have an idea where this can come from ?

Chrome (normale) :

Firefox and IE:

As an hint (possibly), I use the propriety table , table-row and table-cell but if I play with it I dont see any changement relevant.

Here is link to the website if you want to do yourself an idea : origin And here is a link to a fiddle just with the navigator : JsFiddle

I'm still new to cross browser development so if someone has an hint for me.. ?

Answer 1

Looks to me like a float isn't clearing properly in certain browsers due to slight pixel differences in font rendering.

Try adding clear:both to your navigation bar. This should force it to clear all floats.

Answer 2

You can chose one of these options to solve your problem.

Add overflow: hidden; to the #header .

Add float:left; to the #main-menu

Add clear:both to the #main-menu