Question

Here is my dev link:
http://leongaban.com/dev/just_nav.html

I’m having issues with Text alignment and Sprite alignment. This is the css sprite tutorial I am working from.

What I don’t understand is why are the li’s different widths, I looked in Chrome’s inspector and currently the first nav button’s width is 190 and the 2nd is 215.

It seems to be based on the text inside of the li’s. How would I go about correctly creating 4 nav buttons with a size of 196 x 60 with 2 pixels in between the 1st & 2nd and 3rd and 4th?

Any tips welcomed!

Current CSS:

.nav {
width: 790px;
height: 60px;
}

#nav { width: 790px; margin: 0 auto; padding: 0;}

#nav ul {
padding: 0;
margin: 0;
}

#nav li {
width: 196px;
display: inline;
list-style-type: none;
font-family: 'Droid Sans', sans-serif;
font-size: 24px;
color: white;
}

#nav li a {
background-image:url('../img/sprite_nav.png');
background-repeat:no-repeat;
color: white;
text-decoration: none;
text-align: center;
line-height: 30px;
height: 60px;
padding: 0px 2px 32px 100px;
}

#nav li a.item1 {background-position:0px 0px; }
#nav li a:hover.item1 {background-position:0px -60px; }
#nav li a:active.item1 {background-position:0px -120px; }

#nav li a.item2 {background-position:0px 0px; }
#nav li a:hover.item2 {background-position:0px -60px; }
#nav li a:active.item2 {background-position:0px -120px; }

#nav li a.item3 {background-position:0px 0px; }
#nav li a:hover.item3 {background-position:0px -60px; }
#nav li a:active.item3 {background-position:0px -120px; }

#nav li a.item4 {background-position:0px 0px; }
#nav li a:hover.item4 {background-position:0px -60px; }
#nav li a:active.item4 {background-position:0px -120px; }

Answer 1

#nav li a {
background-image:url('../img/sprite_nav.png');
background-repeat:no-repeat;
color: white;
text-decoration: none;
line-height: 30px;
text-align: center;
height: 45px;
width: 190px;
display: block;
float: left;
padding: 15px 0px 0px 0px;
margin-right: 2px;
}