asked on

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

ludofulop

can you paste your forgot_pwd class here ?

walkman69

ASKER

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.

walkman69

ASKER

ok this is very strange.

when i remove: font-size:12px;
it works perfect.. why??

Fero45

paste also your id="box_01"

ludofulop

i think this should help:

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

myderrick

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

nativestudios

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

walkman69

ASKER

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.

ASKER CERTIFIED SOLUTION

walkman69

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial