Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Remove underline from image links (CSS)

Reply
Thread Tools

Remove underline from image links (CSS)

 
 
pepito3@gmail.com
Guest
Posts: n/a
 
      07-04-2006
Hello, I have the following CSS rule to underline my way

a {
border-bottom-style: dotted;
border-bottom-width: 1px;
}

But I want images not to have a dotted underline (just nothing) and I
don't know how to do it.

I have tried the following:

a img {
border-bottom-style: none;
border-bottom-width: 0px;
}

....and...

..without_u {
border-bottom-style: none;
border-bottom-width: 0px;
}

<a class="without_u" ...> <img class="without_u" ... /> </a>

But nothing works! It seems like border-botton-style property in 'a' is
always on. It is very weird because If I write:

a img {
border-bottom-style: dotted;
border-bottom-width: 1px;
}

images get double underline!

Any suggestions? Thanks!!

 
Reply With Quote
 
 
 
 
Rik
Guest
Posts: n/a
 
      07-04-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> Hello, I have the following CSS rule to underline my way
>
> a {
> border-bottom-style: dotted;
> border-bottom-width: 1px;
> }
>
> But I want images not to have a dotted underline (just nothing) and I
> don't know how to do it.
>
> I have tried the following:
>
> a img {
> border-bottom-style: none;
> border-bottom-width: 0px;
> }


Here you say the img contained in an a should not have a border, the "a"
still has one.

> .without_u {
> border-bottom-style: none;
> border-bottom-width: 0px;
> }
>
> <a class="without_u" ...> <img class="without_u" ... /> </a>


..without_u{
border:none;
}
Works here in both Opera and MSIE, you don't need the class on the image.

Grtz,
--
Rik Wasmus


 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      07-04-2006
In article
<(E-Mail Removed). com>,
(E-Mail Removed) wrote:

> But nothing works! It seems like border-botton-style property in 'a' is
> always on. It is very weird because If I write:
>
> a img {
> border-bottom-style: dotted;
> border-bottom-width: 1px;
> }
>
> images get double underline!
>
> Any suggestions? Thanks!!


What is "on" by default is text-decoration: underline; You turn
this off by text-decoration: none; That is one thing. The other
thing is the border. You turn this off by border: none; You need
to deal with these two things separately.

--
dorayme
 
Reply With Quote
 
pepito3@gmail.com
Guest
Posts: n/a
 
      07-04-2006

> What is "on" by default is text-decoration: underline; You turn
> this off by text-decoration: none; That is one thing. The other
> thing is the border. You turn this off by border: none; You need
> to deal with these two things separately.
>
> --
> dorayme


This doesn't work either:

a img {

border-bottom-style:none;
border-bottom-width:0px;
text-decoration: none;
border:none;
}

 
Reply With Quote
 
Frank Olieu
Guest
Posts: n/a
 
      07-04-2006
(E-Mail Removed) wrote in news:1152034495.324107.12100
@p79g2000cwp.googlegroups.com:

> <a class="without_u" ...> <img class="without_u" ... /> </a>


remove the spaces between your <a> and <img> tags:
<a ...><img ...></a>
(assuming you have no text either)

--
Venlig hilsen | Kind regards | Cordialement
Frank
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      07-04-2006
(E-Mail Removed) <(E-Mail Removed)> scripsit:

> Hello, I have the following CSS rule to underline my way


Remove it. And I mean your CSS code, not the underline.

The underline is a vital usability and accessibility issue. Don't mess up
with it. A dotted bottom border is poor surrogate for a link underline and
will often be misunderstood as something else as a link indicator.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      07-04-2006
(E-Mail Removed) wrote:
>> What is "on" by default is text-decoration: underline; You turn
>> this off by text-decoration: none; That is one thing. The other
>> thing is the border. You turn this off by border: none; You need
>> to deal with these two things separately.
>>
>> --
>> dorayme

>
> This doesn't work either:
>
> a img {
>
> border-bottom-style:none;
> border-bottom-width:0px;
> text-decoration: none;
> border:none;
> }
>


The text-decoration is on the A element not the IMG, border on the IMG

A.without_u { text-decoration: none; }
A IMG { border: 0; }


<a class="without_u" href="whatever.html"><img src="some.jpg" alt="click
me"></a>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
forexad forexad is offline
Junior Member
Join Date: May 2011
Location: London
Posts: 1
 
      05-21-2011
Thank you guys. I was looking for the code for one hour and could not find. But here it is and it works. Thank you all, it helped me to sort the problem.
The other thing is when I removed attributes from one menu - it disappeared from the other as well (I got two menus on one page) and php for any reason changes all attributes on one page even when I assigned separate classess.


-------
The page I am working on now:
OptionFair: Money Web Trader
 
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
Image links underline not Řyvind Granberg HTML 3 10-18-2008 11:33 AM
Datagrid ButtonColumn - LinkButton -- how to remove underline? KatB ASP .Net 4 08-24-2007 06:46 AM
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 Gnomalarta Firefox 0 06-24-2003 07:39 PM



Advertisments