Question

I am using an unordered list where the actual list items have a rounded rectangular background image.

My problem is, there seems to be a slight gap between the list items in Firefox but in Google Chrome, there is no gap.

If I change the CSS line-height value, it corrects in Firefox but then breaks Google Chrome.

What do I need to do? I think I am doing something wrong to ensure that between each list item, there is no gap in both Firefox and Google Chrome.

Answer 1

The best bet is to reset all padding/margins on your <li> and <ul> and then add padding back in as needed for the background image:

ul, li {
    padding: 0;  
    margin: 0;
}

Different browsers apply different default paddings/margins to list, so you need to strip it off for consistency.