/    Sign up×
Community /Pin to ProfileBookmark

IE6 – border transparent for links

Copy linkTweet thisAlerts:
Mar 04.2010

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:

[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; }[/CODE]

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!

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@ExcavatorakMar 04.2010 — Hello jak,

When styling pseudo-classes 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...

[CODE]
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;
}[/CODE]
×

Success!

Help @jak spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...