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>

[Mickey]

You know what? Just resort to your original method. Use bottom left for the background-position attribute instead of working with pixels. The only thing you need to fix is the value of each rollover's height. It's supposed to be half of the rollover image's height. It's how I knew
I needed to start out with 0 and -84. For example, the height of ".pictures" needs to be 87px instead of 74px because its height is 164px.