[HTML/CSS] Popup menu popt under in IE

[Cryothic]

Beste collage webdev-ers

Ik zit met het volgende probleem.

Ik heb een verticaal menu. En sommige menu items hebben een submenu.
Een menu item kan de class 'active' hebben als het actief is.

Het probleem is als volgt:
Als een actief item onder een item met een submenu staat, dan opent het submenu achter het actieve item. Maar enkel in IE (6 en 7)



m'n code:

HTML:

<div class="verticalMenu">
  <div class="verticalMenuBot">
    <ul>
      <li><a href="#">Home</a></li>
      <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">Pagina 1</a>
        <div style="display: none; z-index: 0;">
          <ul>
            <li><a href="#">Nieuws</a></li>
            <li><a href="#">Archief</a></li>
          </ul>
          <span class="last"></span></div>
      </li>
      <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">Pagina 2</a>
        <div style="display: none; z-index: 0;">
          <ul>
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
          </ul>
          <span class="last"></span></div>
      </li>
      <li><a href="#" class="active">Prikbord</a></li>
    </ul>
  </div>
</div>

en de css

Cascading Stylesheet:

.verticalMenu {
 width:226px;
 position:absolute;
 left:212px;
 top:-175px;
 background:url(../img/menuBg.jpg) no-repeat left top;
 text-align:center;
 padding-top:15px;
}
.verticalMenuBot {
 width:226px;
 background:url(../img/menuBg.jpg) no-repeat left bottom;
 padding:20px 0px 90px 0px;
}
.verticalMenuBot ul {
 list-style:none;
 display:block;
}
.verticalMenuBot ul li {
 width:226px;
 display:block;
 text-align:right;
 height:27px;
 position:relative;
}
.verticalMenuBot ul li a {
 font:normal 15px/25px Arial, Helvetica, sans-serif;
 color:#424242;
 padding-right:72px;
 width:153px;
 display:block;
 height:27px;
 background:url(../img/singleDot.jpg) no-repeat 184px 7px;
}
.verticalMenuBot ul li a:active, .verticalMenuBot ul li a.active {
 background:#a6bc1e;
 z-index: 0;
}
.verticalMenuBot ul li a:hover, .verticalMenuBot ul li a.hover{
 background:#e2eb57 url(../img/singleDot.jpg) no-repeat 184px 7px;
 z-index: 0;
}
.verticalMenuBot ul li div {
 position:absolute;
 left:210px;
 top:0px;
 display:none;
 border:1px solid red;
}
.verticalMenuBot ul li ul {
 background:url(../img/menuBg.png) no-repeat left top;
 width:241px;
}
.verticalMenuBot ul li ul li {
 width:241px;
 margin:0px;
 padding:0px;
 text-align:left;
}
.verticalMenuBot ul li ul li a {
 width:222px;
 text-align:left;
 margin:0px;
 padding:0px 0px 0px 15px;
 background:url(../img/singleDot.jpg) no-repeat 205px 7px;
}
.verticalMenuBot ul li ul li a:hover, .verticalMenuBot ul li ul li a.hover{
 background: #e2eb57 url(../img/singleDot.jpg) no-repeat 205px 7px;
}
.last {
 background:url(../img/menuBotBg.png) no-repeat left top;
 width:241px;
 height:9px;
 clear:both;
 display:block;
}
.verticalMenuBot ul li div ul li div {
 display:none;
 left:223px;
}

iemand enig idee waarom dit fout gaat?
Zowel met strict/loose en transitional geprobeerd.

[code] kan een taal bevatten voor highlighting

[ Voor 1% gewijzigd door BtM909 op 26-03-2009 11:29 ]

[Gersomvg]

z-index gecontroleerd?

code:

        <div style="display: none; z-index: 1;">    <<<<< Hierzo dus
            <ul>
                <li><a href="#">Nieuws</a></li>
                <li><a href="#">Archief</a></li>
            </ul>
            <span class="last"></span>
         </div>

[ Voor 218% gewijzigd door Gersomvg op 25-03-2009 17:12 ]

[imp4ct]

Je maakt het je wel nogal moeilijk met al die CSS

Neem hier eens een kijkje : imp4ct in "\[html/css] semantisch dropdown menuutje?"

[Verwijderd]

imp4ct schreef op woensdag 25 maart 2009 @ 17:12:
Je maakt het je wel nogal moeilijk met al die CSS

Neem hier eens een kijkje : imp4ct in "\[html/css] semantisch dropdown menuutje?"

Al die CSS (mits het goed in elkaar zit) heeft als groot voordeel dat niet heel de site instort als Javascript uitstaat.

[BasieP]

Verwijderd schreef op woensdag 25 maart 2009 @ 19:51:
[...]

Al die CSS (mits het goed in elkaar zit) heeft als groot voordeel dat niet heel de site instort als Javascript uitstaat.

bij bedoelt dat de TS zijn CSS hier maar neerplempt zonder de moeite te nemen om een kleine testcase te maken (dus gestript van alle background tags etc.)

Verder is er niks mis met css, maar je kijkt er wat lastig naar als er 50% weg kan

