cannot seem to perform what should be a simple navigation tweak

Question

Hey guys,

I haven't touched this site in a while so I am rusty when it comes to fixing a styling issue that has happened as a result of a change.

see http://edocumentsciences.com.previewdns.com/

the top navigation green images that indicate that you are either on the page, over when you hover over an item do not seem to be lining up correctly.

This is the structure of the "current" or "hovered" nav item Code:

<li class="first_item page_item page-item-2 current_page_item"><a title="Home" href="http://edocumentsciences.com.previewdns.com"&gt;&lt;span class="title_text">Home</span></a></li>

and here are the two associated styles. The span and the hyperlink both have the background image, but one has the margin set so the right corner lines up (-30px)

The Hyperlink Style: Code:

background:url("images/menu_bg.png") no-repeat scroll 100% -30px transparent; text-decoration:none; The Span Style: Code:

'background:url("images/menu_bg.png") no-repeat scroll 0 0 transparent; color:#FFFFFF; width:100%;'

Answer 1

First off, change your vertical position back to -30px (it's at -29px now). Second, you need to adjust your padding. I would set padding on all spans to 0 0 0 10px, and on all as to 0 9px 0 0;. Third, instead of setting width to 100% on the span, set it to auto. The 100% is including the padding and messing it up.