z-index probleem IE

Status
Niet open voor verdere reacties.
M

michaelbeersnl

Gebruiker
Lid geworden
30 nov 2011
Berichten
57
Beste helpers,

Ik ben bezig met een thema alleen nu zit ik met het volgende probleem.
Ik wil een drop-down menu maken alleen laat hij de elementen niet goed zien in IE 7/8/9 en zelf kom ik er niet achter waar het aan ligt.
Zodra de z-index van #header op 0 staat doet hij het wel alleen laat hij dan de schaduw niet goed zien enz.

Voorbeeld:
http://michaelbeers.nl/beta/dashboard.html

Alvast bedankt,

Michael
 
Hoi Michael,
Aha, ik zie:
  • Het is een html5-pagina en de IE's onder IE9 worden op het goede spoor gezet met html5shiv.js en excanvas.js.
  • Daarnaast worden diverse jQuery-scripts gebruikt voor het wisselen van de tabbladen.
  • In IE worden de niet-actuele tabs niet gesloten, maar staan ook open (onder elkaar); is geen z-index-probleem!
  • Met de IE Developer Toolbar en via de gegenereerde broncode zie ik dat de {display:none} voor de gesloten tabs niet doorkomt uit het script.
  • Ook zet IE de tabs niet om naar de class="active" (witte kleur) als je er op klikt; ook dat wordt met een opgeplakt onclick-script verordonneerd.

Kan het zijn dat de verschillende scripts elkaar in de weg zitten?
Wat gebeurt er als je de <meta http-equiv="X-UA-Compatible" content="IE=edge" /> weghaalt? Hetzelfde?
Is het anders niet mogelijk om de tabs te bedienen met een gewoon show/hide javascriptje?

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hi csshunter,

Dit dit zijn dingen die helemaal niet met mijn vraag te maken hadden maar evengoed bedankt voor de opmerkingen dit zijn dingen waar ik nog mee bezig ben ;)
Het zit hem niet in de tabs maar het menu in de header... deze word compleet met CSS gemaakt want ik heb al een keer de Javascript's weggehaald.

