CSS Links question

[Butters]

Hi all,

I have set up a div id called content. within this are two more div IDs (normally) called #leftcol and #rightcol.

Now, under #content, I've also named #content a:link and hover and active, etc, etc.

Basically, any link I provide now within the content div takes on the form of the above CSS.

The problem comes in that I want to use two images as links. When I insert the images they too take on the formatting defined by the CSS. (i have a small dotted border under each link).

How can I tell these images to be links without any of the formatting?

 

[Butters]

Thanks guys although I'm not sure I still have this right

This is the top part of my CSS

/* CSS Document */

body	{
	background-color:#f3f3f3;
	background-repeat:repeat;
	}

img	{
	border: 0;
	}

But the images within the Div ID still have the dotted border under them which is defined later on in the CSS as so

#content{
	float:left;
	width:700px;
	}

#content a:link{	
	color: #00529B;
	border-bottom: 1px dotted #00529B;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	text-decoration:none;
	}	

#content a:visited{	
	color: #00529B;
	border-bottom: 1px dotted #00529B;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	text-decoration:none;
	}	

#content a:hover{	
	color: #00529B;
	border-bottom: 1px dotted #00529B;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	text-decoration:none;
	}		
	
#content a:active{	
	color: #00529B;
	border-bottom: 1px dotted #00529B;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	text-decoration:none;
	}

Any ideas?

 

[Butters]

Well, what I actually have in my globals is the following:

img	{  
  border-style: none;
  padding: 0;
  margin: 0;
  }

It's just been so long since I put that in there, that I was wondering why I didn't just put in border: 0; Perhaps that was why.. lol

Thanks, still doesn't work though.

 

[Butters]

Still doesn't work.

Perhaps it's my crap CSS?

Can someone take a look?

www.bournetechnology.co.uk/pands.php

CSS is available from the route (screen.css)

Thanks

 

[Butters]

Could you clarify what my HTML needs to read pls?

Thanks

 

[Butters]

ARGH WHAT THE HELL!

OK, so my HTML is now this (literally)

<a target="_blank" href="http://www.microsoft.com/windows/products/windowsvista/features/details/mediacenter.mspx" 

class="noBorder">
  <img alt="Vista Media Center Home Page" src="images/vista.jpg" />
</a>

<a target="_blank" href="http://www.microsoft.com/windowsxp/mediacenter/default.mspx" class="noBorder">
  <img alt="XP Media Center Home Page" src="images/xp.jpg"/>
</a>

and that is WITHIN the "rightcol" div

And my CSS is this:-

#content{
	float:left;
	width:700px;
	}

a.noBorder { 
	border: none;
	}

#content a:link{	
	color: #00529B;
	border-bottom: 1px dotted #00529B;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	text-decoration:none;
	}	

#content a:visited{	
	color: #00529B;
	border-bottom: 1px dotted #00529B;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	text-decoration:none;
	}	

#content a:hover{	
	color: #00529B;
	border-bottom: 1px dotted #00529B;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	text-decoration:none;
	}		
	
#content a:active{	
	color: #00529B;
	border-bottom: 1px dotted #00529B;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	text-decoration:none;
	}

and I get this!

www.bournetechnology.co.uk/pands.php

 

[Butters]

Just tried all 3,

I still have my dotted border at the bottom I'm afraid.



I do however, appreciate all your help

 

[Butters]

Thanks gents, both work although I have chosen to use Trips.

Thanks again