Just wondering if someone could help me with something that I am pretty sure should be really really easy to do.
I am trying to make all my text links on a page not use the standard text-decoration: underline style by making it text-decoration: none instead and then on a:hover I am providing a border-bottom: 3px solid #15c100; declaration instead. This does work fine but if I now have an image that has a link surrounding it I get the green border underneath the image. I still want the image to be a link but don’t want the line to be there.
I tried adding in :
a img { border-style: none; text-decoration: none; }
but it doesn’t seem to want to work. Can anyone see from the code below (very simple code!) where I am going wrong. I think I must be going mad as this should be really simple but I reckon that I have probably stared at it for way too long now and so I am just missing the obvious answer.
<!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"> <head> <meta http-equiv="content-type" content="text/html charset=utf-8" /> <title></title> <style type="text/css"> <!-- html { font-size: 62.5%; }
Yup was one of the first things I tried. Seems that the only thing that will kill off the line is what I posted above though as it is actually the a which is causing the problem and not the image. As I have an over-riding style for all a links then this is what it is looking at. Giving the a link a class where I don’t want this to happen gets things going the way I want though so I’m happy.
Nope tried that too The only way I can get it to work is to place a class on the a href and take off the inherited styles. Did seem a little weird but really the only way I can get it to work.
If I read correctly what you’re saying, the problem is when you hover on the image that is linked you’re getting the bottom border on the image, and that isn’t what you want. Perhaps I’m missing something, but I don’t see where anyone mentioned setting the properties on the hover, such as:
a:hover img { border:none; }
If that didn’t work, then I’d say have a class that you use on images, which I think you said was the solution you’re currently using.
Okay I have a fix, at least for now unless this is a bad thing to do?
CSS
.image-link { border: none !important; }
Hey Mark…
That’s probably the only way to do it—to apply a seperate class to the anchor. The issue here is that the image doesn’t have the border, the anchor does.
In your CSS, you’re adding a border to the <a> tag. The text/image inside the <a></a> tag isn’t what has the border. So you can’t get rid of it by doing
a img { border:none; }
The only way would be to get rid of the original border on the anchor, as you have done.
Yep that’s what I thought and the reason for the class on the a link that I found out
a:hover img again won’t work for the very reasons mentioned above. The reason it took me a while to figure it out was that I was looking at the hierarchy of what I was trying to do incorrectly. When you are up late at night and seeing these things then it does indeed look like a img but it most definitely isn’t as it is the a link which is doing it so a class is the only way of getting rid of it.
This got rid of the line under the graphic, but when you go to click on it, ooops, there is the line and the background color since my text links have that.
So now, how to get rid of a hovers and hover badkgrounds? :-O
Can you post an example page? If I understand what you need correctly, this should get rid of underlines and backgrounds on hover and active (during the click):
Can you post an example page? If I understand what you need correctly, this should get rid of underlines and backgrounds on hover and active (during the click):
In all seriousness though. Do you have a link to the page showing the problem at all. Would be much easier if we have something to work with. It may be the outline property that you need to set different to get it working the way you want but if you can provide a link then that would help a lot. If you can’t provide a link to the actual site then you can always copy-paste the code to a new html file and upload that somewhere else instead just so that we can get a look.
Then you can manipulate the background with CSS. It’d be easier to help if you had an example of the page though, as I’m a little unsure of what your problem actually is.
It might be that you just need to do what Mark did above if the problem you’re having is to do with hover state on an image.
But yep, that’d work fine. Though if you’re using it more than once on a page you should change it to a class (<div class=“img”> rather than <div id=“img”>).
Perfect explanation.
