Question

Is it possible to have a contiguous link, where the text is normally underlined on mouse hover, but in the middle have a section (eg an image) without this underline? This does not work:

<a href="#">one <span style="text-decoration:none;">two</span> <img src="img.png" style="border:0px; text-decoration:none;"> three</a>

Answer 1

What I really wanted was to have an image “attached” to links, without it getting underlined on hover. Here is a solution I came up with:

<a href="#" style="background:url('pic.png') no-repeat; background-position: left center; padding-left: 20px;">Link</a>

• padding-left is for offsetting the text so it does not overlap the
  image.
• With background-position you
  can move the image to make it better
  aligned with the text.
• If the image
  is higher than the text padding-top
  and padding-bottom can be used to
  tweak the appearance.

This technique can also be used with CSS sprites like this:

<a href="#" style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;">Link</a>

I used a similar technique to use CSS sprites instead of ordinary inline images:

<span style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;"></span>

Hope this helps someone