[Solved] Remove Border from an Image

[skater102]

I seem to be having problems removing the border from an image that’s an anchor link. I have not had trouble with this a lot in the past, it is kinda frustrating.

Here is the CSS for my anchor links:

Code:

a {text-decoration:none; color:#000; border-bottom:1px solid #508181}

And this for trying to remove the border from the image:

Code:

img{border:none;}

With this styling, there is still a border under the images that are links.
Any ideas on how to fix that?

[apostrophe]

Here you go:

Code:

a img, :link img, :visited img {
border: 0;
}

[skater102]

"apostrophe" wrote:

Here you go:

Code:

a img, :link img, :visited img {
border: 0;
}

Drat! It didn’t work. :? I don’t know why, it should have. Any other ideas.

[TheDoc]

a img, a:link img, a:visited img {
border: 0;
}

Give that a go instead.

[skater102]

"TheDoc" wrote:

a img, a:link img, a:visited img {
border: 0;
}

Give that a go instead.

Nope. Still didn’t work. Bummer.

[apostrophe]

You’re obviously overriding it somewhere else in the cascade. Can you post a link?

[skater102]

The Link: http://thomaslattimore.com
The border is under the "Coming soon" image. It is almost unnoticeable in this case do to the paragraph bellow it. But as images are added to other places on the site, the border will be more noticeable.
I am almost positive it is not being overwritten by a style later on in the sheet. It is not a very big CSS file, only about 90 lines, and I have done I search for "a" in it and have found nothing substantial.

One of the weirdest things is that when the image is inspected with firebug, it states there is a selector and syntax applied to it as follows:

Code:

a img, a:link img, a:visited img {
border:0 none;
}

Yet, there is still a border under the image?

[AshtonSanders]

I see it (in IE7), but it’s not a border, it’s an underline.

Try adding this to your above css:

text-decoration: none;

[skater102]

"AshtonSanders" wrote:

I see it (in IE7), but it’s not a border, it’s an underline.

Try adding this to your above css:

text-decoration: none;

Deceleration added. Border still there.

[apostrophe]

It’s not actually showing in firefox but I’ve had a look in ie7 with IENetrenderer and I reckon it’s inheriting this rule:

Code:

a {
border-bottom:1px solid #508181;
color:#000000;
font-size:inherit;
text-decoration:none;
}

So how about getting rid of that bottom border on all the anchors and then make it more specific?

Code:

a {
color:#000000;
font-size:inherit;
text-decoration:none;
}
div.content p a {
border-bottom:1px solid #508181;
}

[skater102]

That fixed it! Thanks!! ;)

[Author]

Posts