[CSS] Menu verschil in Firefox en IEX

[Pietert]

Ik gebruik een menu dat de extra opties naar rechts uitklapt en links in de pagina komt te staan. Ik heb er allemaal maar beperkt kaas van gegeten maar ben wel zeer tevreden over de layout. Tot ik het in Internet Explorer opende en tot mijn schrik zag dat het mooie solide menu in IEX opeens doorzichtig was. De textuele inhoud van de pagina zie je op de achtergrond in IEX en dat maakt het moeilijk leesbaar. Ik heb duidelijk te weinig verstand van CSS. IEX accepteert minder nieuwigheden dan Firefox maar dat het verschil zo groot was wist ik niet.

Ik heb de afgelopen week de hele CSS bijbel van w3c doorgespit maar ik kom er maar niet achter wat het probleem op zou kunnen lossen of wat ik verkeerd doe.

Mijn probeersel is hier te vinden: http://www.ibbu.nl/~109bg/test/

Dit is de code van het menu:
menu.css; volgens mij de bron van het kwaad

code:

.pietl0norm {
    padding: 4px;
    font: 12px Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
    text-decoration: none;
    border: 1px solid #5E8383;
    border-left: 4px solid #5E8383;
    background-color: #5E8383;
    color: white;
    cursor: hand;
}
.pietl0over {
    padding: 4px;
    font: 12px Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
    text-decoration: none;
    border: 1px solid #A4A4A4;
    border-left: 4px solid #E1B700;
    background-color: #A4A4A4;
    color: white;
    cursor: hand;
}
.pietl0clck {
    padding: 4px;
    font: 12px Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
    text-decoration: none;
    border: 1px solid #A4A4A4;
    border-left: 4px solid #E1B700;
    background-color: #949494;
    color: white;
    cursor: hand;
}
.pietl1norm {
    padding: 3px;
    font: 12px Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
    text-decoration: none;
    border: 1px solid white;
    border-left: 4px solid #EBEFEF;
    background-color: #EBEFEF;
    color: #243D4B;
    cursor: hand;
}
.pietl1over {
    padding: 3px;
    font: 12px Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
    text-decoration: none;
    border: 1px solid white;
    border-left: 4px solid #E1B700;
    background-color: #EBEFEF;
    color: #243D4B;
    cursor: hand;
}
.pietl1clck {
    padding: 3px;
    font: 12px Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
    text-decoration: none;
    border: 1px solid white;
    border-left: 4px solid #E1B700;
    background-color: #DBDFDF;
    color: #243D4B;
    cursor: hand;
}

menu.js

code:

