a img underline - firefox bug??

[Chris Sharman]

See http://services.ccagroup.co.uk/testlink.html
It's valid html 4.01 transitional.
It contains 6 links: A1-A3, and B1-B3.
A is with no (default) style, B has "a img.nound { text-decoration:
none; border: none; }".

Link 1 is image + text - this has the problem - why is the image
underlined ? How do I fix it ?
Link 2 is just image - this is fine.
Link 3 is just text - also fine.

This happens in Firefox 1.5 on winxp & mac.
Doesn't happen in ie6.
Doesn't happen with a partial doctype (quirks mode).
I can't find it on bugzilla.
Is it a bug ?
Is there a workaround, or fix ?

Thanks
Chris

[Martin Honnen]

Chris Sharman wrote:

See http://services.ccagroup.co.uk/testlink.html
It's valid html 4.01 transitional.
It contains 6 links: A1-A3, and B1-B3.
A is with no (default) style, B has "a img.nound { text-decoration:
none; border: none; }".

I think the problem is the way you (unnecessarily) try to comment out
your CSS rules, you have

<style type="text/css"><!--
a img.nound { text-decoration: none; border: none; }
// -->
</style>

and // is not syntactically correct, that might start a comment with
JavaScript but not with CSS.

Simply use

<style type="text/css">
a img.nound { text-decoration: none; border: none; }
</style>

and hopefully the problem goes away as then Mozilla should apply the
styles (which it currently does not do due to the syntax error I think).
--

Martin Honnen
http://JavaScript.FAQTs.com/

[Chris Sharman]

Martin Honnen wrote:

Chris Sharman wrote:

See http://services.ccagroup.co.uk/testlink.html
It's valid html 4.01 transitional.
It contains 6 links: A1-A3, and B1-B3.
A is with no (default) style, B has "a img.nound { text-decoration:
none; border: none; }".

I think the problem is the way you (unnecessarily) try to comment out
your CSS rules, you have

<style type="text/css"><!--
a img.nound { text-decoration: none; border: none; }
// -->
</style>

and // is not syntactically correct, that might start a comment with
JavaScript but not with CSS.

It validates. I forget now which stone age browser needs it.
Your suggestion coded in http://services.ccagroup.co.uk/testlink2.html
No difference whatsoever - still wrongly underlines the images.

Thanks
Chris

[Martin Honnen]

Chris Sharman wrote:

It validates. I forget now which stone age browser needs it.
Mozilla complained about it, and rightly so I think. If you really think
you need to comment out stuff for browsers like Netscape 3 then simply
use <!-- -->, the // has no place inside of a style element.
Your suggestion coded in http://services.ccagroup.co.uk/testlink2.html
No difference whatsoever - still wrongly underlines the images.

Yes, right, the error messages in Mozilla's console however do no longer
appear.

As for the underlined link, that is a preference set in Mozilla and then
Mozilla follows the CSS 2.1 specification for text-decoration which says
at <http://www.w3.org/TR/CSS21/text.html#lining-striking-props>:

"Text decorations on inline boxes are drawn across the entire element,
going across any descendant elements without paying any attention to
their presence. The 'text-decoration' property on descendant elements
cannot have any effect on the decoration of the element."

So once the link gets a text-decoration as underline it does not help to
try to avoid the underline on a descendant element like the img.
--

Martin Honnen
http://JavaScript.FAQTs.com/

[Mark Parnell]

Deciding to do something for the good of humanity, Chris Sharman
<ch***********@sorry.nospam> declared in
comp.infosystems.www.authoring.html:

"a img.nound { text-decoration:
none; border: none; }".

Link 1 is image + text - this has the problem - why is the image
underlined ?
Technically it's the <a> element that's underlined, not the image.
How do I fix it ?

It's not broken.

--
Mark Parnell

Now implementing http://blinkynet.net/comp/uip5.html

[David E. Ross]

Chris Sharman wrote:

See http://services.ccagroup.co.uk/testlink.html
It's valid html 4.01 transitional.
It contains 6 links: A1-A3, and B1-B3.
A is with no (default) style, B has "a img.nound { text-decoration:
none; border: none; }".

Link 1 is image + text - this has the problem - why is the image
underlined ? How do I fix it ?
Link 2 is just image - this is fine.
Link 3 is just text - also fine.

This happens in Firefox 1.5 on winxp & mac.
Doesn't happen in ie6.
Doesn't happen with a partial doctype (quirks mode).
I can't find it on bugzilla.
Is it a bug ?
Is there a workaround, or fix ?

Thanks
Chris

The TestA1 and TestA2 are not underlined. They have a border line all
the way around. This is because they use the default style for HTML
4.01 Transitional, which says to put borders around images within anchors.

My external style-sheet has the following:
a.image { text-decoration: none; font-size: 80% }
img.xxx { abc; def; border-style: none }
with various xxx class names and various

