Image links underline not

[Øyvind Granberg]

Hi...

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 */
a{
color: white;
text-decoration: none;
}

a:link{
color: white;
text-decoration: none;
}

a:visited{
color: white;
text-decoration: none;
}

a:hover{
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 www.tresfjording.com 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
(nick)
www.tresfjording.com

 

[Els]

a:hover{
color: white;
border-bottom:#FF0000 1px dotted;
}

a img {border: none; }

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.

The dotted border is on the <a> element, so taking out the border of

a.noborder img {
border: none;
}

Try a.noborder{border:none;}

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

The page I refer to is at www.tresfjording.com 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.

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
apparently.

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?

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.

 

[Andy]

Hi...

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 */
a{
color: white;
text-decoration: none;
}

a:link{
color: white;
text-decoration: none;
}

a:visited{
color: white;
text-decoration: none;
}

a:hover{
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 www.tresfjording.com 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
(nick)
www.tresfjording.com

Hi Zadig,

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

<style>
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;}
</style>

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

<a href="http://www.tresfjording.com/index.htm" class="no_border"
target="_parent" style="border:none" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image5','','images/me_trsp.png',1)"><img
src="images/me_sketch_mr_r.png" name="Image5" width="82" height="100"
border="0" id="Image5" /></a>

eg:

<a href=http://www.tresfjording.com/index.htm class="no_border"><img></a>


Hope this fixes your issue


Andy

 

[Els]

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

a.noborder {outline:none}

might work better.

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".