Hover effect help

[Shaolin]

Hey Guys

I am creating a menu, and when I hover on one of the links I want the whole background to change color within the "li" tag. The problem is it doesn't. Here is the result I get when I hover over the text:

http://img502.imageshack.us/img502/1012/58707565ks9.jpg

This is how I would ideally like it to look:

http://img502.imageshack.us/img502/3833/12157384mc4.jpg

Below is my code:

<div id="leftContent">
<ul>
<li><a href="#"><img src="images/left_menu/icons/icon_new.png" alt="New"/> Overview</a></li>
</ul>
</div>

CSS:
#leftContent {
padding : 15px 0 0 10px;
font-size : 13px;
}
#leftContent ul {
list-style: none;
}
#leftContent li {
padding-top : 3px;
}
#leftContent a {
text-decoration : none;
}
#leftContent a:hover {
background-color : #EEE;
}
#leftContent img {
border : 0;
}

[ray326]

See if this helps.

#leftContent a {
text-decoration : none;
display: block;
}

[WebJoel]

....http://img502.imageshack.us/img502/1012/58707565ks9.jpg

This is how I would ideally like it to look:

http://img502.imageshack.us/img502/3833/12157384mc4.jpg.... I don't see an discernable difference between these two images. Maybe if I looked at them side-by-side, but the difference is miniscule if it exists at all...
-Can you tell me what is different? :confused:

[Shaolin]

Thanks ray it worked a charm.

WebJoel, you need to calibrate your monitor ;) - I used a very light gray colour for the background.

I have another request, if you look at those images again you will notice the icon is alittle higher than the text, how can I move them down alittle?

[ray326]

You can either try various vertical-align options on the img or put the image into the background of the anchor. The latter gives you absolute control of the positioning.

[WebJoel]

...WebJoel, you need to calibrate your monitor ;) - I used a very light gray colour for the background... Probably true. but realize that in order for color/background-color of text to pass Accessibilty s. 508 validation, it needs to be a minimum of "100 points difference", preferably, more like 120-points, base-16 rgb. I don't do 'base-16 math' too well but when it comes to foreground/background colors that 'fail', -i know it when I see it. I am very certain that your background-color of this image is way below 100-points on base-16. -It is beyond my personal visual threshold at least. :p
Image color varience is of course, not covered by s.508 except for alt="" and any text or aural descriptives for other non-image user-agents.

Thanks for pointing out that there is a difference. It's unimportant though really... that a difference in fact exists is good enough for me to know. *I* just do not see it.. :)

[Shaolin]

Thanks for the replies guys, I have managed to optimise the menu to my liking! :D

WebJoel, I really should pay more attention to those standards shouldn't I? :D Don't worry though, I never intended to use that color, it was too faint. I was doing things quickly so I just typed in #EEE - Here is my updated version, tell me if you can see the blue in the background:

http://img375.imageshack.us/img375/5015/14356251zf5.png

BTW, how can I find out how many points my colors have ?

[WebJoel]

...BTW, how can I find out how many points my colors have ? Darn! -I was afraid you might ask that! :D
I used to have a bookmarked URL that, for Accessibility, would parse background/foreground colors of submitted content (background-color versus the text that is 'foregound'), and state the numerical difference. If I find this again, I'll share.
I just have issue with Accessibility and try to incorporate at least some s.508 as I've done a few sites targeting handicapped users as the intended audience.


ahh! -found one. The 'color wheel' when you hover-over, shows output. Anything under "100" begins to set problems for the stated forms of colorbliondness.
http://gmazzocato.altervista.org/colorwheel/wheel.php

[Shaolin]

I checked the blue background I used and it was 216 :cool: So I should be good to go! I will have to bookmark the link for future reference. Thanks!

[WebJoel]

I am not sure exactly how to use/read/understand this version of colorwheel... it says that 'background' if 125 or greater, "okay" and color ('foreground' that is) seems to have to be around 500 to register 'okay'. I mostly focus upon 'foreground', the color="" of text, and merely state a background-color to satisfy the validator (stating "color="" " throws an implicit need to also state a "background-color="" " for s.508). Since any page I work on with Accessibility concerns, I assume "white" or "#fff;", so it's a never-miss.

I recite "100 or greater" and "preferably 125 and above" as oft-quoted standards. But your image shows 216? Great. :)