div rollovers are messed up Options

[Saraaaah]

i've made div layouts with rollovers before but they never really got messed up like this one

1. i don't know why there are spaces between the "home" and "add" button and the "view pictures" and "friends" button. so can someone tell me?
(circled in green in the image at the bottom)

2. why is the rollover image showing half of the hover and half of the non-hover?
(boxed in yellow in the image at the bottom)

sorry if my questions don't make sense

the only rollovers that are working are the "view comments" button and "credit" button

here are the codes
about me:

CODE

<style type=text/css>
body {
background-color: ffffff;
background-image: url("http://i26.tinypic.com/29uvdk3.png");
background-position: center;
background-repeat: repeat;
background-attachment: fixed;
scrollbar-arrow-color:000000;
scrollbar-track-color: ffbb7e;
scrollbar-shadow-color: ffbb7e;
scrollbar-face-color:ffbb7e;
scrollbar-highlight-color:ffbb7e;
scrollbar-darkshadow-color:ffbb7e;
scrollbar-3dlight-color:ffbb7e;
cursor: crosshair;

b, strong{
background-color: transparent;
color: 59bbff;
font-family:Tahoma;
font-size:7pt;
letter-spacing:0pt;
font-weight:bold; }
i,em{
background-color: transparent;
color: fffc00;
font-family:Tahoma;
font-size:7pt;
letter-spacing:0pt;
font-weight:normal; }
u{
background-color: transparent;
color: ffffff;
font-family:Tahoma;
font-size:7pt;
letter-spacing:0pt;
font-weight:normal; }
s{
background-color: transparent;
color: ff6262;
font-family:Tahoma;
font-size:7pt;
letter-spacing:0pt;
font-weight:normal: }

h1 {
text-transform:lowercase;
font-family:arial;
Font-weight:normal;
background-color:transparent;
color:ffffff;
border-bottom:2px solid;
border-color:000000;
line-height:12px;
font-size:20px;
letter-spacing:0px;
display:block;
padding-top:5px;
padding-bottom:5px;
}

table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}

table table table {border: 1px solid; border-color: ffffff; background-color: ffffff; }

body,table, td, li, p, div, textarea
{font:normal 9px tahoma; color:ffffff; font-weight:none; border:0px; text-transform: none; line-height:12px;}


.text {font:normal 9px tahoma; color:ffffff; font-weight:none; border:0px; text-transform: none; line-height:12px;}


a:link, a.man{font-family:tahoma; font-size:9px; color:ff3fa7; font-weight:none;border:0px; text-transform: none; letter-spacing: 0px;}
a:active{font-family:tahoma; font-size:9px; color:ff3fa7; font-weight:none;border:0px; text-transform: none;}
a:visited{font-family:tahoma; font-size:9px; color:ff3fa7; font-weight:none;border:0px; text-transform: none;}
a:hover{font-family:tahoma; font-size:9px; color:ff0000; font-weight:none;border:0px; text-transform: none;}
.standard b, p b, B, strong {
font-family:tahoma; font-size:9px; color:59bbff; font-weight:none;border:0px; text-transform: normal; }
</style>

<style type="text/css">
.n{ HIDE STUFF }
.userProfiledetail, .userProfileURL, .userProfileSchool,
.interestsAndDetails, .friendsComments,.extendedNetwork,
.latestBlogEntry, .friendSpace, .orangetext15, .navigationbar, .profileInfo, .contacttable { display:none;}
a.text, table div font a, table div div {visibility:hidden;}
table tr td div font {display: none;}
body div table td form {display:none!important;}
table, td, tr{ background-color:transparent;}
object, embed{ width:0px; height:0px;}
body div td div div select {width:0px !important;}
</style>
<style>
td, tr, table{visibility:hidden;}
td, tr, table a.text{visibility:visible;}
</style>
<style type="text/css">
table tr td div div {border:0px;background-color:transparent;padding-left:30px;width:450px;}


.navigation{
background-color:transparent;
position:absolute;
left: 0%;
width:55px;
height:46px;
z-index:5;
margin-left:403px;
top:700px;}

