Page 1 of 2
Image in a link without underline
Posted: Sat Jun 30, 2007 3:50 pm
by superdezign
So let's say I've got this:
Code: Select all
<a href="domain.tld/">Anchor text<img src="foo.gif" /></a>
Is it possible to stop the underline of the link before the image, still keeping the image a part of that anchor?
I've tried "a img{text-decoration:none;}" without results, so now I'm thinking it may not be possible.
Posted: Sat Jun 30, 2007 4:05 pm
by Gente
Just
Don't understand why did you add img there.
Posted: Sat Jun 30, 2007 4:08 pm
by superdezign
I'm not trying to remove the underline from the entire anchor, though. Just from the image at the end of the anchor. So, basically this can't be done through regular CSS... I'll have to get creative.
Edit: The only way to do it would be:
Code: Select all
a { position: relative; margin-left: 16px; }
a img { position: absolute; right: -16px; }
And that's only if the link is on the same line. I guess I'll just have to live with keeping the underline.
Posted: Sat Jun 30, 2007 4:09 pm
by Gente
superdezign wrote:I'm not trying to remove the underline from the entire anchor, though. Just from the image at the end of the anchor. So, basically this can't be done through regular CSS... I'll have to get creative.

You mean border of the image?
Maybe this is you looking for
Edit: Absolutely confused after your additional comment
Code: Select all
a { position: relative; margin-left: 16px; }
a img { position: absolute; right: -16px; }
And that's only if the link is on the same line. I guess I'll just have to live with keeping the underline.
This part of CSS looks very unjustified. And the result isn't the same in different browsers.
Posted: Tue Jul 03, 2007 10:46 am
by pickle
Code: Select all
a{
text-decoration:none;
}
a #underlined{
text-decoration:underlined;
}
Code: Select all
<a href="domain.tld/"><span class = "underlined">Anchor text</span><img src="foo.gif" /></a>
Posted: Tue Jul 03, 2007 3:15 pm
by feyd
.underlined, not #underlined

Posted: Tue Jul 03, 2007 3:19 pm
by pickle
D'oh! - ya.
Posted: Tue Jul 03, 2007 3:51 pm
by superdezign
pickle wrote:Code: Select all
a{
text-decoration:none;
}
a #underlined{
text-decoration:underlined;
}
Code: Select all
<a href="domain.tld/"><span class = "underlined">Anchor text</span><img src="foo.gif" /></a>

I was all messing the image... Forgot all about the text. Awesome.

Posted: Tue Jul 03, 2007 4:13 pm
by feyd
Does the following not work?
Code: Select all
a{
text-decoration:underlined;
}
a img{
text-decoration:none;
}
Posted: Tue Jul 03, 2007 4:46 pm
by superdezign
feyd wrote:Does the following not work?
Code: Select all
a{
text-decoration:underlined;
}
a img{
text-decoration:none;
}
superdezign wrote:I've tried "a img{text-decoration:none;}" without results, so now I'm thinking it may not be possible.
Posted: Tue Jul 03, 2007 4:49 pm
by pickle
Don't think that would work. Strictly speaking, the image itself never has an underline - just the link. The underline is not applied to the image inside the link, it is applied to the parent element of the image - the <a></a> tag itself.
Posted: Tue Jul 03, 2007 4:54 pm
by Gente
pickle wrote:Don't think that would work. Strictly speaking, the image itself never has an underline - just the link. The underline is not applied to the image inside the link, it is applied to the parent element of the image - the <a></a> tag itself.
I have never seen the underlined image too. So I was a little confused when I read about this and thought we are talking about the border. So if somebody show me the example it would new experience for me

Posted: Tue Jul 03, 2007 5:01 pm
by superdezign
Volectricity Blog: New Feature
All of the links that link to a website with a favicon.ico file have one.
Posted: Tue Jul 03, 2007 5:46 pm
by Gente
Cool. Never met this situation. Now the problem is clear. Try to add
To the style of of your image.
Posted: Tue Jul 03, 2007 6:03 pm
by superdezign
Gente wrote:
Cool. Never met this situation. Now the problem is clear. Try to add
To the style of of your image.
That would "hide" the underline, in a sense. Except that the images are PNG files with transparency, so any icons with transparency aren't complete covering the underline. Interesting suggestion though.
I'd go with pickle's if it wasn't for the extra necessary mark-up. But having an extra span on every link seems like a little much just because of an underline.