Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Image links underline not

Reply
Thread Tools

Image links underline not

 
 
yvind Granberg
Guest
Posts: n/a
 
      10-17-2008
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

 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      10-17-2008
Øyvind Granberg wrote:

> 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
the image inside the <a> element, would not have any effect.

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

--
Els http://locusmeus.com/
 
Reply With Quote
 
 
 
 
Andy
Guest
Posts: n/a
 
      10-18-2008

"yvind Granberg" <(E-Mail Removed)> wrote in message
news:48f91358$(E-Mail Removed)...
> 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

 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      10-18-2008
Ben C wrote:
> On 2008-10-17, Els <(E-Mail Removed)> wrote:
>> Øyvind Granberg wrote:
>>
>>> 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 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".

--
Els http://locusmeus.com/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Remove underline from image links (CSS) pepito3@gmail.com HTML 7 05-21-2011 09:15 PM
css image link border and underline Steve Greenaway HTML 6 02-08-2005 03:37 PM
remove underline from links Ed Javascript 2 10-03-2003 03:43 PM
Re: Firebird - html underline probs Kriss Watt Firefox 0 06-24-2003 11:41 PM
Re: Firebird - html underline probs Gnomalarta Firefox 0 06-24-2003 07:39 PM



Advertisments