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.

[Mickey]

Try controlling how much they go up or down by using pixels for the background-position property, like this:

CODE

.home:hover{
background-position: 0 -84px;}

The 0 is for the left margin, while the -84 is for the top. Just play around with the values according to your liking.

[Teesa]

^oh, thanks Mike!

question though: how did you know to use those values (0, -84) to start? i tried slightly adjusting the values pixel by pixel for the other links, but the rollover pictures just disappear =(

[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.

[Teesa]

^you're a lifesaver thanks so much!

this can be closed.

[manny-the-dino]

Topic Closed & Moved