[WSG] 1px shift on inline list for visited links only

Vaska . WSG Sun, 30 Jan 2005 09:31:41 -0800

I can't quite figure out why my list (site navigation) shifts to the right 1px every time I hover over an item that has a link that I've already visited - in Safari and Firefox on the mac at least. It doesn't effect links that I have not visited.

I've validated both the page and the css and I am using sIFR and YoungPup's sliding menu script (but I'm pretty sure these are not the problem).

This is the page => http://www.vaska.com/a/
This is the css => http://www.vaska.com/a/css/c.css

And below is the css where I'm sure the problem resides. It has something to do with the visited state of things but I'm drawing a blank right now. Any help would be much appreciated, thanks. v

ps: Hover over "menu/options" to get the menu. If you are using IE on the pc the menu when it comes down it might look kind of crazy since I haven't yet applied the background stuff to it...


#navigation {
width: 700px;
margin: 0;
padding: 0;
}

#navigation li {
list-style-type: none;
display: inline;
}

#navigation li a {
text-indent: -3000px;
height: 27px;
padding: 0;
margin: 0;
border: 0;
}

#navigation li a#home {
float: left;
width: 40px;
background: url(../imgs/nav-home.gif) left top no-repeat;
}
#navigation li a#work {
float: left;
width: 35px;
background: url(../imgs/nav-work.gif) left top no-repeat;
}
#navigation li a#svcs {
float: left;
width: 53px;
background: url(../imgs/nav-svcs.gif) left top no-repeat;
}
#navigation li a#jrnl {
float: left;
width: 49px;
background: url(../imgs/nav-jrnl.gif) left top no-repeat;
}
#navigation li a#hello {
float: left;
width: 44px;
background: url(../imgs/nav-hello.gif) left top no-repeat;
}

#navigation li a#en {
float: right;
width: 19px;
background: url(../imgs/lang-en.gif) left top no-repeat;
}
#navigation li a#es {
float: right;
width: 19px;
background: url(../imgs/lang-es.gif) left top no-repeat;
}
#navigation li a#fr {
float: right;
width: 19px;
background: url(../imgs/lang-fr.gif) left top no-repeat;
}

#navigation li a:visited#home,
#navigation li a:visited#work,
#navigation li a:visited#svcs,
#navigation li a:visited#jrnl,
#navigation li a:visited#hello,
#navigation li a:visited#en,
#navigation li a:visited#es,
#navigation li a:visited#fr {
text-decoration: none;
border: 0;
}

#navigation li a:active#home,
#navigation li a:active#work,
#navigation li a:active#svcs,
#navigation li a:active#jrnl,
#navigation li a:active#hello,
#navigation li a:active#en,
#navigation li a:active#es,
#navigation li a:active#fr {
text-decoration: none;
border: 0;
}

#navigation li a:hover#home,
#navigation li a:hover#work,
#navigation li a:hover#svcs,
#navigation li a:hover#jrnl,
#navigation li a:hover#hello,
#navigation li a:hover#en,
#navigation li a:hover#es,
#navigation li a:hover#fr {
background-position: 0 -27px;
}

#navigation li.active a#home,
#navigation li.active a#work,
#navigation li.active a#svcs,
#navigation li.active a#jrnl,
#navigation li.active a#hello {
background-position: 0 -27px;
}

******************************************************
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************

[WSG] 1px shift on inline list for visited links only

Reply via email to