Have been working on my wp blog and have made a post with an image that is a link. When you rollover the image a border appears just off the bottom. it is obviously getting it from the normal a:hover info in css file but i cant figure out how to get rid of it for the image.

 

i have just noticed that this only happens in firefox, and looks fine in safari. havent tried IE cause i dont care.

 

Site is located here, post in question is the first one. http://philxthomas.com/

 

Anyone got any ideas?

img a, img, img:hover {
border:none
}

 

and so on and so forth - that's what I'd try, anyway.

thanks, but no that didnt work

The only other thing I can suggest is adding a class to the images:

 

a.noBorder {
 border:none;
}

<img src="images/image.png" alt="image" class="noBorder" />

nope, still not working.

nope, still not working.

I've just checked your source code and you don't appear to have added the class to the image.

 

Traxors solution should work (I have done similar on one of my sites.)

i added then removed, it didnt work

re add the class to the image, but in the css try the following

.noBorder:hover {
border:none;
}

still nothing, its really odd.

 

maybe something to do with the fact that wp adds <p> tags in random places

In your style sheet you have the line:

 

a:hover { color:#000; text-decoration:none; border-bottom:1px #444 dotted;

 

This adds the border to the image link and any other link. Removing the last part will take out all of the borders. Eg change the line to;

 

a:hover { color:#000; text-decoration:none;

 

If you want to tweak it so that the other links keep their border maybe add a class to them and use the border-bottom:1px #444 dotted; css.

yeah i know all that, i did write the code remember.

 

anyway i have sort of fixed it now, just need to tweak it a bit, just added style="border: 0pt none;" to the img. think its just wp being stupid

 

no wait, i added it to the <a> tag

 

thanks for the help anyway guys.