Rollover Help, two .gif images , multiple buttons Options

[KillingHours]

Hello everyone.

I'm new to creating a div layout but like most of y'all... i'm tired of having the "original" look of myspace and want something totally different than anyone else. But i've run into a snag. I'm trying to make a rollover nav for my page and can't seem to get past this one point. I'm sure it's something small that i'm missing but I need a fresh pair of peepers to gander at it for me. Here's what I'm trying to do ... and what i've got.


I'm trying to put buttons underneath my top banner in line from left to right. These buttons I want to also be rollovers as to give some perspective with the user hovers over them. So I've got my home button up and running perfect using this code:


Myspace Page:
http://www.myspace.com/killinghours

CODE

.home{position: absolute; left: 50%;
top: 190px;
margin-left: -400px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home.gif");
background-repeat:no-repeat;
z-index: 2;
}

.home:hover{position: absolute; left: 50%;
top: 190px;
margin-left: -400px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home-hover.gif");
background-repeat:no-repeat;
z-index: 2;
}

And this for the html.

CODE

<div style="position:abosolute;">
<a class="home" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy">
</div>

Now that it's up and running I want to add onto that and put a new button to the right of the home button and lets say it's "comment". So I add this code just below the ".home".

CODE

.commnet{position: absolute; left: 50%;
top: 190px;
margin-left: -250px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home.gif");
background-repeat:no-repeat;
z-index: 3;
}

.comment:hover{position: absolute; left: 50%;
top: 190px;
margin-left: -250px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home-hover.gif");
background-repeat:no-repeat;
z-index: 3;
}

(Yes I know the images are the same... i'm using it for placement.)

and obviously the corresponding html

ABOUT ME:

CODE

<div style="position:abosolute;">
<a class="comment" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy">
</div>

So here's the final product:

CODE

.home{position: absolute; left: 50%;
top: 190px;
margin-left: -400px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home.gif");
background-repeat:no-repeat;
z-index: 2;
}

.home:hover{position: absolute; left: 50%;
top: 190px;
margin-left: -400px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home-hover.gif");
background-repeat:no-repeat;
z-index: 2;
}



.commnet{position: absolute; left: 50%;
top: 190px;
margin-left: -250px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home.gif");
background-repeat:no-repeat;
z-index: 3;
}

.comment:hover{position: absolute; left: 50%;
top: 190px;
margin-left: -250px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home-hover.gif");
background-repeat:no-repeat;
z-index: 3;
}

I'D LIKE TO MEET:

CODE

<div style="position:abosolute;">
<a class="home" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy">
</div>

<div style="position:abosolute;">
<a class="comment" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy">
</div>

The problem is that the first button shows up just fine... however the second does not. I'm not sure why the second button does not show up. If anyone could give me a little nudge in the right direction I would surely appreciate it. Thanks.