Stupid images within links!

[spl1nter]

On my site I have used CSS to create a border around my links whenever the pointer hovers on them. For this task I have used this:

a	{
                   font-family: Arial, Helvetica, sans-serif; 
	   font-size: 12px; 
	   font-style: normal; 
	   font-weight: bold;
	   color: #6699CC;
	   padding: 1px;
	}
a:Hover   { 
	   text-decoration: none;
	   background-color: #999999;
	   color: #FFFFFF;
	   border: 1px #666666 solid;
	   padding: 0px;
	   height: auto; 
	}

This does mean that any images that are used as links also get this border. I don't want that! I tried using:

a:hover img { 
                        background-color: transparent;
                        border: none;
                        padding: 1px;
                     }

But that didn't work. I then tried img a:hover, a img:hover and img:hover a (I know those last two wouldn't work, but I tried :P).

What should I use?

[shlagish]

I had the same problem...
I ended up doing this:

a.image:link, a.image:visited, a.image:hover, a.image:active, a.image:focus { border-width: 0px; }
img { border-width: 0px; }

and then, whenever I had an image as a link:

<a href="wtv" class="image"><img src="wtv" /></a>

[Tails]

put border="0" in the img tag or use img{border:0} via CSS.

:hover can only be used in only the a element in IE, and can be used in any element in Netscape or Mozilla. However you cannot have an effect such as img:hover{border:1} (for some reasons borders can't be added dynamically)

[shlagish]

yes you can, it works for me in IE5.5 and firebird...

[coder_seth]

whoa whoa.. slow down, kids..

this is all you needed to do:

a img {border: none}

if you specify a:hover you're only going to remove the border when they hover!

also, don't use border="0" as border is no longer a property of the <img> tag in XHTML. even if you aren't coding XHTML, you don't need it.

[spl1nter]

I knew about not using border="0" as I'm using XHTML Strict.

a img {border: none} doesn't work. There is no border before the :hover, only during it.

[coder_seth]

...

okay.. i am confused. your problem is that you have images surrounded by anchors that you don't want a border on, yes? if so, then what i said is correct.

otherwise, perhaps you need to better explain your issue or i need to better comprehend it.

it's been a long day, and i'm running on E..

[Tails]

For standards, I use XHTML 1.0 Strict as well as XHTML 1.1 (The W3 validator is my best bud). When an image is representing a link instead of text, it will gain a border around it to represent the color of the :visited and :link colors the <a> tags would have.

img{border:0} works without any problems and it properly validates. Just remember that when using any non-zero number, you have to include units such as px.

[spl1nter]

Here is the site: http://home.graffiti.net/spl1nter:graffiti.net/

[coder_seth]

so what's the problem? the W3C image links? if so, like i said:

a img {border:none}

will remove borders, and of course since you have a background color on your normal links too you'd have to specify no background too.

[Tails]

The problem is with your a:Hover When I commented out the following, it worked fine for the image.

a:Hover {
text-decoration: none;
/* background-color: #999999;*/
color: #FFFFFF;
/* border: 1px; #666666 solid;*/
/* padding: 0px;*/
height: auto;

You can always make an a:hover img{} to override the settings since child element styles take higher priority.

Also, I notice your a:link, a:active, a:visited, all use the same style but are declared 3 times. You can use a comma to separate different elements and they'll all point to the same value.

a:visited, a:active, a:link {text-decoration:none}

That can help combine your footer styles too.

[spl1nter]

I've tried that already (see above).

[zzg]

try this

<a href="page.html" style="border:none"><img src="imgsrc.gif" border="0"></a>

Hope it helps

[missing-score]

We have already said that we're not using border="0" and also you havnt closed your image tag!

<img src="imgsrc.gif" alt="imgsrc" />

Anyway, what you should do is something like:

a.imglink, a.imglink:hover, a.imglink:active, a.imglink:visited {
border: 0px;
background: none;
}

img {
border: 0px;
}

Place that AFTER any other CSS for links you have to make sure it doesnt get "overwritten" by the parser, and then use:

<a class="imglink" href="#"><img src="...." alt="Blah" /></a>

should work

<edit> Just realised this is pretty much what shlagish said! </edit>

[me']

Try this, it's a little different.

a img { border-width: 0 !important }