CSS Links question

Butters

Butters

Butters

Permabanned
Joined
22 Apr 2007
Posts
1,805
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?
 
I'm a bit rusty, and this is without testing it myself, but you solve it by utilising the cascading nature of CSS, like so:

#content a img {border-width: 0;}

"Any images enclosed within any link element that's within a div element that has an ID of 'content' will have no border."

I think you may also be able to specify it for each of the pseudo-classes, e.g:

#content a:hover img {border-width: 0;}
#content a:active img (border-width: 1px;}


[EDIT: Also, I'd be inclined to declare divs as 'div#content etc etc' rather than '#content etc etc', otherwise you may encounter specificity issues later on that'll have you tearing your hair out - especially if it's a big, complex site.]
 
Last edited:
simisker said:
#content a img {border-width: 0;}
"Any images enclosed within any link element that's within a div element that has an ID of 'content' will have no border."
Click to expand...

The above would actually target any images enclosed within an a element that is within ANY element with an ID of content.

tbh, I usually have img { border: 0;} in my standard css template as it's very seldom you actually want a border on a linked img and it's easier to specifiy a border when needed.
 
Tripnologist said:
The above would actually target any images enclosed within an a element that is within ANY element with an ID of content.

tbh, I usually have img { border: 0;} in my standard css template as it's very seldom you actually want a border on a linked img and it's easier to specifiy a border when needed.
Click to expand...
Yup, you're right! I'm so used to specifying the elements when making ID declarations in my own code that my mind automatically assumed it was there. Well spotted :)

And yes, the img declaration you've mentioned is - in nearly all cases - a good thing to have in your 'globals' section, along with padding/margin reset declarations et al.
 
Thanks guys although I'm not sure I still have this right

This is the top part of my CSS

Code: 
/* 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

Code: 
#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?
 
Well, what I actually have in my globals is the following:

Code: 
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
 
Tripnologist said:
Well, what I actually have in my globals is the following:

Code: 
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
Click to expand...

Thanks, still doesn't work though. :(
 
I notice you've not included a declaration for the 'a' alone - just the pseudo-classes [link, hover etc]. Try declaring #content a img {border-style: none;} before your pseudo-class declarations.
 
Ahhh, it's your a element that is getting the border. Not the image.
I always force my images to display:block in order to remove any padding underneath of them. This also covers up any link styling.

You can just give the a element a class and then give that class border-style: none !important;
Or just add display: block to img in your css. I find it so much easier to line things up consistantly.
 
Last edited:
*slaps forehead*

Got it... of course it'll have a border underneath it - it's still a link element, whether it's got text, an image or anything else within it!

The only thing you can do is specify a class for your link element that you apply to your HTML whenever there's an image to go in:

#content a.imageholder {border: none;}

And then you specify class="imageholder" within the relevant HTML, of course.

That's the only way to do it without conditional CSS, which to my knowledge doesn't exist yet. Or at least isn't in CSS2.

Jeez, I didn't know I was this rusty :D

[EDIT: Heh, just beaten to the post, there. Don't agree with the "display: block" global declaration, though; that creates unnecessary structural workarounds.]
 
Last edited:
Butters said:
Could you clarify what my HTML needs to read pls?
Thanks
Click to expand...

Code: 
<a target="_blank" href="http://www.microsoft.com/windows/products/windowsvista/features/details/mediacenter.mspx" class="noBorder">
  <img class="imageholder" 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 class="imageholder" alt="XP Media Center Home Page" src="images/xp.jpg"/>
</a>

Then in the css

Code: 
a.noBorder { border: none;}
 
That'll do it - though I don't see any need for the class="imageholder" within the <img> elements there; it's not in your original code, so I'm guessing it's the unremoved results of Trip's fault-finding. I did the same :D
 
simisker said:
That'll do it - though I don't see any need for the class="imageholder" within the <img> elements there; it's not in your original code, so I'm guessing it's the unremoved results of Trip's fault-finding. I did the same :D
Click to expand...

It's in the html on the page he posted the URL to but as you said, isn't needed.
 
Ah, Butters must have been the one doing the tinkering then - it definitely wasn't on the HTML that I downloaded.

Glad it's all sorted, anyway :)
 
Last edited:
ARGH WHAT THE HELL!

OK, so my HTML is now this (literally)

Code: 
<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:-

Code: 
#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

:(
 
Add any of the following back into your css.

I'm a little bored so I'll give you a few options.

Code: 
img { border:0;}

This will target all images and give them no border unless you override it with another class or id.


Code: 
a.noBorder img { border: 0;}

This will target any image that's within an 'a' element with a class of 'noBorder'.

Code: 
a img { border: 0;}

This will remove the border of any image that's within an 'a' element.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom