473,327 Members | 1,997 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

Image in Anchor Underlined

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
9 8767
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
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
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
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
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
> 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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Kenny | last post by:
I have been trying to write a script that will increase the size of and image when you mouse over it, and decrease it to original size, when you mouse out. After a couple of attempts, this is what...
1
by: Frostillicus | last post by:
Does anyone know how to get around the problem IE seems to suffer from whereby an image within an anchor tag ignores the :hover pseudo element for the anchor in which it lives? Firefox is fine but...
3
by: DC | last post by:
Given: a { text-decoration:none; } a:hover { text-decoration:underline; }
10
by: Edwin Knoppert | last post by:
I have an asp.net imagebutton with a clickevent. I have enclosed an anchor around the image and a small text. If i click the image the event is executed (while the href of the anchor shows in the...
31
by: Martin Clark | last post by:
Hello, I am daring to stick my head above the parapet and ask as question. I am working on redesigning a website to use CSS rather than tables for layout. I have come across a problem when trying...
1
by: David Housman | last post by:
Hello, The effect i'm trying for: Tha tthe user clicks an image, and a line of text on the page changes. I'd like to make it so that this could be done over and over with different links. But...
1
by: saikatbose2005 | last post by:
Hi, Ineed some help from anyone regarding an issue I'm facing. I've created an image dynamically on clicking a button. What I inetend to do is when I click on the created image it will popup a...
3
by: Nebulism | last post by:
Hi everyone, I am working on a module for my GUI that shows one image with an index value below and would use a scrollbar to control which of the images are displayed. The images are stored in a...
5
by: Kalpana Durairaj | last post by:
I want to insert my image within search result anchor(say google search results). <a href="http://www.codeproject.com">Code Project <!-- Google search result link--> <img src="myimage.png"...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.