Re: [css-d] Image Background On Hover Isn't Working

2008-02-27 Thread Stephan Wehner
On Tue, Feb 26, 2008 at 7:20 PM, Elli Vizcaino [EMAIL PROTECTED] wrote:
 Hello,

  The logo NJ.com in the upper left in the #topnav div
  isn't swapping out with it's highlighted counterpart
  on hover.

Would this help?

http://www.tutorio.com/tutorial/pure-css-image-rollovers

Your logo wouldn't be an img but an a with background-image set in
the stylesheet (with and without hover pseudo-class)

I think there was something about hover-for-links works with IE 6, but
not hover-for-other-elements. So you might be lucky.

Stephan


-- 
Stephan Wehner

- http://stephan.sugarmotor.org
- http://www.thrackle.org
- http://www.buckmaster.ca
- http://www.trafficlife.com
- http://stephansmap.org
__
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/


[css-d] Image Background On Hover Isn't Working

2008-02-26 Thread Elli Vizcaino
Hello,

The logo NJ.com in the upper left in the #topnav div
isn't swapping out with it's highlighted counterpart
on hover. Not sure I set the CSS right but that's
the effect I'm aiming for. Also, the image doesn't
show up sometimes in Windows FF. Or at least it wasn't
showing earlier though it seems to be now. Any
suggestions on how I can get the images to swap out on
hover for the logo? 

http://e7flux.com/new/new.html


  

Looking for last minute shopping deals?  
Find them fast with Yahoo! Search.  
http://tools.search.yahoo.com/newsearch/category.php?category=shopping
__
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/


Re: [css-d] Image Background On Hover Isn't Working

2008-02-26 Thread Usamah M. Ali
On Wed, Feb 27, 2008 at 6:20 AM, Elli Vizcaino [EMAIL PROTECTED] wrote:
 Hello,

 The logo NJ.com in the upper left in the #topnav div
 isn't swapping out with it's highlighted counterpart
 on hover. Not sure I set the CSS right but that's
 the effect I'm aiming for. Also, the image doesn't
 show up sometimes in Windows FF. Or at least it wasn't
 showing earlier though it seems to be now. Any
 suggestions on how I can get the images to swap out on
 hover for the logo?

 http://e7flux.com/new/new.html


  
 
 Looking for last minute shopping deals?
 Find them fast with Yahoo! Search.  
 http://tools.search.yahoo.com/newsearch/category.php?category=shopping
 __
 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/


Hello,

A background image is just that, a _background_ image. You cannot swap
it with the actual image in the markup (i.e. the img element), IMO.

You know, when you encounter such problem when something so trivial
just doesn't work, it's always good to validate both the HTML and CSS.
At times a forgotten closing tag or a closing brace } can you make you
scratch your head for hours trying to solve an issue to no avail. By
looking at your code, you're mistakenly advancing the element's name
before the class selector for the sitelogo class, which is incorrect

You have: li a.sitelogo {...} [Incorrect]
It should be: li sitelogo.a and li sitelogo.a:hover respectivley!

Yet, to achieve the effect you're after, declare the logo image to li
a.sitelogo as well and add a transparent background-color to the img
element so it degrades gracefully.

Hey: I guess you're editing the page while I've been testing and
debugging it, and I can tell that brought me into the greatest
confusion I've had in a while. :D

Regards,
Usamah
__
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/