Francky's Home Pics:
split image and text hover colors for one link

here: DOCTYPE HTML 4.01 Strict

see also: DOCTYPE HTML 4.01 Transitional for the same page !



1. Common case

Hovering over my home is changing the border color of the img
and the color + text-decoration color of the text.
The underline is pretty close to the text.

IE and Opera: no text-decoration under the image.
IE and Opera need a <br> between img and text.
FF is showing the text-decoration under the image, 
if doctype is "strict".


my castle
is
my home

2. 'Pseudo text-decoration' with spanned text

Hovering over my home is changing the border color of the img
and the color + border-bottom color of the spanned text.
Distance to pseudo-underline can be adapted.
Underline (normal/hover) color can be styled independent of text (normal/hover) color.

IE and Opera need a <br> between img and text; then:
FF, IE and Opera: all same result, all doctypes.


my second
castle

3. Common case with img {display:block}

Now FF is not showing the text-decoration under the image anymore.

FF, IE and Opera: all same result, all doctypes.

my third
castle

4. 'Pseudo text-decoration' with img {display:block}

 This time not FF, but IE is different.

FF and Opera: no text-decoration under the image.
IE is showing the text-decoration under the image, 
at all doctypes.

my 4th
castle

http://archivist.incutio.com/viewlist/css-discuss/81598