Image links underline not

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I do not want my linking images to be underlined like my text links are.
Links are in a css-file given a red dotted underline.
The links properties in the css-file is like this:
/* Links properties */
    color: white;
    text-decoration: none;

    color: white;
    text-decoration: none;

    color: white;
    text-decoration: none;

    color: white;
    border-bottom:#FF0000 1px dotted;


In the same css-file I have:

a img {border: none; }

td img {display: block;}

The latter makes the trick in FF3, but in IE8 i do not work at all.
A dotted line is still emerging during hovering of the mouse.

I have tried:
/* this targets specific images that are linked, ex: <a class="noborder"
href="#"><img ></a> */
a.noborder img {
border: none;

I have tried everything, exept kicking the left rear tire of my SUV.

The page I refer to is at and I'm talking about the
image to the left with my face and the three oval buttons to the right. In
IE8 the red dotted line is popping up.

The "border: 0px;" parameter is only to take away all borders around a image
containing a link.
How in all gods names can I overrule the css-file setting when it comes to
images with a link?


Zadig Galbaras

Re: Image links underline not

Øyvind Granberg wrote:

Quoted text here. Click to load it

The dotted border is on the <a> element, so taking out the border of
the image inside the <a> element, would not have any effect.

Quoted text here. Click to load it

Try a.noborder
Quoted text here. Click to load it

Quoted text here. Click to load it

Sorry, I don't have IE8 atm.

However, looking in Firefox, if I set a thick border on all sides of
the <a> element that surrounds the picture on the left, I see the
colour of that border only to the top left of the image.
This is because the <a> element is 'inline', and the image has
display:block. If you make the these images inline, you'll see the
dotted border below it in Firefox as well. IE8 just responds different
to the image being display block than the other browsers do

Quoted text here. Click to load it

As long as you put a dotted border on the <a> element, you will see
it, until you stop it. This is separate from the border on the image.
Try it out by setting a blue border on the image. Now you'll probably
see two borders - one blue (probably surrounding the image), and one
red dotted below it.

Els            /

Re: Image links underline not

Quoted text here. Click to load it

I think that dotted thing might actually be an outline (coming from
Firefox's default stylesheet) not a border, so


might work better.

Re: Image links underline not

Ben C wrote:
Quoted text here. Click to load it

ITYM IE8's default stylesheet, but you could well be right about this.
I misread "a dotted line is still emerging", as "the red dotted
underline is still emerging".

Els            /

Re: Image links underline not

Quoted text here. Click to load it

Hi Zadig,

First add a "no-border" <a> class to you stylesheet...

a:link.no_border {color: white; text-decoration: none;}
a:visited.no_border {color: white; text-decoration: none;}
a:active.no_border {color: white; text-decoration: none;}
a:hover.no_border {color: white; text-decoration: none;}

... then use that class for the image <a> tag...

<a href=" " class="no_border"
target="_parent" style="border:none" onmouseout="MM_swapImgRestore()"
src="images/me_sketch_mr_r.png" name="Image5" width="82" height="100"
border="0" id="Image5" /></a>


<a href= class="no_border"><img></a>

Hope this fixes your issue


Site Timeline