steadying rollovers, so my links don't "jump" Options

[Teesa]

hi all =)

i've decided to make a new layout, and have just started learning about rollovers (haha, i took a long break as you can see!) so, i've coded it for the most part, but i don't like the fact that when my mouse goes over my links (home, pics, etc.), the links seem to "pop" up or down.

how do i make it so that the links stay steady when my mouse rolls over them? i don't know if i am making any sense, or if this is a dumb question, lol. i would love any feedback though, thanks!

ABOUT ME:

CODE

<style>
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}

table div div{visibility:hidden;!important;}

</style>

<style>

body div table td form option{display:none!important;}
body div table td form select{display:none!important;}
body div table td form input{display:none!important;}

td td embed, td td object { position: absolute; top: -500px; left: -500px; }
td td td embed, td td td object { position: static !important; }

body {
background-color:!important;
background-image:url("http://img.photobucket.com/albums/v288/xx_brownsuga_xx/pattern_129.gif");
background-repeat:repeat-all;
background-position:top center;
background-attachment:scroll;
}
td, .text, div, input {
color:000000!important;
font-family:arial;
font-size:8pt;
font-weight: normal;
text-transform:none;
letter-spacing: 0px;
}

.home{
height:68px;
width:62px;
background-COLOR:transparent;
background: url(http://img.photobucket.com/albums/v288/xx_brownsuga_xx/homerollover1.png);
background-position:top left;
background-repeat: no-repeat;
display: block;}

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

.add{
height:68px;
width:62px;
background-COLOR:transparent;
background: url();
background-position:top left;
background-repeat: no-repeat;
display: block;}

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

.pictures{
height:74px;
width:118px;
background-COLOR:transparent;
background: url(http://img.photobucket.com/albums/v288/xx_brownsuga_xx/picsrollover1.png);
background-position:top left;
background-repeat: no-repeat;
display: block;}

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

.message{
height:86px;
width:119px;
background-COLOR:transparent;
background: url(http://img.photobucket.com/albums/v288/xx_brownsuga_xx/messagerollover1.png);
background-position:top left;
background-repeat: no-repeat;
display: block;}

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

.block{
height:124px;
width:74px;
background-COLOR:transparent;
background: url();
background-position:top left;
background-repeat: no-repeat;
display: block;}

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

.addme{
height:80px;
width:200px;
background-COLOR:transparent;
background: url(http://img.photobucket.com/albums/v288/xx_brownsuga_xx/addmerollover1.png);
background-position:top left;
background-repeat: no-repeat;
display: block;}

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

a {
color:f756a2!important;
font-family:arial;
font-size:9pt;
font-weight: normal;
letter-spacing:-1px;
text-transform:uppercase;
text-decoration:none!important;
}
a:hover {
color:568ff7!important;
font-family:arial;
font-size:9pt;
font-weight: normal;
letter-spacing:-1px;
text-transform:uppercase;
text-decoration:none!important;}


h1 {
margin: 0px;
color: f756a2;
text-align:center;
border-bottom:1px dashed;
border-color:56b1f7;
font-family:arial;
font-size: 10pt;
font-weight: normal;
letter-spacing: 1px;
text-transform: lowercase;
background-color: transparent;
line-height: 15pt;
padding:2px;
margin-bottom: 5px;
margin-top: 2px;
padding-left:2px;
}
li {
color:f892c9;
line-height:10px;
font-family:arial;
letter-spacing:0px;
text-align:justify;
}
b{
color:f756a2;
font-size:9pt;
cursor:default;
line-height:10px;
letter-spacing:-1px;
font-family:arial;
text-transform:lowercase;
}
s{
color:56b1f7;
font-size:10pt;
cursor:default;
line-height:10px;
letter-spacing:-1px;
font-family:arial;
text-transform:lowercase;
}
i{
color:f9d615;
font-size:10pt;
cursor:default;
line-height:10px;
letter-spacing:0px;
font-family:arial;
text-transform:none;
}
u{
color:bbe31d;
font-size:11px;
cursor:default;
line-height:10px;
letter-spacing:0px;
font-family:arial;
text-transform:none;}


.nostalgicbg {
background-color:transparent;
border:0px solid;
border-color:black;
width:731px;
height:565px;
overflow:hidden;
position:absolute;
z-index:1;
left:50%;
top:0%;
margin-left:-321px;
margin-top:90px;
text-align:center;
visibility:visible;
background-image:url("http://img.photobucket.com/albums/v288/xx_brownsuga_xx/schoollayoutnostalgia1.png");
background-repeat:no-repeat;
background-position:top center;
background-attachment:scroll;}


.nostalgicnavigation {
background-color:transparent;
border:0px solid;
border-color:white;
width:auto;
height: auto;
overflow-x:hidden;
position:absolute; z-index:2;
left:50%;
top:0%;
margin-left:214px;
margin-top:272px;
text-align:justify;
visibility:visible;
}

.nostalgicpics {
background-color:transparent;
border:0px solid;
border-color:white;
width:auto;
height: auto;
overflow-x:hidden;
position:absolute; z-index:3;
left:50%;
top:0%;
margin-left:119px;
margin-top:275px;
text-align:justify;
visibility:visible;
z-index:5;
}

.nostalgicmessage {
background-color:transparent;
border:0px solid;
border-color:white;
width:auto;
height: auto;
overflow-x:hidden;
position:absolute; z-index:2;
left:50%;
top:0%;
margin-left:314px;
margin-top:267px;
text-align:justify;
visibility:visible;
z-index:5;
}

.nostalgicaddme {
background-color:transparent;
border:0px solid;
border-color:white;
width:auto;
height: auto;
overflow-x:hidden;
position:absolute; z-index:2;
left:50%;
top:0%;
margin-left:186px;
margin-top:367px;
text-align:justify;
visibility:visible;
z-index:5;
}
.nostalgiccomment {
background-color:transparent;
border:0px solid;
border-color:pink;
width:auto;
height:auto;
overflow:hidden;
position:absolute; z-index:2;
left:50%;
top:0%;
margin-left:175px;
margin-top:497px;
text-align:justify;
visibility:visible;
z-index:5;
}

.nostalgicaboutme {
background-color: transparent;
border:0px solid;
border-color:black;
width:280px;
height:120px;
overflow:auto;
position:absolute;
z-index:2;
left:50%;
top:0%;
margin-left:120px;
margin-top:128px;
text-align:justify;
visibility:visible
}

</style>


<style>
BODY{
scrollbar-face-color:FFFFFF;
scrollbar-shadow-color:FFFFFF;
scrollbar-highlight-color:FFFFFF;
scrollbar-3dlight-color:FFFFFF;
scrollbar-darkshadow-color:FFFFFF;
scrollbar-track-color:FFFFFF;
scrollbar-arrow-color:FFFFFF;
}
</style>

<div class="nostalgicbg">
<br />
</div>
<div class="nostalgic1">
<br />
</div>

WHO I'D LIKE TO MEET:

CODE

<div class="nostalgicnavigation">
<a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyJk15VG9rZW49OGQ4NTdiMTItMGNhNi00Njg2LWJkNDItMWYxN2MwYWNlNmQw" class="home"></a>
</div>

<div class="nostalgicaddme">
<a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD14eHh4eHh4eHh4" class="add"></a>
</div>

<div class="nostalgicpics">
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=xxxxxxxxxxx" class="pictures"></a>
</div>

<div class="nostalgicmessage">
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD14eHh4eHh4eHh4" class="message"></a>
</div>



<div class="nostalgiccomment">

<form method="post" action="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudHMubXlzcGFjZS5jb20vaW5kZXguY2ZtP2Z1c2VhY3Rpb249dXNlci5Db25m
XJtQ29tbWVudA=="><input name="friendID" value="xxxxxxxxxx" type="hidden" /> <textarea name="f_comments" class="color">Write me love notes! It's not a lot of space, but just enough to leave a good comment, haha</textarea><br /> <input type="submit" value="PUSH" class="button" /></form>

<style>
textarea.color {width:150px; height:94px;font-size:10pt;letter-spacing: 0px; font-family:arial; background-color:transparent;font-weight:normal;;border-color:000000; border-style:solid; border-width:0px; letter-spacing:-1px; color: 000000;background-position:top left; background-repeat:no repeat;}
input.button {width:150px;height:50px;color:818181;font-size:11pt;letter-spacing: 0px;font-family:arial;background-color:transparent; border-color:000000; border-style:solid; border-width:0px; text-transform:none;text-align:center;font-weight:normal;line-height:8px; letter-spacing:0px; text-transform:nonecase;}
</style>
</div>



<div class="nostalgicaboutme">
<h1>talk about yourself here!</h1>
<u>SO</u>, I decided to give another shot at making layouts, now that I have time to waste on <i>spring break</i> and all =). I'll be making more of these <b>nostalgia</b> themed layouts because I feel strongly about our cherished, and usually <s>forgotten</s>, memories of our childhood. This is my first shot at rollovers, so hopefully, I'll get better at them, lol. Please do not remove any credits. <br />
<br />

</div>