[SOLVED] Link problem - using both image and text

[vineld]

I have run into problems formatting links and am wondering how to solve this:

 

<div>
   <a href=""><img src="" /><br />[LINK TEXT]</a>
</div>

 

I have styled links to be underlined and normal when hovered. Now, the above situation results in the image being underlined as well since it is a line within the link. This I do not want.

 

How should I solve this in the best manner so that the images are not underlined? I do not wish to have two separate links since that would not be good SEO-wise.

[noober]

Hmm. Add something to the stylesheet. You're going to want to single out the image element in your css. I would probably start by giving the div an id or class. So the stylesheet info would look like this if you gave the div an id of "blah":

 

 

#blah a img{text-decoration:none;}

 

I'm not fully sure if that would work to be honest. If not:

 

 

#blah a img, #blah a img:hover{text-decoration:none;}

[haku]

That should work fine.

 

But honestly, I don't think that there is any SEO penalty for having a text link as well as an image link (though I'm only an SEO intermediate, not a pro by any means), so I think separate links would be fine.

 

You could also wrap the text inside the link with span tags, and use them for the styling.

[vineld]

No, adding text-decoration:none; on the image does not work since I don't think the underline is for the image itself but for that line of text before the line break. display: block works but I do not wish to use that...

[haku]

So do what I said - put the text in a span. Remove all styling from the <a> tag itself, and style the span instead.

[vineld]

Can't do that either since I want text-decoration: none when hovering both image and text  :-\

[haku]

How does that preclude doing what I said?

[vineld]

It doesn't, really, although I just can't get this to work:

 

a:hover span
{
text-decoration: none;
color: green;
}

 

I don't wish the text to end up green although this was only for testing. This will make the text green although the underline remains. I have searched the css file and can't find any other rules that would override this one...

 

I have a feeling my brain isn't working well today =)

[haku]

You have to remove the underline from the <a> tag, not from the <span> inside the <a>.

 

a:hover
{
   text-decoration:none;
}

[vineld]

Either this is a misunderstanding or I'm completely lost 

 

What you say is that I should style the text within the link with e.g. a span to make it underlined? Then it will stay underlined no matter if I add a hover on the link tag itself since that will not affect the css added to the span.

[haku]

Explain in detail what you want the normal state, and the rollover states to look like.

[vineld]

The normal state for all general links of the website is underline and none on hover. That is exactly what I want in this case as well. In the normal state the image should not be underlined (it has no borders so that is not the issue) but the link text should be. On hover the image should still not be underlined and neither should the link text.

 

What we have so far:

 

1. Styling the image will do no good.

 

2. Using two separate links + javascript would work but I would like to avoid this if possible.

 

3. Simply putting the link text in a span and add underline on this one will not help since it will not be affected by a change in the surrounding link tag.

 

The two separate links solution is beginning to sound very appealing to me though 

[haku]

CSS:

a, a:hover, a span:hover
{
  text-decoration:none;
}

a span
{
  text-decoration:underline;
}

 

HTML:

<a><img /><span>text</span></a>

 

I believe that should sort you out.

[vineld]

Well, hovering the image will still not affect the text  I don't think adding hover to anything else but a link tag is a good idea either.

[haku]

a, a:hover, a:hover span
{
  text-decoration:none;
}

a span
{
  text-decoration:underline;
}

[vineld]

That worked much better, yes, thanks! I actually had that in my own solution just now but I also switched the tag names.... I should not even be working today, a really bad hangover does wonders