Slight Gap Between List Items in an Unordered List

Question

Hi,

Hoping someone can assist, 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.

Any ideas on what I need to do as I think I am doing something wrong to ensure that between each list item, there is no gap in both Firefox and Google Chrome?

Thanks.

Answer 1

Have you tried a negative margin?

li { margin-bottom: -2px; }

These cross-browser pixel imperfections will always exist, this margin trick usually saves a lot of time when tweaking the layout.

Answer 2

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.