IE6 - border transparent for links

[jak]

Hello,

I have the following situation on a site I made (I am not a professional web developer/designer):

Links in my menu use the following CSS code:
a.link:link{color:#ffffff;text-decoration: none;font: 13px/12px copperplate gothic light, verdana; font-weight: bold; border: 1px solid transparent;padding:5px;}
a.link:visited{color:#ffffff;text-decoration: none;font: 13px/12px copperplate gothic light, verdana; font-weight: bold;border: 1px solid transparent;padding:5px;}
a.link:active{color:#ffffff;text-decoration: none;font: 13px/12px copperplate gothic light, verdana; font-weight: bold;border: 1px solid transparent;padding:5px;}
a.link:hover{color:#000040;text-decoration: none;font: 13px/12px copperplate gothic light, verdana;font-weight: bold; border: 1px solid #000000; padding:5px;background-color: #ffffff; }

Basicly the links appear as normal text, but on hover the links have a border (and the colors change).

The problem only appreas in IE6 which does not know the transparent property. For IE7/8 and Firefox everything is just fine (I haven't tested on Opera or Safari).

Can anyone help me with a solution for displaying the links as it should also in IE6 ?

Thanks!

[Excavatorak]

Hello jak,
When styling pseudo-classes (http://www.w3schools.com/CSS/css_pseudo_classes.asp) they should always be ordered link/visited/hover/active. A good way to remember that is LoVeHA.

In the snippet below I've grouped your CSS so you don't repeat things that can be cascaded (that's the whole point of CSS, right?). I've also replaced the transparent border with a margin.
:active is now styled the same as :hover so the button doesn't blink when you click on it. You may want it that way or not...


a.link:link,
a.link:visited {
color:#fff;
text-decoration: none;
font: 13px/12px copperplate gothic light, verdana;
font-weight: bold;
margin: 1px;
padding:5px;
}
a.link:hover,
a.link:active {
margin: 0;
color:#000040;
text-decoration: none;
font: 13px/12px copperplate gothic light, verdana;
font-weight: bold;
border: 1px solid #000;
padding:5px;
background: #fff;
}