CSS Probleem navigatie & IE

donderdag 30 december 2010 15:49

Acties:

0 Henk 'm!

Topicstarter

Ik heb de navigatie van mijn website een beetje aangepast.
Alles werkt zoals het hoort in FF, Opera & Chrome, maar natuurlijk niet in IE (ik test met versie 8 ).

Het probleem doet zich voor als je het dropdownmenu opent, en vervolgens een submenu, en dan het menu sluit, zonder een link aan te klikken. Als je dan het dropdownmenu weer opent, staat de background van het submenu er nog. Dat gaat pas weg als je het corresponderende menu-item 'hovert'.

In de originele navigatie wordt gebruik gemaakt van de csshover.htc file. Aanroep (in de <head>):

HTML:

<!--[if IE]>
<style type="text/css" media="screen">
    #menu {float: none; } /* This is required for IE to avoid positioning bug when placing content first in source. */
    /* IE Menu CSS */
    body { behavior: url(/csshover.htc);
    font-size: 100%; /* to enable text resizing in IE */
    }
    #menu ul li {float: left; width: 100%; }
    #menu h2, #menu a {height: 1%; } 
</style>
<![endif]-->

Dat stemt overeen met de volgende menu opbouw:

HTML:

<div id="menu">
<ul>
  <li><h2><a class="enkel" href="index.php">Home</a></h2></li>
</ul>
<ul>
  <li><h2><a href="watisaromatherapie.php">Aromatherapie?</a></h2>
    <ul>
      <li><a href="distillatie.php">Distillatie</a></li>
      <li><a href="kwaliteitseisen.php">Kwaliteitsvereisten</a></li>
      <li><a href="gebruik.php">Gebruik</a>
        <ul>
            <li><a href="verstuiven.php">Verstuiven</a></li>
            <li><a href="baden.php">Baden</a></li>
            <li><a href="massage.php">Massage</a></li>
            <li><a href="inname.php">Inname</a></li>
            <li><a href="culinair.php">Culinair</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
(etc...)
</div>

Maar, ik heb nu de volgende opbouw:

HTML:

<div id="menu">
<ul>
  <li><a href="index.php">Home</a></li>
</ul>
<ul>
  <li><a class="nolink">Aromatherapie?</a>
    <ul>
      <li><a href="watisaromatherapie.php">Wat is aromatherapie?</a></li>
      <li><a href="distillatie.php">Distillatie</a></li>
      <li><a href="kwaliteitseisen.php">Kwaliteitsvereisten</a></li>
      <li><a class="nolink">Gebruik</a>
        <ul>
            <li><a href="atmosferische_verspreiding.php">Atmosferische verspreiding</a></li>
            <li><a href="baden.php">Baden</a></li>
            <li><a href="massage.php">Massage</a></li>
            <li><a href="inname.php">Inname</a></li>
            <li><a href="culinair.php">Culinair</a></li>
        </ul>
      </li>
      <li><a href="verschillende_strekkingen.php">Verschillende strekkingen</a></li>
    </ul>
  </li>
</ul>
(etc)
</div>

Waardoor de laatste regel van m'n csshover.htc aanroep:

code:

1	#menu h2, #menu a {height: 1%; }

uiteraard niet meer correct is.

Mij lijkt dat deze moet vervangen worden door:

code:

1	#menu a.nolink, #menu a {height: 1%; }

maar dat maakt het dus nog erger

Eigen inbreng:
Ik heb al wat verschillende dingen geprobeerd, maar krijg het niet goed.
Het feit dat de rest van de css wel al probleemloos werkt

Website:
http://www.jowannes.com/aromatheek/index.php
(Lege website, enkel template met navigatie, site moet daarin nog verhuizen

)

Iemand die hier wat meer inzicht in heeft? Alvast bedankt!

donderdag 30 december 2010 16:04

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css

Tweaker36 schreef op donderdag 30 december 2010 @ 15:49:
Ik heb al wat verschillende dingen geprobeerd, maar krijg het niet goed.

Wat dan? Laat dan eens wat zien?

Tweaker36 schreef op donderdag 30 december 2010 @ 15:49:
Het feit dat de rest van de css wel al probleemloos werkt

Voor 'tzelfde geld is dat een copy/paste van elders, dus dat zegt niet zo veel

Overigens: ik kan 't probleem hier niet reproduceren (IE9 weliswaar...)

edit:
Hmmm, IE7 wel inderdaad.

Je conditional ([if IE]) mag wel wat beperkter; die htc is vanaf IE7 niet meer nodig. Je kunt daarvoor 'lt', 'lte', 'gt', 'gte' e.d. gebruiken.

edit:
Oh, csshover.htc regelt dat zelf ook al en schakelt zichzelf uit wanneer IE7 of hoger. Weer wat geleerd

Excuses voor de chaos

; ben met 10 verschillende dingen (en twee koters) bezig

