Well, I think I've found a solution to the IE issue with the
background-color on hover. I replaced:
#main a:hover img {
background-color: transparent;
}
with...
#main a:hover img {
background-color: #fdf5e6;
}
It matches the background color. Works :-)
But I've discovered another issue in FF3+ not directly related but along
the same lines. To assist in seeing the issue I've changed the
background-color to #f00. The problem URL is:
http://2bitsnpieces.com/privacy.php
The linked candy images on the left (#sidebar within #main) respond to
the #main a:hover img fine in both FF3+ and IE7. But the validation
images at the bottom of the #content (within #main) act strangely in
FF. If you hover over either image, you get the background color from
#main a:hover img (which is red right now) on the right side of the
image, which I assume is part of the image's transparency. But notice
the underneath the bottom of the image. It is the blue I'm using for
the text links' background color.
I've tried several things with border and text-decoration, but nothing
seems to change it. I thought that it was maybe a padding issue. My
only image padding is in the #logo which is top and #sidebar which is
bottom. Neither should affect the images in #content.
Again this is only slightly related. BTW, Bruno mentioned using a class
for an anchor to correct the issue. I've tried that but must not be
writing it correctly. I couldn't seem to make it work.
Thanks for any help,
Duane
On 5/16/2011 8:25 PM, Duane Nelson wrote:
Good evening.
It appears right in FF3+, but I have a slight issue with IE7 (I
haven't checked IE8 yet.). So...
URL: http://2bitsnpieces.com
Problem: I'm using a colored background for my a:hover. I used the
following css code to remove the colored background from linked img:
#main a:link {
color: #006400;
text-decoration: none;
}
#main a:visited {
color: #006400;
text-decoration: none;
}
#footer a:link {
color: #32cd32;
text-decoration: none;
}
#footer a:visited {
color: #32cd32;
text-decoration: none;
}
#main a:hover, #footer a:hover {
color: #fff312;
background-color: #000084;
text-decoration: none;
}
#main a:hover img {
background-color: transparent;
}
What am I missing?
Thank you,
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
