Anchor Tags

suicide

Sep 10 2004, 03:24 PM

I have cracked the Style setting for text in anchor tags (text-decoration:none) - but when I want to have an image as a link, I get the blue border around the image and a purple when visited.

How do I get rid of the formatting around the image, just like I have for the formatting of the text?

Many thanks!

Comment/Reply (w/o sign-up)

overture

Sep 10 2004, 05:41 PM

ok to do this you can add this in your style sheet which will affect all images:

CODE

img {
border: 0;
}

that will make it so that any image which is a link will not appear to have the blue line around it

or you can do this:

CODE

just add the border="0" to the image tag, you would have to do this for all images if u dont do it the css way.

Comment/Reply (w/o sign-up)

SinisterMinisterX

Sep 14 2004, 04:42 AM

I'd highly recommending using overture's CSS suggestion. I have found occasional unexpected behavior in IE with border="0" in a HTML image tag. I wish I still had the code to post here, but I once found a situation where border="0" messed up my table layout for no apparent reason.

Also, doesn't 'text-decoration: none' take the underlining off of your links? If so, I highly recommend against doing this. Web users have become used to links being underlined; going against this convention may confuse your users or cause them to miss some links.

Comment/Reply (w/o sign-up)

Kovi

Sep 14 2004, 05:42 AM

I didn't know about the CSS img border trick there. 'Twill come in very useful.

Also, before you just get rid of img borders entirely, try experimenting with making the link color one the agress with the rest of your design and altering the width. A one or two pixel border can look very nice in an image gallery or such. If you want to use the CSS way (and now that I know it exists, I would too recommend it) and also have images in a menu or such that you don't want borders around, use class definitions to switch between images with borders and ones without.

On an alternate note, do you really think that by this time web users are dependent on having an underline to define a link? As long as you use an easily distinguishable color (after running it though one of the various color-blindness tests to check that way too) and don't use switch the mouse icon from the default pointing finger, I should think that the users would be able to figure it out. I guess it depends on your audience, though. If yours is a business site or some such, having underlines might be best as a 'just-in-case' type thing.

Comment/Reply (w/o sign-up)

overture

Sep 14 2004, 12:59 PM

SinisterMinisterX: yes the 'text-decoration: none;' does take the underline away from links if specified on different states for the link ie: link, active, visited. most people now do not use links with underlines on only when they hover over them does the link appear which gives the viewer the notification that it is a link.

This is some example code, which many people use, kind of the norm for text links now:

CODE

a:link, a:visited, a:active {
    color: #000000;
    text-decoration: none;
}

a:hover {
    color: #eeeeee;
    text-decoration: underline;
}

Comment/Reply (w/o sign-up)