[Solved] Additional padding being added on a:hover

[cre8tive1]

Hi all,

I’m working on navigational links today and I’m running into an issue when trying to change the background on the a:hover state.

I have the navigation displaying a background image initially, then on hover, change to the color #fff. For some reason, when I hover over the link extra padding is being added to the left and right of the link.

Here is the CSS for this section:

Code:

ul#navigation { list-style-type: none; width: 100%; font-family : Georgia, Times, serif; font-size : 1.25em; font-weight : regular; text-align: left; }

ul#navigation li { display: inline; background: url(images/nav-inactive-li-bg.gif) repeat-x; height: 26px; padding: 3px 15px 3px 15px; margin: 0 5px 0 0; }

ul#navigation li a { color: #2F2626; text-decoration: none;}
ul#navigation li a:hover { background: #fff; height: 26px; padding: 3px 15px 3px 15px;}

Here is a link to the page: http://blog.fabianross.com/

Any suggestions are greatly appreciated.

Thanks,

[TheDoc]

This is occurring because at first you are applying the background to the <li>, but then on the hover you’re applying it to the <a>, you should really pick one of those and stick with it throughout. In this case, I would always have the background image on the <a>.

You may not need to actually use Sprites in this particular case, but the code Chris uses should help you figure out what elements to put the styling on (it can be confusing for sure):

https://css-tricks.com/css-sprites/

[cre8tive1]

Ah, that makes perfect sense. It works as it should now.

Thanks

[Author]

Posts