I use the class "image" on any anchor that has an image to be selected
as the link. Each image that I use frequently has its own xxx class.
If you go to my home page (see signature below), the "Viewable in Any
Browser" image and the three images in a row for E-mail, PGP keys, and
searching are all links. The anchors for these use my "image" class,
which stops the underlining of the text within the anchor. The images
use their image class, which stops the border around the images (and
also sets the sizes of the images, among other style features).

--

David E. Ross
<http://www.rossde.com/>

Concerned about someone (e.g., Pres. Bush) snooping
into your E-mail? Use PGP.
See my <http://www.rossde.com/PGP/>

[Chris Sharman]

Chris Sharman wrote:

See http://services.ccagroup.co.uk/testlink.html
It's valid html 4.01 transitional.
It contains 6 links: A1-A3, and B1-B3.
A is with no (default) style, B has "a img.nound { text-decoration:
none; border: none; }".

Link 1 is image + text - this has the problem - why is the image
underlined ? How do I fix it ?
Link 2 is just image - this is fine.
Link 3 is just text - also fine.

Solved in http://services.ccagroup.co.uk/testlink3.html
Thanks, Martin, for the reference
http://www.w3.org/TR/CSS21/text.html...striking-props

It arguably isn't broken, but the image underlining present
in the 'Image+Text' column doesn't look good in my view - and would look
worse on an image without a visual 'base', such as a circle or diamond.

The way to avoid it seems to be "a img { display: block; }".
An alternative might be to remove the a underline, and put it on a span
within the a instead.

Aside:
CSS may be contained in <!-- --> (helps very ancient browsers - see
http://www.w3.org/TR/CSS21/syndata.html#comments ).
It may not contain "//" comment introducers, however, as Martin said -
that's for inline javascript (avoids -- in --> being seen as autodecrement).

Thanks
Chris

[Andreas Prilop]

On Tue, 21 Mar 2006, Martin Honnen wrote:

Mozilla complained about it, and rightly so I think. If you really think
you need to comment out stuff for browsers like Netscape 3 then simply
use <!-- -->, the // has no place inside of a style element.

Netscape 3 does *not* display the content of <style>. This is just a myth!
I do not believe that there ever was a browser that displayed the content
of <style> *as long as* you include <head> and <body> tags in your
document.

Always write <head> and <body> but do not include your styles in
pseudo-comments.

--
All free men, wherever they may live, are citizens of Denmark.
And therefore, as a free man, I take pride in the words "Jeg er dansker!"

[Chris Morris]

Andreas Prilop <nh******@rrzn-user.uni-hannover.de> writes:

On Tue, 21 Mar 2006, Martin Honnen wrote:

Mozilla complained about it, and rightly so I think. If you really think
you need to comment out stuff for browsers like Netscape 3 then simply
use <!-- -->, the // has no place inside of a style element.

Netscape 3 does *not* display the content of <style>. This is just a myth!
I do not believe that there ever was a browser that displayed the content
of <style> *as long as* you include <head> and <body> tags in your
document.

Netscape 1 [1], Lynx 2.4, and a few even older browsers *do* display
the content of <style> even if <head> is included. I suppose, when the
original CSS 1 spec was written, there could have been a concern that
someone might still have been using one of them [2].

[1] This one from memory; it might have been one of the Netscape 0.x
versions instead.
[2] Well, we still have Lynx 2.4 installed as 'lynx-' here, but I
doubt anyone uses it.

--
Chris

[David E. Ross]

Chris Morris wrote:

Andreas Prilop <nh******@rrzn-user.uni-hannover.de> writes:

On Tue, 21 Mar 2006, Martin Honnen wrote:

Mozilla complained about it, and rightly so I think. If you really think
you need to comment out stuff for browsers like Netscape 3 then simply
use <!-- -->, the // has no place inside of a style element.

Netscape 3 does *not* display the content of <style>. This is just a myth!
I do not believe that there ever was a browser that displayed the content
of <style> *as long as* you include <head> and <body> tags in your
document.

Netscape 1 [1], Lynx 2.4, and a few even older browsers *do* display
the content of <style> even if <head> is included. I suppose, when the
original CSS 1 spec was written, there could have been a concern that
someone might still have been using one of them [2].

[1] This one from memory; it might have been one of the Netscape 0.x
versions instead.
[2] Well, we still have Lynx 2.4 installed as 'lynx-' here, but I
doubt anyone uses it.

HTML 4.01 specification section 14.5 allows (does not require) placing
the STYLE declarations in comments in the HEAD section of a Web page.

--

David E. Ross
<http://www.rossde.com/>

Concerned about someone (e.g., Pres. Bush) snooping
into your E-mail? Use PGP.
See my <http://www.rossde.com/PGP/>

[Alan J. Flavell]

On Wed, 22 Mar 2006, David E. Ross wrote:

HTML 4.01 specification section 14.5 allows (does not require) placing the
STYLE declarations in comments in the HEAD section of a Web page.

Except that in HTML/4.*, as in HTML/3.2(spit), the content of the
STYLE element is CDATA, so those character sequences are not really
"comments". (They're supposed to *look like* comments to client
agents which don't understand these versions of HTML, in other words).