[Gersomvg]

Cryothic; Hielp die z-index of heb je m'n post nog niet gelezen?

Beetje jammer dat er hier vaak zo snel negatief wordt gedaan over een TS. GoT is af en toe een beetje té hoogstaand.

[OkkE]

gersompie schreef op woensdag 25 maart 2009 @ 21:52:
Cryothic; Hielp die z-index of heb je m'n post nog niet gelezen?

Lijkt inderdaad op een z-index probleem, als de TS dat probeerd zal het wel werken.

Beetje jammer dat er hier vaak zo snel negatief wordt gedaan over een TS. GoT is af en toe een beetje té hoogstaand.

Ik denk omdat GoT ook "hoogstaand" is, het is hiet niet Beginnersweb. Wil niet zeggen dat je geen simpele vragen mag stellen, want wat de ene simpel vindt, is voor de ander heel lastig. Maar betekend wel dat je als Topic Starter de moeite neemt je probleem uit te leggen, vertellen wat je geprobeerd hebt, waar je denkt dat het probleem zit en een duidelijke, uitgeklede testcase plaatst.

Nog te vaak zie ik topics waarbij de TS gewoon zijn (bijna) volledige code post en roept "het moet dit en dat doen, maar werkt nu niet?!". Sorry, maar zo werkt het hier niet. En als je elke dag een paar van zulke topics voorbij ziet komen (en dat gebeurd), dan wordt je van zelf negatief.

[Cryothic]

Ik heb de z-index geprobeerd. maar helaas zonder resultaat.

ik heb de z-index van de div omhoog gegooid (100), en die van het actieve item (zoals in de css te zien is) op 0 en op 1 geprobeerd.

Firefox werkt prima, het is alleen IE die tegen werkt.

En ter mijn verdediging. Ik ben niet bepaald een beginner, maar ook geen expert.
Ik post hier simpelweg al m'n css omdat dat nou eenmaal is hoe m'n menu er uit ziet. En daar zit de fout in.
Ik kan wel een paar regels html hier neergooien, en m'n css inkorten, maar als daardoor het probleem opeens niet meer zichtbaar is, kan niemand me uberhaubt helpen (was mijn gedachte).

[demichiel]

Het voordeel is dat je dan tenminste je probleem kan isoleren, probeer eens een testcase stap voor stap op te zetten met een hele simpele html-code en begin bij een heel basic CSS, dan ga je stapje per stapje css toevoegen tot je weet waar de fout zit.

Als je dan niet begrijpt waarom die fout gebeurd of geen oplossing vind hebben wij het ook veel makkelijker om je te helpen.

[crisp]

Verwijderd schreef op woensdag 25 maart 2009 @ 19:51:
[...]

Al die CSS (mits het goed in elkaar zit) heeft als groot voordeel dat niet heel de site instort als Javascript uitstaat.

Als je javascript goed toepast zou je hele site echt niet mogen 'instorten', net zoals dat geldt voor CSS.

Het probleem met CSS-based menu-behaviour is echter dat het waardeloos is op non-pointerbased devices, en :focus wordt minder goed ondersteund dan :hover. Daarbij kan je met javascript veel beter de behaviour optimaliseren; denk aan een kleine timeout voordat je een menuitem in- of uitklapt.

[T-MOB]

Het probleem van TS is een bug in IE mbt de z-index . De oplossing is om de z-index ook te plaatsen op het relative-gepositioneerde element waar het absolute inzit.

[crisp]

T-MOB schreef op donderdag 26 maart 2009 @ 11:20:
Het probleem van TS is een bug in IE mbt de z-index . De oplossing is om de z-index ook te plaatsen op het relative-gepositioneerde element waar het absolute inzit.

hehe, mijn eigen bugreport

[Cryothic]

hm, net even geprobeerd om die container (en later al diens containers) een z-index van 1 mee te geven.
Maar helaas nog zonder resultaat.

Ik zal, zodra ik tijd heb wel een testcase opzetten, en kijken of ik daar verder mee kom.

[Verwijderd]

crisp schreef op donderdag 26 maart 2009 @ 10:04:
[...]

Als je javascript goed toepast zou je hele site echt niet mogen 'instorten', net zoals dat geldt voor CSS.

Het probleem met CSS-based menu-behaviour is echter dat het waardeloos is op non-pointerbased devices, en :focus wordt minder goed ondersteund dan :hover. Daarbij kan je met javascript veel beter de behaviour optimaliseren; denk aan een kleine timeout voordat je een menuitem in- of uitklapt.

