Remove underline from image links (CSS)

[pepito3]

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

 

[Rik]

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,

 

[dorayme]

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.

 

[pepito3]

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.

This doesn't work either:

a img {

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

 

[Frank Olieu]

(e-mail address removed) wrote in @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)

 

[Jukka K. Korpela]

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.

 

[Jonathan N. Little]

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>

 

[forexad]

This code works

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