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>

[Maccabee]

Make sure your images have text in the same place!
Open it in your picture viewer side by side and quickly hit the rght button. If the text jumps odds are the text isnt the in the same place in the two images.