Weet ik. Mijn reactie was ook grotendeels gericht op de site in de post waarnaar verwezen werd (http://www.gamevibes.be/).
Bij die site werkt heel de navigatie niet meer zodra je JS uitzet.
Maar oké, we dwalen af, dit heeft niets met de TS z'n probleem te maken.

[Cryothic]

Nou, daar ben ik weer.

Let even niet op het hoofdlettergebruik... ik heb de pagina geopend in internet explorer (daar waar het dus fout gaat), en opgeslagen. Vervolgens heb ik alles er uit geknikkerd wat niks met de navigatie te maken heeft, OF wat het probleem ontzichtbaar zou maken (maar dus niet oplossen).

Dan hou ik dit over:
de html

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
    <TITLE>Untitled</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    <LINK href="Leekerweide_files/styles.css" type=text/css rel=stylesheet>
    <SCRIPT src="Leekerweide_files/common.js" type=text/javascript></SCRIPT>
</HEAD>
<BODY>
    <DIV class=verticalMenu>
        <DIV class=verticalMenuBot>
            <UL>
                <LI onmouseover=showSubMenu(this) onmouseout=hideSubMenu(this)><A href="#">Pagina 1</A>
                    <DIV style="Z-INDEX: 100">
                        <UL>
                            <LI><A href="#">Sub 1</A> </LI>
                            <LI><A href="#">Sub 2</A> </LI>
                        </UL>
                        <SPAN class=last></SPAN>
                    </DIV>
                </LI>
                <LI><A class="active" href="#">Pagina 2</A> </LI>
            </UL>
        </DIV>
    </DIV>
</BODY>
</HTML>

de css

code:

.verticalMenuBot UL LI {
    POSITION: relative;
    z-index:1;
}
.verticalMenuBot UL LI A {
    DISPLAY: block; 
    z-index:1;
}
.verticalMenuBot UL LI A:active {
    Z-INDEX: 1; 
    BACKGROUND-color: #a6bc1e;
}
.verticalMenuBot UL LI A.active {
    Z-INDEX: 1; 
    BACKGROUND-color: #a6bc1e;
}
.verticalMenuBot UL LI DIV {
    DISPLAY: none; 
    LEFT: 100px; 
    POSITION: absolute; 
    TOP: 0px; 
    z-index: 10;
    border:1px solid red;   
}

en voor de zekerheid de js:

code:

function showSubMenu(menu){
    var childs = menu.childNodes;
    childs[0].className = 'hover';
    childs[2].style.display = 'block';
    childs[2].style.zIndex = 100;
}

function hideSubMenu(menu){
    var childs = menu.childNodes;
    childs[0].className = '';
    childs[2].style.display = 'none';
    childs[2].style.zIndex = 0;
}

Ik zie het echt niet. De Z-indexen staan volgens mij goed. Alles staat op 1, behalve de div die er uit popt. Die staat in de css op 10, en via de JS zelfs op 100.

Strict, Transitional of Loose, het maakt niks uit. Die rooie border (ter test) blijft achter het onderliggende menuitem hangen

[crisp]

JavaScript:

menu.childNodes

IE gaat anders om met whitespace in de DOM, dus childs[2] zal in IE wellicht niet zijn wat jij verwacht dat het is

edit: hmmz, dan zou het natuurlijk helemaal niet moeten werken

Strict, Transitional of Loose, het maakt niks uit.

Dat klopt, browsers doen daar ook niet mee

[ Voor 37% gewijzigd door crisp op 27-03-2009 16:02 ]

[Cryothic]

crisp schreef op vrijdag 27 maart 2009 @ 15:54:

Dat klopt, browsers doen daar ook niet mee

nou, ik heb problemen met een prototype lightwindow gehad, die oploste door het doctype aan te passen. Ondanks dat het er in sommige browsers wel goed uit zag

[crisp]

Cryothic schreef op vrijdag 27 maart 2009 @ 16:07:
[...]

nou, ik heb problemen met een prototype lightwindow gehad, die oploste door het doctype aan te passen. Ondanks dat het er in sommige browsers wel goed uit zag

Da's dan ws een verschil tussen quirksmode (veroorzaakt door het ontbreken van een DTD of een onvolledige DTD) en standards compliantmode (volledige DTD, HTML of XHTML no matter what flavour).

In ieder geval wordt je probleem veroorzaakt door de position:relative op je list-items; dat veroorzaakt ism z-index een nieuw stacklevel in IE. Je zal op een of andere manier dus je positionering van je uitklapmenu moeten zien te bewerkstelligen zonder dat je daarvoor position:relative op je list-items nodig hebt.

[Cryothic]

Dus je bedoeld bijvoorbeeld met javascript de absolute positie bepalen?

[crisp]

Een beetje thinking outside the box levert ook iets werkends op:

Cascading Stylesheet:

.verticalMenuBot ul li {
    position: relative;
}
.verticalMenuBot ul li a {
    display: block;
}
.verticalMenuBot ul li a.active {
    background-color: #a6bc1e;
}
.verticalMenuBot ul li div {
    display: none;
    position: absolute;
    top: 0px;
    left: 100px;
    border: 1px solid red;
    background: blue;
}

JavaScript:

function showSubMenu(menu){
    menu.style.zIndex = 10;
    var childs = menu.childNodes;
    childs[0].className = 'hover';
    childs[2].style.display = 'block';
}

function hideSubMenu(menu){
    menu.style.zIndex = 0;
    var childs = menu.childNodes;
    childs[0].className = '';
    childs[2].style.display = 'none';
}

maar ik zou ipv lukraak indexen op childNodes targetten daar wel iets robuusters van maken.