.home{
height:9px;
width: 55px;
background-COLOR:transparent;
hidden;
background: url(http://i272.photobucket.com/albums/jj179/Tarshlyts/summerhome1.png) top left no-repeat;
display: block;}

.home:hover{
background-position: bottom left;}

.add{
height:6px;
width: 55px;
background-COLOR:transparent;
hidden;
background: url(http://i272.photobucket.com/albums/jj179/Tarshlyts/summeradd1.png) top left no-repeat;
display: block;}

.add:hover{
background-position: bottom left;}

.message{
height:7px;
width: 55px;
background-COLOR:transparent;
hidden;
background: url(http://i272.photobucket.com/albums/jj179/Tarshlyts/summermessage1.png) top left no-repeat;
display: block;}

.message:hover{
background-position: bottom left;}

.blog{
height:7px;
width: 55px;
background-COLOR:transparent;
hidden;
background: url(http://i272.photobucket.com/albums/jj179/Tarshlyts/summerblog1.png) top left no-repeat;
display: block;}

.blog:hover{
background-position: bottom left;}

.block{
height:7px;
width: 55px;
background-COLOR:transparent;
hidden;
background: url(http://i272.photobucket.com/albums/jj179/Tarshlyts/summerblock1.png) top left no-repeat;
display: block;}

.block:hover{
background-position: bottom left;}

.comments{
height:10px;
width: 55px;
background-COLOR:transparent;
hidden;
background: url(http://i272.photobucket.com/albums/jj179/Tarshlyts/summercomments1.png) top left no-repeat;
display: block;}

.comments:hover{
background-position: bottom left;}

.navigation2{
background-color:transparent;
position:absolute;
left: 0%;
width:52px;
height:24px;
z-index:5;
margin-left:700px;
top:700px;}

.pictures{
height:9px;
width: 52px;
background-COLOR:transparent;
hidden;
background: url(http://i272.photobucket.com/albums/jj179/Tarshlyts/summerpictures1.png) top left no-repeat;
display: block;}

.pictures:hover{
background-position: bottom left;}

.friends{
height:8px;
width: 52px;
background-COLOR:transparent;
hidden;
background: url(http://i272.photobucket.com/albums/jj179/Tarshlyts/summerfriends1.png) top left no-repeat;
display: block;}

.friends:hover{
background-position: bottom left;}

.credit{
height:7px;
width: 52px;
background-COLOR:transparent;
hidden;
background: url(http://i272.photobucket.com/albums/jj179/Tarshlyts/summercredit1.png) top left no-repeat;
display: block;}

.credit:hover{
background-position: bottom left;}




</style>
<div style="position:absolute; top:5; left:5;"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL3RhcnNoc2l0ZQ=="><img src="http://i272.photobucket.com/albums/jj179/Tarshlyts/tarsh-button.gif"/></a></div>

i'd like to meet:

CODE

<div class="bg" style="position: absolute; left:300px; top:150px; width:700px; height:700px; overflow: auto; overflow-y:hidden;">
<img src="http://i272.photobucket.com/albums/jj179/Tarshlyts/cantwaittillsummer.png" width="700" height="700" border="0" alt="">
</div>

<div class="content" style="position: absolute; left:480px; top:270px; width:350px; height:300px; overflow: auto; overflow-x:hidden; color:ffffff;">
<h1>Info</h1>
<b>Name:</b> name<br>
<b>Age:</b> age<br>
<b>Gender:</b> gender<br>
<b>Orientation:</b> orientation<br>
<b>Ethnicity:</b> ethnicity
<br><br>

<h1>About Me</h1>
you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here.
<br><br>

<h1>CSS</h1>
<b>bold</b> <i>italic</i> <u>underline</u> <s>strike</s> <a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL3RhcnNoc2l0ZQ==">link</a>
<br><br>

<h1>Header</h1>
you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here. you cant write something about yourself here.
<br><br>

<h1>Comment Me</h1>
<center>
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="XXXXXX" type="hidden"><textarea name="f_comments" style="width: 155; height: 25px;" cols="10" rows="7" style="border-width: 1px; border-style: solid; border-color: 000000; font-family: small fonts; text-transform:uppercase; letter-spacing:1pt;font-size: 7px; color: 000000; background-color: ffffff;" style="overflow:auto;">HEY </textarea>
<br> <input value="SUBMIT" style="border-width: 1px; border-style: solid; border-color: 000000; width:75px; font-family: small fonts; text-transform:uppercase; letter-spacing:1pt; font-size: 7px; color: 000000; background-color: ffffff;" type="submit"> <input value="RESET" style="border-width: 1px; border-style: solid; border-color: 000000; width:75px; font-family: small fonts; text-transform:uppercase; letter-spacing:1pt;font-size: 7px; color: 000000; background-color: ffffff;" type="reset"></form></div>

<div class="navigation">
<a href="http://home.myspace.com/index.cfm?fuseaction=user" class="home">
<a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXX" class="add">
<a href="http://blog.myspace.com/XXXXXX" class="blog">
<a href="http://www.myspace.com/index.cfm?fuseaction=block.blockuser&userID=XXXXXX" class="block">
<a href="http://www.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=XXXXXX" class="comments">
</div>

<div class="navigation2">
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=XXXXXX" class="pictures">
<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=XXXXXX" class="friends">
<a href="http://www.myspace.com/tarshsite" class="credit">
</div>

here's a screenshot:


here's the link to the myspace:
click

[IVIike]

If I were you I would just restart with the coding... that should reduce the problems

[Saraaaah]

okay
thanks for the advice:)