We help IT Professionals succeed at work.

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

walkman69
walkman69 asked
on
Medium Priority
2,322 Views
Last Modified: 2013-12-08
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

Comment
Watch Question

can you paste your forgot_pwd class here ?

Author

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.

Author

Commented:
ok this is very strange.

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

Commented:
paste also your id="box_01"
i think this should help:

div#box_01 a:hover,    
div#box_01 a.forgot_pwd:hover    
{
    text-decoration:underline;
    color: #333;
}
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

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

Author

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.
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 =)

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.