?
Solved

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

Posted on 2009-02-11
9
Medium Priority
?
1,588 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

0
Comment
Question by:walkman69
9 Comments
 
LVL 15

Expert Comment

by:ludofulop
ID: 23610180
can you paste your forgot_pwd class here ?
0
 
LVL 2

Author Comment

by:walkman69
ID: 23610327
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
 
LVL 2

Author Comment

by:walkman69
ID: 23610498
ok this is very strange.

when i remove: font-size:12px;
it works perfect.. why??
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 6

Expert Comment

by:Fero45
ID: 23610856
paste also your id="box_01"
0
 
LVL 15

Expert Comment

by:ludofulop
ID: 23610875
i think this should help:

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

Expert Comment

by:myderrick
ID: 23611034
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
 
LVL 2

Expert Comment

by:nativestudios
ID: 23611334
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
 
LVL 2

Author Comment

by:walkman69
ID: 23611391
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
 
LVL 2

Accepted Solution

by:
walkman69 earned 0 total points
ID: 23611526
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question