alicia1234
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.
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.
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.
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.
ASKER
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.
#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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks!
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
}