CSS Don't Underline Image

[MorfiusX]

I have the following code:

<a href="(irrelevant)">
<img height="16" width="16" id="avatarsmall" src="(irrelevant)" />
 (Person's Name)</a>

For my CSS, I have:

a {
color:#EEEEEE;
font-weight:bold;
margin:0 10px;
text-decoration:none;
}
#avatarsmall {
border:1px solid #999999;
padding:1px;
position:relative;
top:-1px;
vertical-align:middle;
}

Basically I am trying to do some like Digg's My Profile link at the top of the page. When you hover over the link on my page, both the image and the text are underlined. On Digg's site, just the text is underlined. I've looked through the code on Digg, but I can't seem to get this working properly. I want both image and the text as part of the same link object so that hovering either will cause an underline to occur, but only underline the text. Help!

TIA

 

[ameoba]

You want a rule that targets images inside of a link that removes their decorations.

 

[tim_m]

if you're overriding the default for a (non hovered) link to not have an underline, you should explicitly define a:hover as well otherwise browsers are free to do whatever their default is. what ameoba is saying is do
a:hover img { text-decoration: none; }
i believe

 

[Dyslexic_Dog]

img{border:none;}

 

[MorfiusX]

img{border:none;}

The border doesn't have anything to do with the underline on hover. In FF, IE7, IE6, an additional underline that appears below the image border.

 

[pat1006]

a img {
border: 0;
}

 

[MorfiusX]

a img {
border: 0;
}

Still, no. Go to Digg, they have this working just fine. Border does not equal underline.

 

[pat1006]

Try this:
a:link,visited,hover,active {text-decoration:none;}

 

[MorfiusX]

Try this:
a:link,visited,hover,active {text-decoration:none;}

Digging (no pun intended) through the Digg CSS, this is what they are doing. When I do this, both the image and the text don't have the underline on hover. I think I just might created two links, one for the image, and one for the text, and style them separately. It's just annoying not being able to figure out how they did it.

 

[pat1006]

if you just want images you could (I think, sorry it has been a long day)
a img:link,visited,hover,active {text-decoration:none;}

 

[MorfiusX]

I figured it out, finally!

The parent container needs to have:

#parent-div {position:relative}

And the image needs to have:

#link-img {position:absolute;left:-13px}

All the other styling is arbitrary.

The CSS for the image needs to have absolute positioning. This removes the underline on hover. The parent container needs to have relative positioning so that when you apply a left/top/etc, it doesn't apply this based on the window.

 

[FireStormGS]

I would have thought something like what pat1006 said would work where you say img within a has no text decoration

a img:link,visited,hover,active {text-decoration:none;}

 

[MorfiusX]

I had already tried that, but I tried again and every other possible combination mentioned just to be sure. I wasn't looking at the parent container attributes in Firebug when looking at the code on Digg.

Here is the HTML on Digg:

<a id="section-profile" href="/users/morfiusx"><img height="16" width="16" alt="morfiusx" src="/users/MorfiusX/s.png"/> My Profile</a>

Here is the parent container CSS:

.side-header {
float:right;
margin:0;
min-height:33px;
padding:0 175px 0 10px;
position:relative;
}

And here is the CSS of the link:

.side-header a {
display:block;
float:left;
line-height:1;
margin:11px 0;
padding:5px 10px 4px;
word-spacing:-0.1em;
}

And finally the image:

.side-header img {
border:1px solid #A2C1DE;
left:-6px;
padding:1px;
position:absolute;
top:12px;
vertical-align:middle;
}

After sorting through all that, my above post are the items that affect the appearance we are talking about. Basically, in FF, IE7, and IE8, the IMG is going to inherit some of the styling of the parent A unless you give it "position:absolute;". It seems to me that the suggestions above should work, but in testing they do not.

 

[Dyslexic_Dog]

Can you post the site where you were having the problem. I've built a lot of websites in my day and never had a problem like that...

 

[MorfiusX]

Can you post the site where you were having the problem. I've built a lot of websites in my day and never had a problem like that...

It's fixed now, but the address is http://DaytonSoftball.net. Is a small avatar that is displayed at the top of the page after a user logs in.