CODEWITHSUNDEEP
htmlcss
Yarry
Yarry

Reputation: 25

list background on hover not entirely covered

I'm trying to make some kind of a navigation bar with an unsorted list and have list items with graphics in them but whenever hovering over an item the background color doesn't cover the whole area or there is a bit of space inbetween each item..

Upvotes: 0

Views: 113

Answers (3)

CherryFlavourPez
CherryFlavourPez

Reputation: 7487

The gaps that you're seeing there are caused by whitespace in your markup. Unlike floats, inline-block will actually respect whitespace in your HTML. The simplest solution therefore is to either add empty comments or just ensure that each <li> item has no space between it, like this:

<ul id="navbar">
    <li><div class="refresh"></div></li><li><div class="settings"></div></li><li><div class="s_res"></div></li><li><div class="h_res"></div></li>
</ul>

Check out this CSS Tricks article for a more in-depth explanation and other alternative fixes.

Nathan Lee's solution is one option (replacing inline-block with table-cell) but you should be aware that there are other consequences of that change (lack of IE7 support if you care about that, but also differences in vertical-align etc).

If you can't amend the markup, then a negative margin will achieve what you're after. However, that -4px is actually down to the font in use, so might need to vary slightly. It always feels like a bit of a hack. Check out this fiddle for an example of why this is more fragile than the alternatives.

Upvotes: 3

Furunomoe
Furunomoe

Reputation: 1404

Try adding

margin-left:-4px;

to your

ul#navbar li

Upvotes: 0

Nitesh
Nitesh

Reputation: 15739

Here is the solution. Just replace the below css with yours.

ul#navbar li {
    border-right: 2px solid #FF9000;
    display: table-cell;
    margin: 0;
    padding: 14px;
}

WORKING DEMO

Hope this helps.

Upvotes: 1

Related Questions