SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    rollover on li uses wrong image in IE6

    I have this menu that changes images on rollover and if theres an active class in the li.

    All that works fine in Firefox/Opera and IE7. But in IE6 the active list item takes the image from on of the others links. In the example I made there are only 2 links, but you will see what the problem is if you compare IE7 to IE6

    IE6 seems to ignore the active class thats placed in the li, and instead it just takes the background image from other links.

    Why does this happend, and how would I be able to fix it?

    http://www.tijmensmit.com/dev/rollover.html
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE6 doesn't understand the pseudo-classes on other elements than the a element, so you would have to style that instead of the list element (a:active, a:hover, etc..), or you could use some Javascript to make it work in IE.
    Dan G
    Marketing Strategist & Consultant

  3. #3
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does uses Javascript to make it work

    The rollover works in IE6, its just that for no reason it shows the wrong image for the li that has the active class attached to it.

    Code:
      behavior: url(csshover.htc);
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

  4. #4
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, didn't see this - checked it only quickly with Firefox since IE behaves quite oddly here on my PC.

    Have you tried to use the CSS sprites approach? Maybe that helps.
    Dan G
    Marketing Strategist & Consultant

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is that IE6 doesn't understand concatenated classes using dot notation and gets them all mixed up completely. It matches all of them and therefore you can't use this method.

    Code:
    li.ambrazin.active-product
    You will simply have to use unique classes for each one.

    Code:
    li.active-product {styles etc...}
    li.active-product2 {styles etc...}
    Code:
    <li class="ambrazin active-product"
    and then when needed :
    Code:
    <li class="extra-forte active-product2"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •