Roger Roelofs wrote:
>Erik,
>
>On Nov 10, 2006, at 11:26 AM, Erik Harris wrote:
>
>
>>There are times when I'd like a link to contain both an image and
>>text. I
>>want the text to be underlined, as usual, but I don't want the
>>image to be
>>underlined. This works fine in most browsers, but Firefox insists on
>>underlining the image.
>>
>>Here's a page with numerous examples of what I'm talking about:
>>
>>http://www.eharrishome.com/halloween/pumpkins.html
>>
>>I've tried various variations of
>>a img {text-decoration: none; border: none !important}
>>with no luck. Nothing seems to turn off the rather unsightly
>>underline in Firefox.
>>
>
>The image is display: inline; by default, so it is part of the text.
>Set the image to display: block; and it will not be underlined. If
>you choose to keep the <br> element, you will want to style it away
>with something like display: none;
>
>hth
>
Hi Erik, Roger, Chris and all,
I discovered the underlining behavior is also dependent on the used DOCtype!
In case of html4.01 Strict:
* Firefox is insisting to underline in the common case of
underlining the link by text-decoration.
* Then {display:block} for the img, as Roger said, is solving this,
and fine in all browsers (tested FF1.07, IE6 and Opera8.01).
* If the container has a width equal to the img-width, a
styling-away of the <br> is not needed.
* My previous suggestion, not underlining of the <a> but only text
underlining in a <span> with a border-bottom, is also fine for all
browsers, and has some more freedom to style the underline color
different from the text color.
* Though {display:block}in combination with a border-bottom
underlining for the whole <a> (without a spanned text) is not
working in IE.
In case of html4.01 Transitional with pointing to the w3c dtd-file
"loose.dtd": same as Strict.
But in case of html4.01 Transitional without dtd-declaration:
* Now Firefox is not underlining the img in the common case of
underlining the link by text-decoration!
* {display:block} is not needes for FF now, but can be used to
replace the <br> in the html for IE and Opera.
* Span solution still fine.
* IE still protesting against {display:block} + underlining by
border-bottom without <span>.
By accident I used this Transitional DOCtype in my testpage, and using
the same ccs in the Pumpkin page (with Strict) doesn't work in all cases.
So I had to update and split my testpage:
* updated version:
http://home.tiscali.nl/developerscorner/css-discuss/img-and-text-hovering.htm
* new:
http://home.tiscali.nl/developerscorner/css-discuss/img-and-text-hovering-b.htm
Here they are!
I should go for my 2nd castle, which I like most of all. ;-)
Greetings,
francky
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
