CSS dotted underline and graphics

Looking for a CSS tip

[maialee]

I want to have dotted underlines under my links on a: hover, but then all of the images that link to things are underlined too and it looks weird because they move slightly when you mouse over them.

Do I have to make a special class for images, use the dotted underline only under a certain class, or is there a line that I can add to the style sheet to exclude images from the dotted underline? I know there are ways to do this, but I'm looking for the easiest way, since it's a hand-build site with thousands of pages.

[rjohara]

The :hover pseudoclass can apply to anything (at least under the specification [w3.org]), and so you can make a rule:

a img:hover { border-bottom: none; }

This will insure that any image within an anchor will not have a bottom border on hover. Usual caveat: I don't know about the extent of browser support for this on your platform.

RJO

[createErrorMsg]

it looks weird because they move slightly when you mouse over them

Borders are added to the outside of the box, so since you have to use borders for this (text-decorations can't be dotted), when one is added via hover, it shifts the box up. The solution is to pre-style all the links with a 1px border the same color as their background, then change it to the desired color on :hover. You'll also need to set the borders on linked images to 0 (browsers default to adding a border around linked images. When your hover style removes the border, it causes the shift) and set text-decoration on all links to none...

a img{border:0;}
a:link {text-decoration:none;border-bottom:1px dotted #fff;}
a:hover{border-bottom:1px dotted #000;}/*your color*/

cEM