In CSS, how do you remove the bottom border of a linked image?

May 3, 2004 6:36 AM

Minor CSS trouble; how do you remove the bottom border of a linked image? [more inside]

Hello there everyone,

the hyperlinks in my stylesheet are defined as follows:

a:link,a:visited,a:active{
color: #9E3406;
text-decoration: none;
border-bottom: #9E3406;
border-width: 0px 0px 1px 0px;
border-style: none none solid none;
}

Problem is, if I link an image (<a href="..."><img src="..."></a>), the image will have a bottom border too. So I add the following in my stylesheet:

a img{
border-bottom: 0px solid #FFFFFF;
}

Now, the bottom border disappears in Internet Explorer, but is still there for Firefox and Opera 7...

How do I make the bottom border disappear in my linked image? Thanks everyone for your help in advance!

posted by kchristidis to Computers & Internet (18 answers total)

It's not XHTML purity but can you just add border="0" to the img?
posted by ao4047 at 6:45 AM on May 3, 2004

i just define a second link - like a.pic - and don't add bottom border into the equation. similarly (for mixed text/image links) why not just do "a img { border: none; }" ? i think as-is you're defining that it still must have a border, but you're hiding it by making the border background color?

out of curiosity if you only define border-bottom, do you need to define widths for the other three nonexistent borders? if i add padding-left or some such i needn't tell the browser what padding-top, -right, or -bottom is.... it'll default to the standard if not defined. standard for border ought to be none.

and... to ask the obvious... why go through all this trouble to get an underlined link, when the underline is the default to begin with? kill "text-decoration: none" and you'll get underlined link-but-not-image. right?
posted by caution live frogs at 7:13 AM on May 3, 2004

Try making the bottom style:

a img, a:link img {border-bottom: 0px solid #FFFFFF;
}

or

img { border:0px;}
posted by gramcracker at 7:19 AM on May 3, 2004

Response by poster: a0407, I'm not talking about the image's borders; it's a bottom border introduced by the fact that the image is a link.

caution live frogs, "border: none;" doesn't work; I'd already tried that. (As to your other two questions, the answer is the same; for the specific case we're talking about, you're right, the three non-existent borders needn't be defined, and for the current link style I'm using I could as well go with a simple underline. But my stylesheet doesn't end here, it's much bigger and introduces elements and link styles with more than a bottom-border, so that code is useful to ensure uniformity of some kind.)

