OMG SUPRISE! IE mucks up on link styles.

Forum Moderators: not2easy

Message Too Old, No Replies

OMG SUPRISE! IE mucks up on link styles.

Elliott Hird

10:27 pm on Feb 28, 2006 (gmt 0)

Here's the (temporary) code I'm using:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
html {
font-family:arial;
font-size:62.5%;
}
body{
font-size:1.3em;
}
a{
color:#0000FF;
text-decoration:none;
}
a:hover{
background:#EEEEEE;
color:#000000;
border-bottom:0.1em solid #CCCCCC;
}
</style>
</head>
<body>
our CMS (in-house; <a href="//example.com">contact us</a> for information)
</body>
</html>

It works fine in every browser I've tested, but whoop-de-do, IE doesn't render the border-bottom on a:hover. Help would be appreciated.

(Woo, first post :)!)

Elliott Hird

10:28 pm on Feb 28, 2006 (gmt 0)

Whoops! Sorry for double posting, but I messed that post up a bit. Is there an edit function on BestBBS?

Fotiman

10:41 pm on Feb 28, 2006 (gmt 0)

Instead of border:

text-decoration: underline;

Fotiman

10:45 pm on Feb 28, 2006 (gmt 0)

Alternatively, increase you line height. The border is there, you just can't see it because the line-height is not large enough. For example:

body{
font-size:1.3em;
line-height: 1.4em;
}

Elliott Hird

10:46 pm on Feb 28, 2006 (gmt 0)

1: No, I want the border to be a different colour to the text.
2: Strange. I added padding-bottom but that didn't work, so would this?

Fotiman

10:52 pm on Feb 28, 2006 (gmt 0)

1: No, I want the border to be a different colour to the text.

See my second post then.

2: Strange. I added padding-bottom but that didn't work, so would this?

You would think adding padding would work. But with IE, anything goes. As long as your line-height is bigger than your font size, then yes, you should see the bottom border on the <a>.

Elliott Hird

9:51 am on Mar 1, 2006 (gmt 0)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
html {
font-family:arial;
font-size:62.5%;
}
body{
font-size:1.3em;
}
a{
color:#0000FF;
text-decoration:none;
}
a:hover{
background:#EEEEEE;
color:#000000;
border-bottom:0.1em solid #CCCCCC;
}
*{
line-height:1.1em;
}
</style>
</head>
<body>
our CMS (in-house; <a href="//example.com">contact us</a> for information)
</body>
</html>

Nothing changes :-(.

Elliott Hird

9:53 am on Mar 1, 2006 (gmt 0)

Ah, no, I just had to use 1.4em.