var menus=[],_m3=window.external?[' style="width:100%;height:100%"','div onclick="','div']:['','a href="javascript:','a'],_mC=document.getElementById?function(_mR){return document.getElementById(_mR)}:function(_mR){return document.all[_mR]};function menu(_m1,_mO){var _=this,i;_._m1=_m1;_._mO=_mO;_._mS='';_.id=menus.length;_._m0=[];_._m2=[];_._m4=[0,0];_._mO[-1]={'firstX':20,'firstY':20,'nextX':15,'nextY':15,'width':100,'height':22,'hideAfter':200,'target':'_self','trace':0,'css':''};for(i=0;i<_._m1.length;i++)if(_._m1[i])new _mE(0,_,_,_._m1[i]);for(i=0;i<_._m2.length;i++)_mA(_._m2[i],1);menus[_.id]=_;}function _mD(_mK){var i,a=menus[_mK]._m0;for(i=0;i<a.length;i++){_mA(a[i],0);_mB(a[i],'norm');}}function _mF(_mK,_mI){var m=menus[_mK],_=m._m0[_mI]._m1[1];_mB(m._m0[_mI],'clck');if(_)open(_,_m9(m._m0[_mI]._m8,m._mO,'target'));}function _mG(_mK,_mI){var m=menus[_mK];m._mL=setTimeout('_mD('+_mK+')',_m9(m._mN._m8,m._mO,'hideAfter'));if(m._mN.id==_mI)m._mN=null;}function _mH(_mK,_mI){var m=menus[_mK],_,_m7,i;m._mN=_=m._m0[_mI];if(m._mL)clearTimeout(m._mL);for(i=0;i<m._m0.length;i++){_=m._m0[i];_m7=!m._mN._mS.indexOf(_._mT);if(_m7)_mB(_,_==m._mN?'over':'norm');_mA(_,_m7);}if(m._mN._m6)for(i=m._mN;i&&i._m5;i=i._mP)_mB(i,'over');}function _mE(l,p,m,_m1){var _=this,i,c=p._m2.length,_mO=m._mO;_._m1=_m1;_._mP=p;_._mT=p._mS;_._mS=p._mS+c+':';_._m8=l;_.id=m._m0.length;m._m0[_.id]=_;p._m2[c]=_;var id=m.id+','+_.id,nX,nY;_._m6=_m9(l,_mO,'trace');for(i=l;i>=-1;i--){if(_mO[i]&&_mO[i]['nextX']!=null)nX=_mO[i]['nextX'];if(_mO[i]&&_mO[i]['nextY']!=null)nY=_mO[i]['nextY'];if(nX!=null||nY!=null)break;}_._m4=[p._m4[0]+_m9(l,_mO,'firstX')+(nX!=null?nX*c+_m9(l,_mO,'width')*c:0),p._m4[1]+_m9(l,_mO,'firstY')+(nY!=null?nY*c+_m9(l,_mO,'height')*c:0)];document.write('<',_m3[1],'_mF(',id,')" id="me',id,'" style="position:absolute;top:',_._m4[1],'px;left:',_._m4[0],'px;width:',_m9(l,_mO,'width'),'px;height:',_m9(l,_mO,'height'),'px;visibility:hidden;z-index:',l,';text-decoration:none" onmouseout="_mG(',id,')" onmouseover="_mH(',id,')"><div',_m3[0],' id="mi',id,'" class="',_m9(l,_mO,'css'),'norm">',_m1[0],'</div></',_m3[2],'>');_._m5=[_mC('me'+m.id+','+_.id),_mC('mi'+m.id+','+_.id),_m9(l,_mO,'css')];if(_m1.length>2){_._m2=[];for(i=2;i<_m1.length;i++)if(_m1[i])new _mE(l+1,_,m,_m1[i]);}}function _mA(_,_mJ){if(_._mQ==_mJ)return;_._mQ=_mJ;if(_mJ)_._m5[0].style.visibility='visible';else if(_._m8)_._m5[0].style.visibility='hidden';}function _mB(_,_mM){if(_._m5[3]==_mM)return;_._m5[3]=_mM;_._m5[1].className=_._m5[2]+_mM}function _m9(l,_mO,k){for(var i=l;i>=-1;i--)if(_mO[i]&&_mO[i][k]!=null)return _mO[i][k];}

Zover ik weet zit hier het euvel niet in, dit is de javascript van het menu maar wellicht zien anderen daar wel de bron van het kwaad

Ik dacht eerst dat ik de background-color in de CSS moest voorzien van de toevoeging 'solid' naast de kleur maar dat was de oplossing ook niet (daar werd het alleen maar nog doorzichtiger van )

[Verwijderd]

Misschien hele stomme opmerking, maar heb je de z-index ingesteld bij je content div en je menu?
Het lijkt net of je tekst een hogere z-index heeft dan je menu.

[ Voor 31% gewijzigd door Verwijderd op 16-03-2006 14:49 ]

[Cloud]

Ik zie het probleem zo snel niet in je CSS zitten, echter geeft je CSS file wel érg veel validatie fouten. Dus het is sowieso goed om daar eens even een blik op te werpen, want dat zou ook zomaar een veroorzaker kunnen zijn. Nu wil ik niet zeggen dat valid CSS ervoor zorgt dat het in alle browsers werkt, maar het helpt je wel een goed eind op weg

edit:
De opmerking van mvkooten is wel een goede, dat zou best wel es voor dit soort dingen kunnen zorgen ja.

[ Voor 13% gewijzigd door Cloud op 16-03-2006 14:52 ]

[Pietert]

De z-index was het niet, die heb ik ingesteld maar dat leverde geen oplossing op.
Ik heb m nu wel werkende maar de complete achterliggende tekst is nu verneukt en ik zie door de bomen het bos niet meer

http://www.ibbu.nl/~109bg/test/index9.html is te zien hoe het nu zit. Menu werkt dus prima alleen de text is verstrooid

[Cloud]

Pietert schreef op donderdag 16 maart 2006 @ 15:03:
De z-index was het niet, die heb ik ingesteld maar dat leverde geen oplossing op.
Ik heb m nu wel werkende maar de complete achterliggende tekst is nu verneukt en ik zie door de bomen het bos niet meer

http://www.ibbu.nl/~109bg/test/index9.html is te zien hoe het nu zit. Menu werkt dus prima alleen de text is verstrooid

Om je content, je tekst, heb je een <div id="content"> gegooid die je nergens definieert? Daar moet je wel even een breedte aangegeven, en even margins instellen Misschien dat dat je helpt.

edit:
Verstrooid is overigens niet het goede woord, het vak waarin het staat is gewoon erg smal

[ Voor 10% gewijzigd door Cloud op 16-03-2006 15:23 ]