By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,763 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

Image in Anchor Underlined

P: n/a
In some cases, I indicate links with both a small image and also
text, both in the same anchor. When I upgrade my pages to incluce
DOCTYPE for HTML 4.01 transitional, the underline for the link
extends to the image. Without the DOCTYPE, the underline appears
only for the text.

Is there a way to specify a style that I can use with the DOCTYPE
that will allow the underline for text in a link but suppress the
underline for an image in the same link? Or do I have something
wrong in my existing style sheet?

A sample page with the DOCTYPE is at
<http://www.rossde.com/test/test_anchor_wimgtxt.html>, which
contains a link for displaying my style sheet.

--

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

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <http://www.mozilla.org/>.
Jul 20 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a
David Ross <no****@nowhere.not> wrote:
that will allow the underline for text in a link but suppress the
underline for an image in the same link? Or do I have something
wrong in my existing style sheet?

A sample page with the DOCTYPE is at
<http://www.rossde.com/test/test_anchor_wimgtxt.html>, which
contains a link for displaying my style sheet.

a[href]:hover { background-color: #ffa }
a[href]:hover img { background-color: transparent }
Jul 20 '05 #2

P: n/a
Karl Smith wrote:

David Ross <no****@nowhere.not> wrote:
that will allow the underline for text in a link but suppress the
underline for an image in the same link? Or do I have something
wrong in my existing style sheet?

A sample page with the DOCTYPE is at
<http://www.rossde.com/test/test_anchor_wimgtxt.html>, which
contains a link for displaying my style sheet.


a[href]:hover { background-color: #ffa }
a[href]:hover img { background-color: transparent }


The first of those was already in my external style sheet. Adding
the second did not help.

Note: I'm viewing the page with Mozilla 1.6, running Windows
98SE.

--

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

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <http://www.mozilla.org/>.
Jul 20 '05 #3

P: n/a
Somewhere around 2/14/04 8:15 PM, David Ross typed wildly with reckless
abandon:
In some cases, I indicate links with both a small image and also
text, both in the same anchor. When I upgrade my pages to incluce
DOCTYPE for HTML 4.01 transitional, the underline for the link
extends to the image. Without the DOCTYPE, the underline appears
only for the text.

Is there a way to specify a style that I can use with the DOCTYPE
that will allow the underline for text in a link but suppress the
underline for an image in the same link? Or do I have something
wrong in my existing style sheet?

A sample page with the DOCTYPE is at
<http://www.rossde.com/test/test_anchor_wimgtxt.html>, which
contains a link for displaying my style sheet.


What about something like this:

a {text-decoration:none;}
a span {text-decoration:underline; font-size:90%/*or whatever*/;}

then put the link text inside a span. It's slightly unorthodox, but it
will work and it will also get rid of the depreciated <font> tag.

--
My opinions may have changed, but not the fact that I am right.
(Ashleigh Brilliant)
Jul 20 '05 #4

P: n/a
It turns out, the behavior I observe is per the specs. Since I am
willing to give up the underline for the text in this case, I am
going with
a.image { text-decoration: none }
and then using the image class for the affected anchors.

--

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

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <http://www.mozilla.org/>.
Jul 20 '05 #5

P: n/a
David Ross wrote:
I indicate links with both a small image and also text, both in the
same anchor. When I upgrade my pages to incluce DOCTYPE for HTML
4.01 transitional, the underline for the link extends to the image.
Do you mean the border around a hyperlinked image?
Is there a way to specify a style that I can use with the DOCTYPE
that will allow the underline for text in a link but suppress the
underline for an image in the same link?
a {text-decoration: underline} /* default - prob unnecessary*/
a img {border: none}
A sample page with the DOCTYPE is at
<http://www.rossde.com/test/test_anchor_wimgtxt.html>


error 404

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #6

P: n/a
> Do you mean the border around a hyperlinked image?

No, he doesn't - I'm having the same problem but it only appears in Mozilla.
It's as though there's a text-decoration:underline set on the image but
turning it off doesn't do anything.
Jul 20 '05 #7

P: n/a
Brian wrote:

David Ross wrote:
I indicate links with both a small image and also text, both in the
same anchor. When I upgrade my pages to incluce DOCTYPE for HTML
4.01 transitional, the underline for the link extends to the image.


Do you mean the border around a hyperlinked image?


No, I meant the link underline. The default is to underline the
text in an anchor for a link. With DOCTYPE specified for HTML
4.01 transitional, the underline also appears for an image within
such an anchor.
Is there a way to specify a style that I can use with the DOCTYPE
that will allow the underline for text in a link but suppress the
underline for an image in the same link?


a {text-decoration: underline} /* default - prob unnecessary*/
a img {border: none}
A sample page with the DOCTYPE is at
<http://www.rossde.com/test/test_anchor_wimgtxt.html>


error 404


You got 404 because I removed the example from my Web site when I
discovered that underlining an image within a link anchor is per
the specification for CSS.

--

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

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <http://www.mozilla.org/>.
Jul 20 '05 #8

P: n/a
e n | c k m a wrote:
Do you mean the border around a hyperlinked image?


No, he doesn't - I'm having the same problem but it only appears in Mozilla.
It's as though there's a text-decoration:underline set on the image but
turning it off doesn't do anything.


See Mozilla bug #234430 at
<http://bugzilla.mozilla.org/show_bug.cgi?id=234430>. Apparently,
you can't specify anything about text-decoration for an image.
Thus, my bug report was closed as invalid.

You can turn off the underline for the entire anchor and
optionally underline the text (e.g., with a font class or the <u>
</u> tags). I have defined a class for the <a> tag that turns off
the underline. I will be using it only for those anchors that
have images within their scope.

--

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

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <http://www.mozilla.org/>.
Jul 20 '05 #9

P: n/a
David Ross <no****@nowhere.not> wrote in message news:<40***************@nowhere.not>...
Karl Smith wrote:

David Ross <no****@nowhere.not> wrote:
that will allow the underline for text in a link but suppress the
underline for an image in the same link? Or do I have something
wrong in my existing style sheet?

A sample page with the DOCTYPE is at
<http://www.rossde.com/test/test_anchor_wimgtxt.html>, which
contains a link for displaying my style sheet.
a[href]:hover { background-color: #ffa }
a[href]:hover img { background-color: transparent }


The first of those was already in my external style sheet.


Yes, it was the only reference to a[href] I saw in the stylesheet.
Sorry, I should have read more closely - you were asking about
text-decoration: underline. I never saw any underlining anyway because
I have my browser set to not underline links by default.
Adding the second did not help.


No, it wouldn't in that case. If you want to include the MSIE crowd
change the a[href] for a:link.

a:link:hover { background-color: #ffa; text-decoration: underline; }
a:link:hover img { background-color: transparent; text-decoration:
none; }
Jul 20 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.