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

Create Account

HTML

Questions

Followers

Top Experts

walkman69

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

Zero AI Policy

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.

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??

EARN REWARDS FOR ASKING, ANSWERING, AND MORE.

Earn free swag for participating on the platform.

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

Get a FREE t-shirt when you ask your first question.

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.

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

ASKER

membership

Signing up is free and takes 30 seconds. No credit card required.

Create Account

HTML

Questions

Followers

Top Experts

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.