Eliminating background color on img link hover

[Nikolaos Giannopoulos]

If I have simplified html (I have removed height, weight, alt, etc...
attributes to simplify the example) such as:

<div id="header">
<a href="blah.html "><img src="img/blah.jpg"></a>
</div>

and the following CSS rule to apply a background color to text links on
hover:

a:hover {color: #007ebd; background-color: #ebf4ff;}

then I notice a small background coloring at the bottom of the above
image when I hover over it.

The following rule fixes the problem:

#header a:hover {color: #000000; background-color: transparent;}
The question is: Is there a single rule that could elminate this
background effect for all links that contain images? i.e.

a:hover img {color: #000000; background-color: transparent;}

almost cuts it but obviously doesn't work (since it sets the background
image of the img not the anchor on hover).

It doesn't seem possible but who knows....

Thanks,

--Nikolaos

[Els]

Nikolaos Giannopoulos wrote:

If I have simplified html (I have removed height, weight, alt, etc...
attributes to simplify the example) such as:

<div id="header">
<a href="blah.html "><img src="img/blah.jpg"></a>
</div>

and the following CSS rule to apply a background color to text links on
hover:

a:hover {color: #007ebd; background-color: #ebf4ff;}

then I notice a small background coloring at the bottom of the above
image when I hover over it.

The following rule fixes the problem:

#header a:hover {color: #000000; background-color: transparent;}
The question is: Is there a single rule that could elminate this
background effect for all links that contain images? i.e.

a:hover img {color: #000000; background-color: transparent;}

almost cuts it but obviously doesn't work (since it sets the background
image of the img not the anchor on hover).

It doesn't seem possible but who knows....

Maybe a:hover img {color:transpar ent; background-color:
transparent; text-decoration:none ;} will do the trick?
You didn't provide a url, and with the code you gave, I
couldn't reproduce the effect...
--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

[Brian]

Nikolaos Giannopoulos wrote:

If I have simplified html (I have removed height, weight, alt, etc...
attributes to simplify the example) such as:

<div id="header">
<a href="blah.html "><img src="img/blah.jpg"></a>
</div>

and the following CSS rule to apply a background color to text links on
hover:

a:hover {color: #007ebd; background-color: #ebf4ff;}

then I notice a small background coloring at the bottom of the above
image when I hover over it.

The question is: Is there a single rule that could elminate this
background effect for all links that contain images?

I ran into this, too. To solve it, I defined the image as block.
Since I was floating it left, explicitly assigning display: block
did not otherwise affect the layout. I just retested, Moz 1.3/Win,
and that makes the difference. If you are not floating the image,
this solution will not work for you.
--
Brian
follow the directions in my address to email me

[Henri Sivonen]

In article <YZ************ ********@magma. ca>,
Nikolaos Giannopoulos <ni******@solma r.ca> wrote:

then I notice a small background coloring at the bottom of the above
image when I hover over it. .... The question is: Is there a single rule that could elminate this
background effect for all links that contain images? i.e.

http://mozilla.org/docs/web-developer/faq.html#gaps

--
Henri Sivonen
hs******@iki.fi
http://www.iki.fi/hsivonen/
Mozilla Web Author FAQ: http://mozilla.org/docs/web-developer/faq.html

[Nikolaos Giannopoulos]

Nikolaos Giannopoulos wrote:

The question is: Is there a single rule that could elminate this
background effect for all links that contain images? i.e.

Thanks to all for their feedback. I'll respond to everyone here and
include online test cases "when hover over the solmar logo":
http://solmar.ca/temp5/test0.html
Suggestion: The default do nothing explicitly case
+ Moz 1.3 - faint blue border appears underneath logo
+ IE6 - footer jumps about the size of the logo height (bizarre)
+ IE5 - no problems appear

Suggestion: The one that I presented (found on the net)
http://solmar.ca/temp5/test1.html
+ Moz 1.3, IE6, IE5 - no problems appear

Great except I was looking for a simpler rule <<

Suggestion: from Henri and Brian - use display: block
NOTE: Brian explicitly stated that this does not work with non-floated
elements but since Henri's link didn't explicitly talk about non-floated
elements I decided to test it out anyways.
http://solmar.ca/temp5/test2.html
+ Moz 1.3, IE6, IE5 - faint blue box appears to the far right of logo
between software box and right hand column - may need to widen browser
window to see it. Interestingly enough although this did help in the
vertical sizing of the logo as the link explains it produced an ugly
side effect as well.

Suggestion: Els' first suggestion
http://solmar.ca/temp5/test3.html
+ *Same* results as default case - and as one might guess since the img
would be what would be styled on the hover not the anchor itself which
is responsible for the faint background effect.

Suggestion: Els' second suggestion
http://solmar.ca/temp5/test4.html
+ *Same* results as default case - same as test3.

So far the only thing that works reliably is setting the background of
the anchor on hover to transparent for each case that arises. The
block:display may work for floated elements (I'm not sure and I didn't
bother testing this case).

If anyone has any other ideas I can quickly try them.... ;-)

Thanks again,

--Nikolaos

PS all browser versions tested above on win boxes.

[Brian]

Nikolaos Giannopoulos wrote:

The question is: Is there a single rule that could elminate this
background effect for all links that contain images? i.e.
http://solmar.ca/temp5/test0.html
Suggestion: The default do nothing explicitly case
+ Moz 1.3 - faint blue border appears underneath logo

I cannot replicate this, Moz 1.3/Win2k.
Suggestion: from Henri and Brian - use display: block
NOTE: Brian explicitly stated that this does not work with non-floated
elements but since Henri's link didn't explicitly talk about non-floated
elements I decided to test it out anyways.
No, it works fine with non-floated elements. What I meant was that,
since I had already floated the container element on my page,
declaring the image display: block did not change the layout. I was
not sure if you could declare your image as block without affecting
the layout in other (undesirable) ways.
http://solmar.ca/temp5/test2.html
+ Moz 1.3, IE6, IE5 - faint blue box appears to the far right of logo
between software box and right hand column - may need to widen browser
window to see it. Interestingly enough although this did help in the
vertical sizing of the logo as the link explains it produced an ugly
side effect as well.

Cannot replicate the behavior you report, neither in Moz 1.3/Win2k nor
in MSIE 5.0/Win2k.

Unrelated: your design creates a font size smaller than what I have
chosen. The absolute positioning of the right hand links overlaps the
rest of page at narrow widths.

--
Brian
follow the directions in my address to email me

[Nikolaos Giannopoulos]

Brian wrote:

Nikolaos Giannopoulos wrote:

http://solmar.ca/temp5/test0.html
Suggestion: The default do nothing explicitly case
+ Moz 1.3 - faint blue border appears underneath logo
I cannot replicate this, Moz 1.3/Win2k.

I see this on Moz 1.3/NT4. Can anyone else who has Moz 1.3 confirm this
behaviour exists or doesn't exist?

No, it works fine with non-floated elements. What I meant was that,
since I had already floated the container element on my page, declaring
the image display: block did not change the layout. I was not sure if
you could declare your image as block without affecting the layout in
other (undesirable) ways.

Sorry. I got it now. BTW do you see the problem that I described when
block was used?

http://solmar.ca/temp5/test2.html
+ Moz 1.3, IE6, IE5 - faint blue box appears to the far right of logo
between software box and right hand column - may need to widen browser
window to see it.

Cannot replicate the behavior you report, neither in Moz 1.3/Win2k nor
in MSIE 5.0/Win2k.

Once again can anyone else confirm or deny this?

Do you by any chance utilize a user style sheet that may be masking this
effect - I don't know for certain this is just a wild guess.

Anyone else with Moz 1.3 care to help out here.

Thanks,

--Nikolaos