Link to home
Start Free TrialLog in
Avatar of alicia1234
alicia1234Flag for United States of America

asked on

Why do hovered links have underlines in IE but not in FireFox?

www.salon455.com/services.html

Look at the top navigation bar. In FireFox, move the cursor over one of the items and see it changes color and becomes underlined. Now look in IE7. It changes color but does not become underlined. Why?

Note: this may be a visited link issue in IE but I can't figure out where I'm going wrong.

Thanks.
Avatar of VirusMinus
VirusMinus
Flag of Australia image

on line 23 in your global.css file you have:

text-decoration:none for all links.

on line 39...

Add:

text-decoration:underline

so your CSS looks like this:

#navmain ul li a {
color:#333333;
padding:0.2em 2em;
text-decoration:underline
}
Avatar of alicia1234

ASKER

That doesn't do it and it's also not what I want to do.

NOTE: I added the text-decoration in as you said. The links are all underlined now in FF BUT ... in IE they are not! So something's going on somewhere else.

AND ... even in FF, this is not the behavior I want. I want the links to NOT be underlined UNTIL the cursor moves over them.

I originally had text-decoration=underline in the a: hover style, like this:

#navmain ul li a:hover { color: #CCCC99; text-decoration: underline; }

but I still get the same thing: underlined for hover in FF, but not in IE.

So I'm still thinking it's a visited link issue?

NOTE: I undid the change you recommended because I wanted my original problem in tact.
Thanks.
I figured it out.  The problem was in this:
    #navmain {    height:32px; position:relative; text-align: center;}

I removed the height.

Then in this line:
       div#navmain ul li a:hover {color: #CCCC99;  }

I added "text-decoration: underline;" back in.
I figured this out by comparing the navmain styles to my footer styles. Links were working correctly in the footer.

If you can explain why the "height: 32px;" caused the problem, I'll give you the points. 32px was plenty of room to "fit" the underline.


Avatar of ritetek
ritetek

I am by no means an IE CSS expert, however I was playing around with your code and added a line-height to the #navmain ul li a element and was able to see the underline.  I'm not 100% sure what the issue is (looks like it might be an issue with your heights on your elements in the navmain div) but it seemed to fix it.  Now, whether or not you can make your page work with a line-height is up to you I guess; but I figured I'd let you know anyway!
ASKER CERTIFIED SOLUTION
Avatar of ritetek
ritetek

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks!