why doesn't text-decoration:underline work in internet explorer release candidate 1?

internet explorer release candidate 1 deosn't show underlined links.. declared with CSS:

div#box_01 a:hover    
{
    text-decoration:underline;
    color: #333;
}

the color change works, but not the underline, anyone have a solution to that?
Here is the html:
 
<div id="box_01">
                                                                               
<a class="forgot_pwd" href="javascript:request_password()">Forgot password</a>
 
</div>

Open in new window

LVL 2
walkman69Asked:
Who is Participating?
 
walkman69Connect With a Mentor Author Commented:
And since em doesn't seem to be a valid height-measure when handling line-height:
I only need to set line-height to 1.1 to make it work with larger fonts.

Thanx anyway guys =)
0
 
ludofulopCommented:
can you paste your forgot_pwd class here ?
0
 
walkman69Author Commented:
div#box_01 a.forgot_pwd
{
    text-decoration:none;
    font-family:verdana,sans-serif;    
    font-size:18px;
    font-style:normal;
    font-weight:300;    
    white-space:nowrap;
    color:#FFF;    
    position:absolute;
    left:38px;
    top:243px;
}

i tried setting text-decoration: none; but it didn't help..
However it did help to remove the class from the <a> so it must have something
to do with that class.
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
walkman69Author Commented:
ok this is very strange.

when i remove: font-size:12px;
it works perfect.. why??
0
 
Fero45Commented:
paste also your id="box_01"
0
 
ludofulopCommented:
i think this should help:

div#box_01 a:hover,    
div#box_01 a.forgot_pwd:hover    
{
    text-decoration:underline;
    color: #333;
}
0
 
myderrickCommented:
This works for me in IE8 RC1

MD
div#box_01 a:hover    
{
    text-decoration:underline;
    color: #333;
}
 
div#box_01 a    
{
    text-decoration:none;
    color: #333;
}
 
 
 
<div id="box_01">
                                                                               
<a class="forgot_pwd" href="javascript:request_password()">Forgot password</a>
 
</div>

Open in new window

0
 
nativestudiosCommented:
As myderrick pointed out, you need to create a CSS rule for the link in its normal state (see code below).

This works as intended in IE6+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div#box_01 a.forgot_pwd {
	text-decoration:none;
    font-family:verdana,sans-serif;    
    font-size:18px;
    font-style:normal;
    font-weight:300;    
    white-space:nowrap;
    color:#333;    
    position:absolute;
    left:38px;
    top:243px;
}
div#box_01 a:active, div#box_01 a:visited, div#box_01 a:link {
     text-decoration: none;
}
div#box_01 a:hover,    
div#box_01 a.forgot_pwd:hover    
{
    text-decoration:underline;
    color: #333;
}
 
</style>
</head>
 
<body>
<div id="box_01">
                                                                               
<a class="forgot_pwd" href="javascript:request_password()">Forgot password</a>
 
</div>
</body>
</html>

Open in new window

0
 
walkman69Author Commented:
It didn't help, however i think i found the solution to my problem, something i was unaware of.
Earlier in my body declaration in css i'm setting line-height:1em;

It worked when i had font-size: 1em; but not when i had higher values.

Then i tried changing line-height to 1.3em; and font-size to the same and then it worked.

So it must have to do with the underline being outside the line-height.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.