Question

I’ve found a really irritating artifact that involves padding overshooting a border in Firefox 4-8 only. Google Chrome, IE9, Opera 11, & Safari are not affected by this and display it perfectly.

I’ve produced a jsfiddle to demonstrate the effect – when you hover over one of the list items, the bg-color changes on that list item, much like it does on the buttons next to the stack overflow logo up there ^.

The problem is, if the bottom padding is set to 10px Firefox renders it as overshooting the li, and the other browsers have no issues, but if it’s changed to 9px, Firefox likes it and shows it nicely, but the rest of the browser crowd render the padding as ‘too-short’.

Really confusing that a generally standards compliant browser deviates from the pack like it does.

Here’s the jsfiddle (I’ve commented the critical line so you can change it between 9/10px and see the difference): http://jsfiddle.net/NaxUj/7/

Any ideas for what causes this and how it can be fixed?

Answer 1

The mean issue of the font line-height which is treated differently by different browsers . So, Instead of padding give line-height to your LI it’s better Like this:

ul#mainmenu li {
    display:block;
    float:left;
    width:140px;
    line-height:30px;
    text-align:center;
}

http://jsfiddle.net/NaxUj/8/

Reason:

because you did not define line-height of your li so, that why every browsers render the line-height according to them. So, always define line-height for cross browsers capability .

Check this example in which i didn’t remove padding & give line-height also

http://jsfiddle.net/NaxUj/9/