1. #1
    grooverider's Avatar
    Registered
    08/07/03
    Location
    Leuven
    Posts
    328
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0

    xHTML/CSS: IE6 probleem met hover

    Ik heb een pagina met een reeks van links op, en mijn bedoeling was een preview image van de pagina te tonen (op een vaste plaats) wanneer je over een link hovert.
    Dat werkende krijgen ging vrij vlot:
    css:
    Code:
    #links a img {
      display: none;
    }
    
    #links a:hover img {
      display: block;
      position: absolute;
      right: -200px;
      top: 200px;
      border: 1px solid #e1e1e6;
    }
    html:
    HTML Code:
    <div id="links">
    <ul>
    <li><a href="#">link<img ... /></a></li>
    <li><a href="#">link<img ... /></a></li>
    <li><a href="#">link<img ... /></a></li>
    </ul>
    </div>
    in FF werkt alles zoals ik het in mijn gedachten had (ie7 ook dacht ik) maar zoals gewoonlijk doet ie6 weer moeilijk. Na het hoveren van een link, keert de img precies niet terug naar de gewone stand (display: none) maar blijft gehoverd. Wanneer je dan over een andere link hovert, komt deze img er wel boven, maar blijft ook gewoon staan wanneer je van de link weg gaat. Iemand een idee hoe ik dit degelijk zou kunnen doen werken op ie6, liefst zonder javascript oid..

    thx

    link
    no votes  

  2. #2
    Bram's Avatar
    Registered
    01/08/02
    Location
    Gent
    Posts
    9,675
    iTrader
    3 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/361
    geen idee of het zou helpen, maar je zou mss eens de CSS van htmldog's suckerfish drop downs kunnen bekijken, die werken op hetzelfde principe, alleen laten ze een ul verschijnen, ipv een img.
    daar wordt er echter wel met een beetje js gewerkt (dom scripting) om idd de problemen die IE6 geeft weg te werken (geloof wel dat iets te maken heeft met het feit dat IE6 geen hover ondersteunt op li's)
    If I had a nickel for every time someone told me that my idea for melting down coins to make a giant robotic parrot was a bad idea, I would have one kicka$$ giant robotic parrot.
    no votes  

  3. #3
    RpR's Avatar
    Registered
    26/03/03
    Location
    Dendermonde
    Posts
    5,472
    iTrader
    28 (100%)
    Mentioned
    0 Post(s)
    Reputation
    1/8
    Zonder javascript gaat het niet lukken. Ook zou ik hier persoonlijk geen moeite insteken. Wie nog met IE 6 surft vraagt om problemen. Ik ken 5 webpagina codes die pc naar de zak helpen als je ze met IE 6 opent.
    no votes  

  4. #4
    Bram's Avatar
    Registered
    01/08/02
    Location
    Gent
    Posts
    9,675
    iTrader
    3 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/361
    Quote Originally Posted by RpR View Post
    This quote is hidden because you are ignoring this member. Show
    Zonder javascript gaat het niet lukken. Ook zou ik hier persoonlijk geen moeite insteken. Wie nog met IE 6 surft vraagt om problemen. Ik ken 5 webpagina codes die pc naar de zak helpen als je ze met IE 6 opent.
    jammer genoeg beseft een 70% van het surfende publiek dat niet... dus zolang IE7 niet geintegreerd is, streven we ernaar om onze sites wel IE6 compatibel te maken...

    Maar TS, ik vrees inderdaad dat je het niet gaat lukken zonder een beetje js...
    If I had a nickel for every time someone told me that my idea for melting down coins to make a giant robotic parrot was a bad idea, I would have one kicka$$ giant robotic parrot.
    no votes  

  5. #5
    grooverider's Avatar
    Registered
    08/07/03
    Location
    Leuven
    Posts
    328
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    suckerfish dropdowns gebruikt ook javascript voor te kunnen werken op IE6, omdat ie6 alleen hover op a elementen ondersteunt (en volgens de standaarden moet het mogelijk zijn elk object te hoveren, browsers zoals FF kunnen dit wel aan).
    Maar aangezien het bij mij gewoon gaat over a:hover dacht ik wel dat het zou lukken ... niet dus.
    Wel jammer dat de eerste manier die ik had gevonden niet valideert, want deze werkt wel perfect:
    HTML Code:
    <div id="links">
    <ul>
    <li><a href="#">link<div class="linkImg"><img ... /></div></a></li>
    <li><a href="#">link<div class="linkImg"><img ... /></div></a></li>
    <li><a href="#">link<div class="linkImg"><img ... /></div></a></li>
    </ul>
    </div>
    en dan de .linkImg stylen ipv de image zelf. Geen idee waarom dit wel werkt, maar gewoon stom dat het niet valideert (er mogen blijkbaar geen block elementen zoals div in een inline element zoals a staan)
    no votes  

  6. #6
    Bram's Avatar
    Registered
    01/08/02
    Location
    Gent
    Posts
    9,675
    iTrader
    3 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/361
    op htmldog hebben ze ondertss een algemeen js'je ontwikkelt voor die hovers te simuleren in IE6, mss moet ge da eens opzoeken... en block elements in inline elementen... toch maar logisch da da "nie mag"? nee?
    If I had a nickel for every time someone told me that my idea for melting down coins to make a giant robotic parrot was a bad idea, I would have one kicka$$ giant robotic parrot.
    no votes  

  7. #7
    L0|2|23's Avatar
    Registered
    09/08/02
    Location
    Mortsel
    Posts
    605
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Quote Originally Posted by RpR View Post
    This quote is hidden because you are ignoring this member. Show
    Zonder javascript gaat het niet lukken. Ook zou ik hier persoonlijk geen moeite insteken. Wie nog met IE 6 surft vraagt om problemen. Ik ken 5 webpagina codes die pc naar de zak helpen als je ze met IE 6 opent.
    Zo zijn er ook genoeg voor FF en Opera. IE6 behelst nog steeds (bij benadering) 37% van alle clients, en dus ook een niet te onderschatten hoeveelheid potentiƫle bezoekers.
    no votes  

Posting Permissions

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

Log in

Log in