PDA

View Full Version : CSS - no border on image link hover

markn33dshelp1
08-20-2006, 09:06 PM
Hi, I have a CSS file that makes links get a bottom border color:

a:hover {
border-bottom: 1px solid #ff0000;
}


I want this to be excluded for image links, but I cannot use classes. This should work below, but it DOESN'T:

a:hover img {
border: 0;
}

That means any 'img' tag found within an 'a' tag should have all borders be 0. If I swap the 0 to none, or to 0px, it still doesn't work. This makes no sense that it doesn't work. Why? This boggles me. I cannot use classes. I'm actually making a theme for a WordPress blog, so I need to very general -- no classes.
Wylie
08-20-2006, 09:56 PM
try to throw ":hover" away from your second code.
markn33dshelp1
08-20-2006, 09:56 PM
That still does not work. :(
markn33dshelp1
08-20-2006, 09:59 PM
None of these work, and they should all work:


a img {
border: 0;
}

a img {
border: 0px;
}

a img {
border: none;
}


Even making it more specific doesn't work:


a img {
border-bottom: 0;
}

a img {
border-bottom: 0px;
}

a img {
border-bottom: none;
}
Wylie
08-20-2006, 10:14 PM
Do your CSS have the other setting for <a> tag? Because it influences all <a> tag including link with <img> tag. Your first code is a good example, in makes every link with a red underline when "onMouseOver".
Graft-Creative
08-20-2006, 11:23 PM
It may be a specificity issue: i.e. you may need to specify the styles in relation to a specific antecendant. Could you post you're entire code, or even better a link to your site?

Kind regards,

Gary
Arbitrator
08-21-2006, 02:42 AM
Your CSS might be being overridden by other CSS. Try a img {border: none !important;}. When using :hover I would also test in a non-Internet Explorer browser if you haven't already since IE6 does doesn't fully support that pseudo-class.
markn33dshelp1
08-21-2006, 07:47 PM
I made a test page to make it simple to follow. CSS is internal.
http://www.firebreaksice.com/test.html
Arbitrator
08-21-2006, 11:00 PM
The reason the above code isn't working is because all of that code applies to the image. The border is being applied to the anchor element (on hover), not the image element so you will have to target the anchor element specifically. I took another look at CSS 2 and 3 selectors and found that none of them will allow you to select a parent element so you're going to have to target the anchor element.

You could cover the anchor border up with an image border that matches a solid color background by using negative margins on the image but this would require the browser to support the :hover pseudo-class on non-anchor elements and probably cause positional problems. Alternatively, you could use an attribute selector to target anchors that point to a certain URL without adding markup for classes or IDs though the browser would again have to support that selector. Internet Explorer essentially kills both of those possibilities.

The best bet is to probably assign a class to the anchor containing the image and disable the border for that class of anchors.
rmedek
08-21-2006, 11:07 PM
Or, if it's possible, making the image a block-level element will get rid of the anchor styling:


img {
border: 0;
display: block;
}


This will only work if you don't plan on having inline images, obviously… if you plan to float most of your images or center them then it will work fine.
harbingerOTV
08-22-2006, 02:47 AM
well if you can't use classes and the displaying block of the links kills your layout, you can try faking it.




<html>
<head>
<style>

/* make all links get underline on hover */
a:hover {
background: url(line.gif) bottom left repeat-x;
}

/* no default underline */
a { text-decoration:none;
}

/* all images have 0 border */
img {
border:0;
}

a img {
margin-bottom: -4px;
}
body {
line-height: 26px;
}
</style>
</head>
<body>
<a href="http://www.example.com"><img src="http://www.allthingsmarked.com/wp-content/uploads/2006/08/xpi-url2.jpg" /></a>
<br />
<br />
<a href="http://www.example.org">example.org</a>
<br />
<br />
<p style="width: 180px;">
a block of text to see how the <a href="#"><img src="box.gif" /></a> underline works when used with sentences and stuff.
</p>
</body>
</html>


the "line.gif" is just a 1x1 red gif. it's sits a little closer to the text on the links than a border but it doesnt show on the image links as the image covers it up.

FF and IE like it so far. Opera doesn't. I then gave a negative bottom margin to pull the underline under the image. that affects the line height and closes everything vertically by 4px so I readjusted the line height to offset it.
markn33dshelp1
08-22-2006, 03:49 AM
Thank you all for your help. This was a weird issue, and after Arbitrator's explanation, it makes sense. I ended up going with rmedek's choice of using "display: block"

So far it has not caused any problems for my layout.
Here it is in action:

http://www.allthingsmarked.com/2006/08/21/how-to-quickly-install-firefox-addons/

Notice how only image links do not get an underline on hover, all other links do.

Thanks
rmedek
08-22-2006, 04:56 AM
Oh man. NOT COOL.

http://designbyfire.com

Do yourself a favor and change this layout before you get nailed by the web design community.
Wylie
08-22-2006, 06:00 AM
The text on your page is very hard to read because the text alway disappear.
Ranger56
08-22-2006, 06:05 AM
Oh man. NOT COOL.

http://designbyfire.com

Do yourself a favor and change this layout before you get nailed by the web design community.

Dang, stealing layouts sucks.
markn33dshelp1
08-22-2006, 06:26 AM
It's funny you say that. I actually contacted the author of DxF about creating a layout based off his. He was OK with it and gave me the go-ahead. Don't judge too quickly.
rmedek
08-22-2006, 08:17 AM
Sorry. :o Had to point it out, though… just in case. :)