Code: 
#header
{
	position: relative;
	min-height: 53px;
	z-index: 100;
	
	background: #F89C20;
	border-top: 1px solid rgba(0, 0, 0 ,0.2);
	border-bottom: 1px solid rgba(0, 0, 0 ,0.2);
	
	/*CSS3*/
	background: -moz-linear-gradient(top,  #F89C20 0%, #FFAB3A 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F89C20), color-stop(100%,#FFAB3A));
	background: -webkit-linear-gradient(top,  #F89C20 0%,#FFAB3A 100%);
	background: -o-linear-gradient(top,  #F89C20 0%,#FFAB3A 100%);
	background: -ms-linear-gradient(top,  #F89C20 0%,#FFAB3A 100%);
	background: linear-gradient(to bottom,  #F89C20 0%,#FFAB3A 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F89C20', endColorstr='#FFAB3A',GradientType=0 );

	-moz-box-shadow:  0px 2px 3px 0px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow:  0px 2px 3px 0px rgba(0, 0, 0, 0.1); 
	box-shadow:  0px 2px 3px 0px rgba(0, 0, 0, 0.1);	
}

Gekgenoeg doet deze het wel zodra ik in de bovenstaande code de z-index op 0 zet alleen renderd hij de box-shadow dan over de maincontent dus ik heb deze z-index wel nodig.
En je zou denken dat je met IE-edge de browser pushed om de laatste versie te gebruiken
 
Hoi Michael,
Ohhhh! Ik keek met m'n neus! :D
Ik zag al hoverend helemaal geen dropdown-menu, en dacht daarom dat je de tabs bedoelde.
Maar de dropdown is het laatste item rechtsboven in de header, dat had ik net niet geraakt en dus niet gezien.

Ik zal later nog eens kijken.
En de IE-Edge zou idd goed moeten zijn (maar je weet maar nooit met IE).

Met vriendelijke groet,
CSShunter
 
Oef, van alles en nog wat uitgeprobeerd uit de IE-trukendoos:
  • ... alle inhoud verwijderd behalve de #header,
  • ... extra relatieve posities toevoegen,
  • ... overflow:visible toevoegen, cq overflow:hidden,
  • ... extra z-indexen toevoegen,
  • ... spelen met de waarden van de z-indexen,
  • ... transparant background-img toevoegen,
  • ... expliciete hoogtes toevoegen,
  • ... top/left bij de abs. positie toevoegen,
  • ... al dan niet in combinatie met elkaar,
  • ... en nog wat dingetjes.
Maar niets helpt: ik kom er niet achter. :o

Wat ik en-passant wel tegenkwam was het witte gat bij IE (alleen IE7) in de header:

dashboard-ie-gat.png

Dat blijkt een residu-hoogte te zijn van de #notifications. Als die op {display:none;} staat, moet er toch nog een expliciete {height:0;} voor IE7 bij komen (denkelijk via javascript te regelen).

Met vriendelijke groet,
CSShunter
 
Ja dat zijn dingen die ik ook al had geprobeerd IE is gewoon geen browser denk ik altijd maar zo :P.
Normaal post ik niet zo snel een vraag over CSS tenzij het ingewikkeld is.
Iedergeval bedankt voor de hulp!

Mvg,

Michael
 
Hoi Michael,
Ja, altijd al zo geweest: er zijn browsers er er is Internet Explorer. :shocked:

Maar de rariteiten lieten me niet met rust: kon het niet uitstaan dat hier geen vinger op te leggen zou zijn.
Vandaar maar eens begonnen met een frisse start:
  • Alle stylesheets en scripts uitschakelen.
  • De hele header opnieuw bouwen, gewoon met css2.1 en xhtml1.0.
  • En dan kijken waar het fout gaat in IE.

1. Eerste stap
En wat blijkt na wat tuinieren in de html (zoveel mogelijk intact gelaten) en met wieden en vers inzaaien van de css:
Internet Explorer kan het gewoon wel, en zonder z-indexen ook!


  • Zie hier: dashboard-test-01.htm.
  • Gaat goed in IE7, en volgens de screenshots van Netrenderer ook in IE8 en IE9. :)

  • Voor testen in Netrenderer is hier een versie met uitgeklapt submenu: dashboard-test-01a.htm.
  • Het enige is, dat in IE7 de submenu-ul een paar pixels de oranje header-balk overlapt. Dat is natuurlijk met een Conditional Comment op te lossen, maar momenteel gebruikt nog maar 1,8% van de surfers IE7 > zou ik laten zitten.

Voor het hoveren over de submenu-items heb ik een pijltje toegevoegd, wegens Richtlijn R-pd.10.1 van de webrichtlijnen.nl en de WCAG ("Ensure that all information conveyed with color is also available without color, for example from context or markup.", met name voor mensen met geen 100% contrastvermogen; zie ook hier!).

2. Tweede stap
Nu de 3 oude stylesheets toevoegen, met overrulen van de styles die veranderd zijn. Firefox, Chrome, enz. pakken nu ook de css3 op (voor zover die niet door de css2.1 zijn vervangen; een deel van de css3 van de header moet dus nog toegevoegd worden).
Ook alle z-indexen op auto gezet.
Maar aha, hier begint IE7 te steigeren: nu is er in IE7 geen submenu als je over het hoofdmenu-item hovert!
En ook Firefox en andere browsers protesteren: daar komt het submenu al tevoorschijn als je over de plek van de submenu-items hovert!



Het blijkt 'm voor IE7 te zitten in iets van de style.css: de andere twee stylesheets maken niet uit.

Voor de andere browsers blijkt het juist de grid.css te zijn, die ergens dwarsligt. :eek:

=======
3. Derde stap
Nu nog kijken of misschien ook nog de scripts (met name de html5shiv.js en de excanvas.js voor IE<9) alsnog voor IE roet in het eten gooien als de style.css wordt weggelaten.
Dat blijkt gelukkig niet het geval te zijn: het zit alleen in de style.css.
  • Test met uitgeschakelde style.css en ingeschakelde scripts: dashboard-test-04.htm.
  • Idem uitgeklapte versie: dashboard-test-04a.htm.
  • Het eerder gesignaleerde IE-gat in de header moet nog wel aangepakt worden in een script.

=======
Conclusie 1
Wil je het goed krijgen in IE7, dan moeten alle style-regels van style.css stuk voor stuk doorgelopen worden, om te kijken waar de boosdoener zit.
Wil je het goed krijgen in de rest, dan moeten alle style-regels van grid.css stuk voor stuk doorgelopen worden, om te kijken waar de boosdoener zit.

Conclusie 2
Het wreekt zich hier, dat kennelijk niet systematisch bij elke ontwerp-stap getest is in de verschillende browsers (Golden Rule nr.2 en Golden Rule nr.3 ;) ).
Als "alles af is", en je dan pas test in de diverse browsers en browser-versies en het niet goed blijkt te gaan, zijn alleen met heel veel zweetdruppeltjes de problemen op te lossen. Tenminste: soms. En anders zoals hier: door de css3, html5 en diverse scripts is het zo complex geworden, dat de speld in de hooiberg gewoon niet te vinden was.
Dan zit er maar 1 ding op: huilen, opnieuw beginnen en kijken waar het schip strandt! :rolleyes:

Met vriendelijke groet,
CSShunter

PS: En verder is het al met al een pittig project, zo te zien! :) Succes!

PS2: Alle lettergroottes heb ik opgegeven in em's, zodat de bezoeker ook in IE naar behoefte de lettergrootte kan aanpassen (zonder meteen op alles te hoeven inzoomen, waardoor er een horizontale scrollbar komt).
En maatregelen getroffen tegen de springende pagina.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan