How to remove the underline of the Image

sfs00784 · June 21st, 2005, 11:05 PM

a{
border-bottom:dotted 1px #990000;
color:#990000;
text-decoration:none
}
a:active,a:focus,a:hover{
border-bottom:solid #333;
color:#333
}

/* The following code seems no use to remove the underline *

a:link img,a:visited img{
border-bottom:0px;
border-style:none
}
a img {color: black} /* The only way to hide the border in NS 4.x */

Hope somebody can help me, thank you.

|:|KUNG|:|

Imar · June 22nd, 2005, 01:20 AM

Hi there,

Try this:

img
{
border: 0;
}

the border is on the image; not the a....

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

sfs00784 · June 22nd, 2005, 07:42 AM

Sorry to tell you that is doesn't work.

If I remove the following code,
border-bottom:dotted 1px #990000;
text-decoration:none

the following work correctly:
a:link img,a:visited img{
border-bottom:0px;
border-style:none
}
a img {color: black} /* The only way to hide the border in NS 4.x */

So I think that it is the problem of
border-bottom:dotted 1px #990000;

However, I don't know how to deal with this problem.
Hope somebody can help me.
Thanks in advance.

|:|KUNG|:|

Imar · June 22nd, 2005, 12:35 PM

I think you missed my point. There is no need to use this:

a:link img

That would try to change images within an <a> tag. However, the img selector I showed you earlier removes the border from any image within an <a> tag, so there is no need to do that again.

Look at the following example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Untitled Document</title>
  <style type="text/css">
  img 
  {
    border: none;
  }
  </style>
</head>
<body>
  <a href="#"><img src="Images/SomeImage.gif"></a>
</body>
</html>

You'll see no border around the image.
I believe in Netscape 4 there is no other way to diable the border than to use the border="0" attribute.

Your code, border: black; is not removing the border; it's setting it to black so you no longer see it.... ;)

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

sfs00784 · June 24th, 2005, 10:06 PM

To have a look, thank you.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-HK" lang="zh-HK">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="StyleSheets/xkboard.css" />
<style type="text/css">
<!--
a{
    border-bottom: dotted 1px #990000;
    color: #990000;
    text-decoration: none
}

a:active,a:focus,a:hover{
    border-bottom: solid #333;
    color: #333
}

body{
    color: #404040;
    font-family: Arial,Helvetica,sans-serif;
    margin: 0
}

body, html,p{
    padding: 0
}

img{
    border: 0px
}
-->
</style>
</head>

<body>

<div id="ads">
  <a href="http://validator.w3.org/check?uri=referer" shape="rect"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.knetbbs.com/Skin/klite/StyleSheets/xkboard.css" shape="rect"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" /></a>
</div>

</body>
</html>

|:|KUNG|:|

richard.york · June 24th, 2005, 10:29 PM

It looks like you have a specificity issue.

The bottom border under the image is because of the rule for the links, not the image. The following...

img {
   border: none;
}

...works to remove the default border from the image, but you still have a bottom border because of the link styles.

So, you need to add more styles.

For instance:

div#ads a {
    border: none;
}

That's more specific than a:active, etc, because there is an id selector present, it will win over those rules and remove the border. Of course you only want to target the images with links, so you might invent some sort of wrapping element just to go around images with links. What I normally do is this:

<p class='caption'>
    <a href='#'><img src='' alt='' /></a>
</p>

That leaves me an option to style images with links, and images with captions. Just my personal preference though. Unfortunately there is no way to select an element's parent in CSS, so there really isn't a better way of doing it.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

sfs00784 · June 25th, 2005, 11:10 PM

The problem is solved, thank you very much for your help.

Simplified Chinese:
http://www.knetbbs.com/

A Valid XHTML 1.0 Strict & CSS 2.0 ASP.NET 1.1 Forum.
English Version will release in July or August.

|:|KUNG|:|