Links bottom border, but not on images (CSS)

Russinating

Russinating

Russinating

Soldato
Joined
27 Dec 2005
Posts
17,316
Location
Bristol
I'm currently using the border-bottom: 1px dashed #xxxxxx; effect for links. My question is how can I prevent this from being applied to images? I've tried using bottom-border: 0px; to no avail. There's probably a simple way using a variety of classes but I figured rather than me going about it completely the wrong way and making a botched workaround I'd ask for advice here.

Thanks in advance as always :)
 
have you tried

Code: 
img a{
border-bottom: 0;
}

or

Code: 
img
{  
border-style: none;
}
 
If you have

Code: 
a { border-bottom: 1px solid #FF0000; }

and you want to stop img elements within a tags from getting bottom borders, you need to use

Code: 
a img { border-bottom: 0px; }

(or "none" in place of "0px" - you may even just want to set the whole border to 0 rather than just the bottom-border)

Unless I'm being a complete spaz this morning, I'm sure
Code: 
img a { border-bottom: 0px; }
won't work because you never get an a tag within an img element :confused:;)
 
Post your CSS and we can have a proper look, otherwise we're all just going to be guessing at how your images are getting bottom-borders.
 
Code: 
a {
	color:#b0ddec;
	text-decoration:none;
	border-bottom: 1px dashed #0093c6;
}

a:hover {
	color: #0093c6;
	text-decoration: none;
        border: 0px;
	}
 
rghjones said:
Code: 
a {
    color:#b0ddec;
    text-decoration:none;
    border-bottom: 1px dashed #0093c6;
}

a:hover {
    color: #0093c6;
    text-decoration: none;
    border: 0px;
    }

a img {
    border: 0px !important;
}
Click to expand...

that doesn't work? if it doesn't there has to be more code we aren't seeing, such as the image has been given an idea of class which has a style?
 
Tried all the above. CSS now looks like:

Code: 
a {
	color:#b0ddec;
	text-decoration:none;
	border-bottom: 1px dashed #0093c6;
}

a:hover {
	color: #0093c6;
	text-decoration: none;
	border: 0px;
	}

a img {
        border: 0px !important;
}

img {
	border: 0px !important;
}

And still makes no difference. There's no more code relating to images or image/link borders :/.
 
give the a a class and add:
Code: 
a.image { text-decoration: none }

also you might as well just link us so we can help better..
 
change

PHP: 
a {
	color:#b0ddec;
	text-decoration:none;
	border-bottom: 1px dashed #0093c6;
}
to
PHP: 
a {
	color:#b0ddec;
	text-decoration:none;
	border-bottom: 1px dashed #ff0000;
}

#ff00000 is bright red so if the image border color changes to red you know the styling is coming from this, if not then it is coming from somewhere else. you haven't accidentally given the image a class or id which also has a styling?
 
Dj_Jestar said:
give the a a class and add:
Code: 
a.image { text-decoration: none }
Click to expand...
Jestar's on the money again: You have to declare a class specifically for "<a> elements that contain an <img>", as there's no way to do this using CSS's limited selector logic.

Note that this is different from
Code: 
a img { text-decoration: none }
Which styles images within an <a> element, but not the border-creating <a> itself.
 
Still doesn't work with Jestar's advice. No other classes applied to the images and the image dash colour changes when I change the a colour as suggested above ^^.

Site is here. CSS file is here.
 
Mammalian said:
you silly sausage, you have put "a.img", not "a img"
Click to expand...

That's what DJ Jetstar told me to do? :confused:

So is the only way of fixing it to add 'class="image"' to every image on the site? Will try anyway.

edit: Ok, works, but having to add a class to every linked image is a bit of a pita!
 
Last edited:
rghjones said:
That's what DJ Jetstar told me to do? :confused:

So is the only way of fixing it to add 'class="image"' to every image on the site? Will try anyway.
Click to expand...

i tihnk you have read what jester said wrong. instead, he said change it so a.image and put class='image' to the a links around the image, which is basically what i'm saying to do.

but anyway from what i can see yes this is the only fix :( feels like there should be a better way of doing though so if you find one do say.
 
Well at least it works! Having some problems getting borders to display on non-linked images when needed now but that's no biggy so can't be bothered to sort that out right now.

Thanks for all your help guys.
 
There is no ascendant selector in CSS, unfortunately. It would be fantastic if they had one.

I've just viewed your page, and by simply adding:
Code: 
a img { border: none; }
in firebug has removed the border.
 
You must log in or register to reply here.
Back
Top Bottom