fmz 14

I have just finished a PSD to XHTML conversion for a client and have two uncooperative pixels left. When you mouseover the Contact link in the navigation there are a couple of pixels at the far right that don't get covered.

If I increase the padding it bumps the Contact link down to the next row.

I would appreciate some assistance here to cover those last couple of pixels.

Here is the dev link:

Here is the hthml:

<ul id="mainNav">
        <li><a class="selected" href="#">Home</a></li>
        <li>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">About Us</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">Home Remodels</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">New Home Builds</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">Our Portfolio</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
            </li>
        <li><a href="#">Our Blog</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">FAQ'S</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a class="contact" href="#">Contact Us</a></li>
    </ul>

Here is the CSS:

ul#mainNav {
clear: both;
width: 930px;
height: 39px;
margin: 0;
padding: 0;
float: left;
list-style-type: none;
position: relative;
background-color: #0d0600;
font: bold 14px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #fff;
}

ul#mainNav li {
float: left;
margin: 0;
padding: 0;
}

ul#mainNav li a {
padding: 12px 14px 16px 14px;
display: block;
text-decoration: none;
color: #fff;
}

ul#mainNav li a.contact {
padding-right: 18px;
}

ul#mainNav li a.selected,
ul#mainNav li a:hover {
background: #b5a37e url(../_images/bg_mainNav.jpg) repeat-x left top;
}

ul#mainNav li span a:hover {
background-image: none;
}

ul#mainNav span {
float: left;
display: none;
padding-top: 4px;
position: absolute;
z-index: 10;
left: 0;
top: 46px;
width: 930px;
background-color: #b5a37e;
color: #fff;
text-transform: none;
}

ul#mainNav li:hover span {
display: block;
}

ul#mainNav li span a {
display: inline;
padding: 10px 7px 10px 7px;
}

body#inside.portfolio ul#mainNav li span a {
padding-top: 7px;
}

ul#mainNav li span a:hover, 
ul#mainNav li span a.selected {
text-decoration: underline;
}

Thanks in advance!

  • Its giving me 404 error for that test page. GaVrA almost 9 years ago

1 answer

Mottie 1134
1
point
This was chosen as the best answer

Try making the navigation bar 923px wide instead of 930px... that should solve it.

ul#mainNav {
 width:923px;
}
Answered almost 9 years ago by Mottie