Trouble with background image and padding please can you help stop image from moving

HTML & CSS
1

Hi, had a brain freeze with background image and padding here.

I’ve set up an unordered list with anchors which I have made block level elements and applied an image which moves on hover.

Now I just want to move the text in the anchor itself with some padding left and top but the actual block level element also moves and gets bigger.

I’ve tried to be very specific when targeting the anchor but with no joy.

I’ve put the code below and would appreciate any thoughts.

Thanks in advance for any advice.

HTML

<nav id="navbar">
<ul>
<li><a href="#" class="activeLink">Home</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
</ul>
</nav><!--End of nav-->

CSS

#navbar {
		
			float: left;
			font-size: 85%;
			background-color: #fefafc;
			width: 200px;
			margin: 0;
			padding: 0;
			}
			
#navbar ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			}
			
#navbar a {
			display: block;
			width: 200px;
			height: 51px;
			background-image: url('nav.jpg');
			background-repeat: no-repeat;
			background-position: 0px 0px;
			text-decoration: none;
			list-style-type: none;
			color: #666;
			background-color: #fefafc;
			padding-left: 45px;
			padding-top: 15px;
			outline-style: none;
			}
			
#navbar a:hover {
			display: block;
			width: 200px;
			height: 51px;
			background-image: url('nav.jpg');
			background-repeat: no-repeat;
			background-position: 0px -51px;
			color: #666;
			background-color: #fefafc;
			}
			
#navbar a.activeLink {
			background-image: url('nav.jpg');
			background-repeat: no-repeat;
			background-position: 0px -51px;
			color: #666;
			background-color: #fefafc;
			cursor: default;
			}
2

Hi,

Padding will add to the width and height of the element so reduce the width and height by the same amount of padding that you added.

However if you want to centre the text then don’t add any padding but set the line-height to the same height as the height.

Don’t duplicate rules that are not needed in the hover states. Something roughly like this should do:


#navbar a {
    display: block;
    width: 200px;
    height: 51px;
    background#fefafc: url('nav.jpg') no-repeat 0 0;
    text-decoration: none;
    color: #666;
    text-indent:45px;
    line-height:51px;
}
#navbar a:hover,#navbar a.activeLink  {background-position: 0px -51px;}
#navbar a.activeLink {cursor: default;}
3

Hi Paul, thanks again for your reply.

Best regards.