XHTML 1.0 Strict, CSS and img borders

Question

I am using XHTML 1.0 Strict on my website and have the following CSS style on my links:

a:hover {
    border-bottom: 1px dotted #447799;
}

and my images:

a img, img {
    border: none;
    text-decoration: none;
}

Yet, when I hover over my title banner the bottom border still shows up dotted and blue. Obviously, I can't use border="0" because it is not part of the XHTML 1.0 Strict Doctype.

You can see my site here: armorycraft.com

Suggestions?

Answer 1

You could use a class:

a.imageAnchor:hover {
    border:none;
}

Not the most beautiful solution, but it should work.

Answer 2

Try this:

a img:hover, img:hover {border:none; text-decoration:none;}

Answer 3

Problem is border is attached to the anchor, but then you're setting a border: none to the image.

There's no simple way to avoid this. I'd suggest tweaking the thing a little bit:

a:hover {
    border-bottom: 1px dotted #447799;
}

a.image:hover {
    border: none;
}

So, add the "image" class to all anchors with images and you're done.

Answer 4

a:hover has border:1, so automaticly a:hover img als has border:1

I think this would fix it

a:hover img{border:0;}

now you dont need to make a whole new class for it

Answer 5

This worked for me: (I think you just forgot the colon (:)

a:img, img {
    border: none;
    text-decoration: none;
}

Good luck!