CODEWITHSUNDEEP
htmlcss
Dónal
Dónal

Reputation: 187499

background image doesn't cover full width of element

On this website, the menu has the following structure:

<ul>
    <li class="page_item page-item-2 current_page_item">
        <a href="index.html">Home</a>
    </li>
    <li class="page_item page-item-7">
        <a href="features/index.html">Features</a>
    </li>
    <li class="page_item page-item-18">
        <a href="news-reviews/index.html">News &amp; Reviews</a>
    </li>
    <li class="page_item page-item-20">
        <a href="contact/index.html">Contact</a>
    </li>
</ul>

The current_page_item class changes the background of the currently selected menu item to black via the following rule:

.mainnav li.current_page_item a {
    background: url("images/bg_nav_hover.png") no-repeat scroll right center transparent;
}

This works for the Home menu item, but for all others a small gap is left on the left-hand side of the selected menu item, highlighted by the yellow circle in the image below

enter image description here

I can't seem to figure out why this problem occurs for all menu items except Home.

Upvotes: 0

Views: 127

Answers (2)

Ramin Omrani
Ramin Omrani

Reputation: 3761

You should use display:table-cell for .mainnav_wrapper .mainnav ul li class. then add a padding to center the menu items to your ul element:

.mainnav_wrapper ul {
    padding-left:192px;//this is especially for this project
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    text-align: center;
    width: 960px;
}

and you are ready to go...

Upvotes: 1

Jeff Rupert
Jeff Rupert

Reputation: 4840

Your <li> tags are display: inline-block; and there are spaces between the tags.

Because your <li> tags are inline-block, they respect whitespace in the HTML, just like inline elements and text.

In the end, the background image is covering the background of the element correctly. Your best option to get rid of the spacing is to remove all whitespace between </li> and the next <li> tags.

As mentioned by @ajp15243 below, you can omit the closing tag, or use some wacky tricks to get the HTML to swallow up the whitespace.

Upvotes: 3

Related Questions