CSS3 Nav Link Backgrounds - css

Question

I'm trying to have an active state to show the user what page they are on. I created a div class of "nav-active" around and anchor tag as shown below.
<li><div class="nav-active">Blog</div></li>
I did this so that i could make the background dynamic in size based on how many characters the nav-link was.
.nav-active {
background: #ff4b33; /* Old browsers */
background: -moz-linear-gradient(top, #ff4b33 0%, #ca2913 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4b33), color-stop(100%,#ca2913)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* IE10+ */
background: linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4b33', endColorstr='#ca2913',GradientType=0 ); /* IE6-9 */
height:70px;
margin-top: -30px;
padding: 0 15px;
because of the padding, depending on what page i'm on the links move.
I'm sure there is a better way about doing this, the question is how?
Any help would be greatly appreciated.

Answer 1

Apply the background to the link style directly, like this:
<li><a class="nav-active" href="index.html">Blog</a></li>
To prevent your links from changing in size depending on what page you are on, style the positioning for all your links and only the background for .navactive:
#nav li {
position: float;
}
#nav li a {
display: block;
padding: 0 15px;
...
}
#nav li a.nav-active {
-webkit-linear-gradient(top, #ff4b33 0%,#ca2913 100%);
...
}