gramcracker, none of your suggestions work unfortunately :(
posted by kchristidis at 7:30 AM on May 3, 2004

You are trying to force an underline on text links, yes? And insure that a linked image does not have a bottom border? Then replace this:

a:link,a:visited,a:active{
color: #9E3406;
text-decoration: none;
border-bottom: #9E3406;
border-width: 0px 0px 1px 0px;
border-style: none none solid none;
}

with this:

a:link,a:visited,a:active{
color: #9E3406;
text-decoration: underline;
}

and remove references to border in your img.
posted by sageleaf at 7:48 AM on May 3, 2004

gramcracker's suggestion seems like the right selector: "a img".

if it's not working, you may have to try every pseudo combo: a img:link, a img:visited, etc.

IMO, you really ought to rethink your solution to the problem: removing the text-decoration on links and then trying to add the bottom border back in again seems very bass-ackward. (apologies if that's not what you wanna hear, but you asked.)
posted by danOstuporStar at 7:49 AM on May 3, 2004

Or rather, to overcome browser default, use
img{
border: 0px;
}
posted by sageleaf at 7:52 AM on May 3, 2004

well, although your current approach works in IE i'm wondering what about it isn't right. in my experience if it doesn't work in mozilla it isn't going to be compliant with some rule or other. you might try running it through the w3c css validator to see if it can tell you what part of this mozilla doesn't like.

anyway this might help you some: if i do this

a img {
border-bottom: #FFFFFF;
border-width: 0px 0px 3px 0px;
border-style: none none solid none;
margin-bottom: -4px;
}

mozilla properly displays the image, inline, with no underline. white border on image + negative margin = white collapses over link border, hiding it.

unfortunately this doesn't work in IE. in standards mode (doctype as html 4.01, or xhtml 1.1 transitional or strict) IE displays no border at all under image or link. displaying image inline doesn't help. IE interprets the link border as superceding the image border - so increasing the negative margin just bumps the link "underline" lower.

i still think sageleaf is on the right track though. use the default underline behavior to your advantage. his suggestion works fine for me in IE6 and moz 1.6... you'll go crazy trying to make something work well in both browsers, especially if you're trying to re-create an effect that already works. i'd say look at the number of times that having a border rather than an underline is needed, and define a separate link class for those instances.

ps if you do end up with fully bordered links later in the stylesheet, inline, adding a background-color border that changes color on mouseover will stop the text from "sliding" back and forth on mouse.

(can be irritating, especially in cases i've seen in the wild where text size chages as well - the link can become unclickable, as it slides out from under the mouse when you point at it...)
posted by caution live frogs at 8:04 AM on May 3, 2004

a img {border: none;}
posted by yerfatma at 8:27 AM on May 3, 2004

You should also make sure that the cascade is correct - do you have the a img {...} bit after the a.blah {...} bit?
posted by rhapsodie at 11:58 AM on May 3, 2004

Response by poster: Sageleaf and yerfatma, thank you for those suggestions, but I believe I mention in this post that they don't work (they were suggested by two fellow MeFites earlier).

Sageleaf and dan, I explain why I don't want to go with "text-decoration: underline;" in the post (I know dan has read it, but sageleaf maybe hasn't). Now, Dan, I know this isn't the cleverest thing in the world, but if my current reasoning (once again, explained here) doesn't make much sense (which may be the case, sure), then, to help things a bit, I'll re-phrase my question;

I'm trying to find out why this doesn't work. Let's forget for a moment that "border-bottom: 1px" instead of a mere "text-decoration: underline;" is rather awkward. Or let's assume that I also have a top border, or side-borders declared in my link style. Now, I'm trying to find out why "a img {border-bottom: 0px solid #FFFFFF;}" or "a img, a:link img {border-bottom: 0px solid #FFFFFF;}" or "a img {border: none;}" or "img {border: 0px;}" or "img {border: 0px;}" don't remove the border. That's what I'm asking (and I hope it all became clear now.)

By the way, Dan (regarding the "every pseudo class" suggestion); I tried both "a img,a img:link,a img:visited,a img:active {border: none;}" and "a img,a img:link,a img:visited,a img:active {border-bottom: 0px solid #FFFFFF;}", nothing works.

Also, caution live frogs I had already checked the stylesheet and it validates, and rapsodie, yes, it is after the "a:link,a:visited,a:active" part.
posted by kchristidis at 12:35 PM on May 3, 2004

Best answer: I would think it's because you defined the border on your anchor element, and you're trying to remove it from the image. a img selects an image inside of an anchor, not an anchor containing an image.
posted by Khalad at 1:10 PM on May 3, 2004

Can you provide a live example? Sometimes when you're close to the problem, it's hard to describe it fairly. I ask because I can assure you "a img {border: none;}" woks in modern versions of IE/NS/Opera/Safari . . . (it does crash NS4.x if you care).

If it's not working for you, you may have inheritance problems. You can find that out quickly by adding this as the last line of your stylesheet:

a img {border: none !important;}

I don't know if "border: 0px" validates or not, but I'm fairly certain no browser respects it (there are some weird bugs we run into with CSS that disappear if you add a border to the element, so we've tried any number of variations on an invisible, width-less border).

On preview: on the other hand, maybe Khalad understood what you were saying where I could not. If the border is on the [a] tag and not the image, that would be why variations on the a img theme aren't working.
posted by yerfatma at 2:11 PM on May 3, 2004

here is (my understanding of) kchristidis' code. i thought he was crazy, but he's right "a img" does not kill the border (checked IE6 on win2000 and firefox0.8 on suse9).
posted by danOstuporStar at 2:16 PM on May 3, 2004

This deserves more playing around with to find a workaround, but Khalad is dead on. There is no problem with the CSS or the implementation. The image, as specified, does not have any border. The anchor has the border, and as far as I know, there's no way to have reverse inheritance.

I feel like you are going about this backward, and am kind of curious why the method has to be so loopy.
posted by rafter at 2:49 PM on May 3, 2004

Response by poster: Dan, your understanding of my code is 100% correct - see what I'm talking about now? ;)

Yerfatma, first of all thank you for taking the time to describe some of your related experience in detail; each piece of information I can get about browser compatibility, etc. is valuable. I was gonna try the "!important" thing, but I see in Dan's code that he has already tried it, and it didn't work.

I'm starting to think that Khalad has indeed hit the nail on the head with his comment. It can't be solved because "a img selects an image inside of an anchor, not an anchor containing an image".

Which means I'm probably going to go with creating a "a.image" class (like in Dan's example page).

Though, as rafter suggests, I'd love to know if someone finally finds a workaround for this!
posted by kchristidis at 4:27 PM on May 3, 2004

Best answer: Sorry, I had the question backwards throughout. You can't apply CSS to the parent of an element (any a with an image inside). Go with the image class.

One other thing. This:

border-bottom: #9E3406;
border-width: 0px 0px 1px 0px;
border-style: none none solid none;

Can be rewritten thusly:

border: none;
border-bottom: 1px solid #9E3406;

Just a little easier to read. And if you have Firefox, go get the Web Developer extension. Tools > Web Developer > Information > View Style Information is a huge help for debugging what exactly is getting applied to an element.
posted by yerfatma at 5:12 PM on May 3, 2004

Response by poster: Yerfatma, Firefox is the browser I use 99% of the time - I'm off to get that extension!
posted by kchristidis at 6:01 PM on May 3, 2004