I am trying to create a horizontal navigation bar that extends across the top of a page. My current problem is that it is a few pixels short of extending across the page. http://www.remarkable-solutions.net/
I don’t want to have even blocks for the list item links because some of the link text is longer than others. The width of each list item link depends upon the amount of text and the padding on the right and left sides. Each link also has a background (an image with a gradient that tiles horizontally) and the a:hover has a similar image with a different color. Also each link has a 1 px border on the right side.
If I add an additional 1 px of padding to the li a (and li a:hover), then it looks good in IE on a PC, but on a Mac, the navigation bar is pushed into a second line. Adding the extra padding actually adds 8 px to the entire bar because of the number of list items.
Is there a way to add padding to just one of the list items? I tried adding a class to the last list item to create extra padding, but it wasn’t working for me. I am sure I wasn’t doing it correctly. Alternatively, is there a better way to create this same effect?
Thank you…
