PDA

Click to See Complete Forum and Search --> : Pixel movement

JacktheKipper
02-21-2006, 08:13 AM
Can anyone tell me why my example links are moving by just a pixel when the mouse hovers over them?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style>
#nav {position:absolute; font-family:arial; font-size:14px; left:10px; top:110px;}
a:link {position:absolute; text-decoration:none; color:blue;border-style:none;border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px;}
a:visited {position:absolute; text-decoration:none; color:green;border-style:none;border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px;}
a:hover {position:absolute; text-decoration:none; color:red; border-style:solid;border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px;}
</style>

</head>
<body>

<div id="nav">
<a href="one.htm">ONE</a><br />
<a href="two.htm">TWO</a><br />
<a href="three.htm">THREE</a><br />
<a href="four.htm">FOUR</a>
</div>
</body>
</html>


......and how I can get rid of it. I can reduce the font, but I don't want to.

Many thanks.
Jack.
ProWeb
02-21-2006, 08:28 AM
Its the box thats round the link text on hover. Because the box appears it has to move the text over by 1 pixel to stop the border meeting the text.

i think
The Little Guy
02-21-2006, 09:17 AM
Try this:
a:link {
text-decoration:none;
color:blue;
border-style:none;
border:solid 1px #000000;
}
a:visited {
text-decoration:none;
color:green;
border-style:none;
border:solid 1px #000000;
}
a:hover {
text-decoration:none;
color:red;
border-style:solid;
border:solid 1px #000000;}
JacktheKipper
02-21-2006, 10:10 AM
Thanks for your help, but that just seems to put a box around each one !
The Little Guy
02-21-2006, 10:55 AM
what about this then:
a:link {
text-decoration:none;
color:blue;
}
a:visited {
text-decoration:none;
color:green;
}
a:hover {
text-decoration:none;
color:red;
}