images have link line under it?

[helohelo]

Hi,
i have a stupid question:
with a css stylesheet I get text links with dotted underlines (thats what I want). But also my image links have dotted underlines. how to get rid of those last ones?

I use this style sheet for my links:

a:link {
color: #006699;
text-decoration: none;
border-bottom: 1px #ff9933 dotted;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;}

a:visited {
color: #006699;
text-decoration: none;
border-bottom: 1px #ff9933 dotted;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;}

a:hover {
color: #ff9933;
text-decoration: none;
border-bottom: 1px #ff9933 dotted;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;}

a:active {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
color: 006699;}
}

[grahamstewart]

Try...

a img { 
 border-style:none; 
} 

Also there is no need to repeat the CSS like that. :link, :visited and :active are all the same and :hover just has a different color so just use this..

a {  
color: #006699;  
text-decoration: none;  
border-bottom: 1px #ff9933 dotted;  
font-family: Verdana, Helvetica, Arial, sans-serif;  
font-size: 10px;}  
  
a:hover {  
color: #ff9933; 
} 

[helohelo]

thanks for your answer and clenaing the css code, but the extra css style did not worked out.
Do you know anything else?

[grahamstewart]

Oops sorry - my bad - I didn't read your code properly.

Probably the easiest way is to differniate between the underlined and non-underlined link styles with a class.

e.g.

This is a <a href="#">normal underlined link</a>. 
This a <a class="piclink" href="#"><img src="linkedpic.gif"></a> 

then in your css you can have this...

a { 
  color: #069; 
  text-decoration: none; 
  border-bottom: 1px #f93 dotted; 
  font: 10px Verdana, Helvetica, Arial, sans-serif; 
} 
a:hover { 
  color: #f93; 
} 
a.piclink { 
  border-style: none; 
} 

[helohelo]

Hi, And now I have the following:
i want to put 'normal bleu' links to one section of page.
I use the css below but this gives me normal bleu underline AND the dotted orange underline...

a:link {
color: #069;
text-decoration: none;
border-bottom: 1px #f93 dotted;
font: 10px Verdana, Helvetica, Arial, sans-serif;
}
a:hover {
color: #f93;
}
a.imagelink {
border-style: none;
}

a:hover.imagelink {
border-style: none;
}

#se-listing LI A:link {
COLOR: #0000FF; TEXT-DECORATION: underline
border-bottom: 0px #f dotted;
font: 12px Verdana, Helvetica, Arial, sans-serif;
}
#se-listing LI A:visited {
COLOR: #0000FF; TEXT-DECORATION: underline
border-bottom: 0px #f dotted;

}
#se-listing LI A:hover {
COLOR: #0000FF; TEXT-DECORATION: underline
border-bottom: 0px #f dotted;

}

[helohelo]

Hi, And now I have the following:
i want to put 'normal bleu' links to one section of page.
I use the css below but this gives me normal bleu underline AND the dotted orange underline...

I want the div #se-listing only with bleu underline (like normal)

Any idea?

a:link {
color: #069;
text-decoration: none;
border-bottom: 1px #f93 dotted;
font: 10px Verdana, Helvetica, Arial, sans-serif;
}
a:hover {
color: #f93;
}
a.imagelink {
border-style: none;
}

a:hover.imagelink {
border-style: none;
}

#se-listing LI A:link {
COLOR: #0000FF; TEXT-DECORATION: underline
border-bottom: 0px #f dotted;
font: 12px Verdana, Helvetica, Arial, sans-serif;
}
#se-listing LI A:visited {
COLOR: #0000FF; TEXT-DECORATION: underline
border-bottom: 0px #f dotted;

}
#se-listing LI A:hover {
COLOR: #0000FF; TEXT-DECORATION: underline
border-bottom: 0px #f dotted;

}

[Bonusbana]

you forgot ; after the text-decoration: underline

This is how I would write it:

a {
color: #069;
text-decoration: none;
border-bottom: 1px #f93 dotted;
font: 10px Verdana, Helvetica, Arial, sans-serif;
}

a:hover {
color: #f93;
}

a.imagelink {
border: none;
}

#se-listing li a {
color: #00f;
text-decoration: underline;
border: none;
font: 12px Verdana, Helvetica, Arial, sans-serif;
}