Image in a link without underline

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Image in a link without underline

Post 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.
User avatar
Gente
Forum Contributor
Posts: 252
Joined: Wed Jun 13, 2007 9:43 am
Location: Ukraine, Kharkov
Contact:

Post by Gente »

Just

Code: Select all

a {text-decoration:none;}
Don't understand why did you add img there.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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. :P

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.
Last edited by superdezign on Sat Jun 30, 2007 4:13 pm, edited 1 time in total.
User avatar
Gente
Forum Contributor
Posts: 252
Joined: Wed Jun 13, 2007 9:43 am
Location: Ukraine, Kharkov
Contact:

Post 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. :P
You mean border of the image?
Maybe this is you looking for

Code: Select all

a img {border:none;}
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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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>
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

.underlined, not #underlined ;)
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

D'oh! - ya.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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>
8O I was all messing the image... Forgot all about the text. Awesome. :D
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Does the following not work?

Code: Select all

a{
   text-decoration:underlined;
}
a img{
   text-decoration:none;
}
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Gente
Forum Contributor
Posts: 252
Joined: Wed Jun 13, 2007 9:43 am
Location: Ukraine, Kharkov
Contact:

Post 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 :)
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Volectricity Blog: New Feature
All of the links that link to a website with a favicon.ico file have one.
User avatar
Gente
Forum Contributor
Posts: 252
Joined: Wed Jun 13, 2007 9:43 am
Location: Ukraine, Kharkov
Contact:

Post by Gente »

superdezign wrote:Volectricity Blog: New Feature
All of the links that link to a website with a favicon.ico file have one.
Cool. Never met this situation. Now the problem is clear. Try to add

Code: Select all

vertical-align: middle;
To the style of of your image.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Gente wrote:
superdezign wrote:Volectricity Blog: New Feature
All of the links that link to a website with a favicon.ico file have one.
Cool. Never met this situation. Now the problem is clear. Try to add

Code: Select all

vertical-align: middle;
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.
Post Reply