[ Voor 64% gewijzigd door RobIII op 30-12-2010 17:32 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 30 december 2010 16:13

Acties:

0 Henk 'm!

Tweaker36

Topicstarter

RobIII schreef op donderdag 30 december 2010 @ 16:04:
Overigens: ik kan 't probleem hier niet reproduceren (IE9 weliswaar...)

Nee?

Je hovert bvb Producten en prijzen, en dan Verzorgingsproducten. Als je dan weghovert (zonder over een ander item te hoveren, en weer Producten en prijzen opent, krijg je dit:

Afbeeldingslocatie: http://tweakers.net/ext/f/G1chmlFUKBujzLXD9gf3NWoy/medium.png

Edit: ah, ke, je had 'm ook al.

[ Voor 12% gewijzigd door Tweaker36 op 30-12-2010 16:15 ]

donderdag 30 december 2010 16:14

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Is die HTC voor de :hover op iets anders dan een <a>? Volgens mij is hij dan alleen voor IE6 nodig.

Wat is het probleem met die "height: 1%"? Lijkt op een fix voor de hasLayout bug in IE, in dat geval zou je die kunnen vervangen door een "zoom: 1" bijvoorbeeld.

RobIII schreef op donderdag 30 december 2010 @ 16:04:
Overigens: ik kan 't probleem hier niet reproduceren (IE9 weliswaar...) Je conditional ([if IE]) mag wel wat beperkter; die htc is vanaf IE7 (of was 't 8?) niet meer nodig. Je kunt daarvoor 'lt', 'lte', 'gt', 'gte' e.d. gebruiken.

Hier in IE8 gaat het - zo ver ik kan zien - ook gewoon goed. In IE8 in Compatibility Mode gaat het wel mis ja.

[ Voor 40% gewijzigd door OkkE op 30-12-2010 16:15 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 30 december 2010 16:20

Acties:

0 Henk 'm!

Tweaker36

Topicstarter

OkkE schreef op donderdag 30 december 2010 @ 16:14:
Hier in IE8 gaat het - zo ver ik kan zien - ook gewoon goed. In IE8 in Compatibility Mode gaat het wel mis ja.

Damn!
Die stond hier idd blijkbaar aan.

En zonder doet ie het idd correct...

Even een VMWare booten, kan ik met IE 6 en 7 ook testen.

Update:

IE6 en 7 doen het niet goed, 8 en 9 wel...
Nu schijnt de vorige site het ook slecht te doen in IE7, IE6 dan weer wel goed.

[ Voor 15% gewijzigd door Tweaker36 op 30-12-2010 16:31 ]

donderdag 30 december 2010 17:30

Acties:

0 Henk 'm!

Sjaakmeister

Toevallig gisteren tegen aan gelopen. IE7 schijnt last te hebben van een 'ghost hover-bug'

Wellicht heb je hier iets aan: http://murphy.cz/ie7-hover-ghosts-bug/

donderdag 30 december 2010 20:10

Acties:

0 Henk 'm!

Tweaker36

Topicstarter

Sjaakmeister schreef op donderdag 30 december 2010 @ 17:30:
Toevallig gisteren tegen aan gelopen. IE7 schijnt last te hebben van een 'ghost hover-bug'

Wellicht heb je hier iets aan: http://murphy.cz/ie7-hover-ghosts-bug/

Het is idd die bug.
Nu, ik heb de code bekeken, en er staat een voorbeeld in dat eigenlijk volledig analoog is aan mijn menustructuur, maar de css is dat ook. Ik zie bijna geen verschil in het opzet. Moet ergens iets klein zijn, maargoed.

IE7 gebruikers kunnen 'm in theorie gewoon prima gebruiken. Als je gewoon browst en dus de menu items effectief aanklikt, ga je niet of zelden tegen de bug aanlopen.

En voor IE6 gebruikers:

HTML:

<!--[if lte IE 6]>
    <meta http-equiv="refresh" content="0; url=browserupgrade.php" />
    <script type="text/javascript">
        /* <![CDATA[ */
        window.top.location = 'browserupgrade.php';
        /* ]]> */
    </script>
<![endif]-->

Geen zin om verder te blijven prutsen voor mensen uit de vorige eeuw.

vrijdag 31 december 2010 14:54

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Css

"ghost hover", mooie naam voor gewoon een hasLayout bug. Simpel op te lossen door layout te triggeren op de elementen.

Feit is dat je al die htc-meuk niet nodig hebt voor IE7+, dus haal dat iig weg.

Voor IE6 kun je het waarschijnlijk wel werkbaar maken door de IE-hover htc te gebruiken en ook hasLayout te triggeren.

Verder zou ik niet al teveel naar dat voorbeeld kijken, want echt intelligent zit dat niet in elkaar

Nog een toevoeginkje: Waarom mensen met IE6 wegsturen? Je zegt zelf dat je niet wilt blijven prutsen voor hen, maar gaat dan wel al die moeite doen ze naar een upgrade-pagina te redirecten. Hou dan gewoon geen rekening met IE6, maar laat ze zelf bepalen of ze nog wat van de site kunnen maken of niet. Redelijke kans dat de content nog gewoon leesbaar is namelijk, ook al is de layout vernaggeld...

[ Voor 45% gewijzigd door Bosmonster op 31-12-2010 14:58 ]

Onderwerpen