I’m hoping this is a simple one

For the text links of my site they have a bottom border rather than underlined.

a:link { color: #E36E11; text-decoration: none; border-bottom: 1px dotted #E36E11; }
a:visited { color: #E36E11; text-decoration: none; border-bottom: none; } 
a:hover { color: #E36E11; text-decoration: none; border-bottom: 1px solid #E36E11; }

An image link on the site has the bottom border, so I added this code:

a img {border: none;}

But the image link still has the border. So I tried:

a:link img {border: none;}
a:visited img {border: none;}
a:hover img {border: none;}

But still no luck. Could anyone help?

try

a img {border: none !important;}

This tell the browser that this rule have priority over the other.

Otherwise, as the rules are cumulatives, you have to put the one taking your pictures border out after the declaration of the border.
Otherwise, you declare first that you want a bottom border on image links, and then that links must have a full border, thus overriding your first statement.

Thanks, but that didn't work. I still get the border on image links.

Do you have a link?

Yes, the site is http://www.casasolana.co.uk/

And the CSS file is at http://www.casasolana.co.uk/css/casa-style.css
(IE6 & below at http://www.casasolana.co.uk/css/casa-style-ie.css )

try giving it a class, for example:

a.noborder:border:none;

<img src="images/casa_pdf_128.jpg" class="noborder" />



because currently it has an id value that means nothing

Thanks but still no luck

(That id was from before when I was trying divs & classes)

Well in that case I'd give the OTHER links the class, that way they can't possibly be inherited by the image

Ok, the !important is an unnecessary hack. You're dealing with specificity here, so you have to address that.

First, at the top of your style sheet, add:
img {border: none;} - that will prevent the usual red box border that appears on any image within a link.

Second, to get rid of the imposed border you added, put the .noborder class on the <a> instead of the img and it will work - no borders at all.

a.noborder { border:none;}
In the html use <a class="noborder" ><img src="blah blah" />

Brilliant, that works perfectly! Thanks a lot LadynRed

Originally Posted by LadynRed

Second, to get rid of the imposed border you added, put the .noborder class on the <a> instead of the img and it will work - no borders at all.

a.noborder { border:none;}
In the html use <a class="noborder" ><img src="blah blah" />

Thats what I was trying to get across lol - thanks for articulating what I couldn't Diane

Thanks for your help Angelosanto

You could have also just done

img {
border: 0px solid #000000;
}

or

img a:link, img a:active, img a:hover, img a:visited {
border: 0px solid #000000;
}

Lol, olivia I was just about to recommend the same thing. I always just use 0px solid whatever color instead of the word none.

Adding invisible borders where none are needed is just extraneous code, and once you address the specificity issue, completely unnecessary.

I always just use 0px solid whatever color instead of the word none.

Why define it that way at all when border: none; or border: 0; is all that's needed ??

Originally Posted by LadynRed

Adding invisible borders where none are needed is just extraneous code, and once you address the specificity issue, completely unnecessary.

Why define it that way at all when border: none; or border: 0; is all that's needed ??

Because, then you don't have to add to all your images/links:
class="noborder"


But, to simplify my solution further
(per your suggestion)

img {
border: 0px;
}

It is important to grasp the CASCADE and specificity so that such extraneous code, and adding classes to every img tag is unnecessary.