PDA

View Full Version : text-decoration on logo problem


xrayhit
01-15-2010, 12:41 AM
I'm getting an underline when hovering over my logo in IE 8 but not in Firefox. I don't want the underline. I'm using this code...

a img {
border:none;
text-decoration:none;
}Here is my a:link css...

a:link
{
background:transparent;
color:#000000;
text-decoration:underline;
}
a:visited
{
background:transparent;
color:#FF0000;
text-decoration:none;
}
a:hover
{
background-color:#CCCCCC;
color:#FF0000;
text-decoration:underline;
}
a:active
{
color:#999999;
text-decoration:none;
}Anyone have a fix?

http://frequentads.com

Corrosive
01-15-2010, 06:24 AM
That's odd. The code you have used is what I would have suggested. Maybe IE8 is just retarded!

tux
01-15-2010, 08:10 AM
No underline for me in IE8 nor Firefox.

But I do get the underline in Opera10

DWcourse
01-15-2010, 03:57 PM
I see it in Chrome as well. I believe this rule:

a img {
border:none;
text-decoration:none;
}

applies to the image, not the link. So I think the problem might be this rule (which underlines all links):

a:hover
{
background-color:#CCCCCC;
color:#FF0000;
text-decoration:underline;
}

Maybe add a style rule

a.logo:hover
{
text-decoration:none;
}

And then apply the .logo class to the logo link (the a tag not the img)???

xrayhit
01-15-2010, 05:32 PM
Thanks, I added

a.logo:hover
{
text-decoration:none;
}

but I'm not sure how to do "And then apply the .logo class to the logo link (the a tag not the img)???"

DWcourse
01-15-2010, 05:50 PM
<a href="link.html" class="logo">

xrayhit
01-15-2010, 09:01 PM
That doesn't seem to work.

<a href="http://frequentads.com" class="logo"><img src="images/logo.jpg" alt="Frequent Ads" width="412" height="190" /></a>

I was thinking an IECC would help since it seems to be an IE problem? But I guess it helps to know what is wrong first before that would work?

edit: I forgot that chrome and opera has the same problem so nevermind.

domedia
01-16-2010, 08:32 PM
Images do not get any kind of text-decoration when they are links, just a border.

xrayhit
01-16-2010, 09:05 PM
Images do not get any kind of text-decoration when they are links, just a border.

I tried specifying the image dimensions to the div tag that the image is in. That stopped the page from shifting down when you hover over the image, but the line still appears.

xrayhit
01-28-2010, 11:18 PM
The answer is...

#header-bar-logo a {background: transparent;}From wolfcry911 at the CSS Creator Forum (http://csscreator.com/topic/ahover-affecting-logo-image#comment-159045).