De IE verdwijntruc

Als je in Internet Explorer 6 'iets' wil doen met een element binnen een a-tag, op moment dat je een hover doet, dan heeft IE6 een Hans Kazan truc.

De code:

[code:1:a0e59697e2]
<a href="">Dit is een<span>test</span></a>
[/code:1:a0e59697e2]

Het gaat om de span-tag.

Op moment dat ik de span-tag op een andere plek wil laten tekenen (een height, een width of een position) gaat het fout.

De voorbeeldpagina: http://www.xs4all.nl/~mosm/testsite/verdwijntruc.html

De CSS van de eerste regel:

[code:1:a0e59697e2]
a.test:hover { color : red; }

a.test&#58;hover span.foo1 &#123; 
	display&#58; block;  
	color &#58; green; 
	margin &#58; 10px; 
	padding &#58; 10px; 
	background &#58; red;
	&#125;

[/code:1:a0e59697e2]

Zoals je ziet negeert IE elke vorm van formatering, behalve de kleur van de tekst.

Als je vervolgens 1 attribuut toevoegt aan de css, bijvoorbeeld position, dan doet IE zijn verdwijntruc:

[code:1:a0e59697e2]
a.test:hover { color : red; }

a.test&#58;hover span.foo2 &#123; 
	display&#58; block; 
	position &#58; absolute; 
	color &#58; green; 
	margin &#58; 10px; 
	padding &#58; 10px; 
	background &#58; red;

[/code:1:a0e59697e2]

Dit is wat je ziet in IE:
[img:a0e59697e2]http://www.xs4all.nl/~mosm/testsite/verdwijntruc.gif[/img:a0e59697e2]

Firefox, Opera, Safari doen allemaal wat je verwacht.

Ik heb al gezocht, maar ik kan geen voorbeelden en/of workarounds vinden; misschien niet de juiste trefwoorden op Google gebruikt. Heeft iemand dit eerder gezien en weet een oplossing of een link naar een oplossing?

eerst een andere vraag:

Waarom wil je een block element in een (standaard) inline element? Dat is al numero uno dat fout gaat.

Als je op test gaat staan met de muis knippert ie lekker snel;)

Maar ik denk dat je het beste twee links kan maken, 1tje voor het eerste gedeelte en 1tje voor de span, en dan gewoon <span><a>a link</a></span> erachter.

[quote:c3b7c4b605="ReaLX"]eerst een andere vraag:

Waarom wil je een block element in een (standaard) inline element? Dat is al numero uno dat fout gaat.[/quote:c3b7c4b605]

Dat is niet de kwestie en ook niet belangrijk. Alle andere browser hebben er geen moeite mee, het is niet “illegaal” en verder kan er een situatie zijn waarbij je bij een hover een element uit de inline wilt halen en als block op een andere plek in de pagina wilt laten zien.

Kortom: wat je aangeeft is niet de reden dat het fout gaat, het gaat fout omdat IE er niet goed mee omgaat.

[quote:778901f883="jay03"]Als je op test gaat staan met de muis knippert ie lekker snel;)

Maar ik denk dat je het beste twee links kan maken, 1tje voor het eerste gedeelte en 1tje voor de span, en dan gewoon <span><a>a link</a></span> erachter.[/quote:778901f883]

Dat gaat niet werken, want als je <span> bijvoorbeeld verbergt zolang er niet gehovered wordt, dan is er helemaal niets om over heen te gaan,

Wat ik niet geprobeerd heb is om in plaats van een span een tweede <a> te gebruiken… mhmm… dat ga ik eens testen :slight_smile:

Ehm, het is wel degelijk "illegaal" volgens de specs om een blocklevel element in een inline element te stoppen. Omdat de bounding box voor een inline element anders wordt berekend en gerenderd, zou een blocklevel element die daar binnen staat een verkeerde parent krijgen, en kunnen er dus render inconsistenties ontstaan. IE heeft een aparte manier om dit soort dingen te renderen (zoek op google naar "CSS IE hasLayout"), en zou hier best mee te maken kunnen hebben.

De enige uitzondering hierop zijn floats geloof ik. (Omdat de bounding box hierbij wordt berekend als zijnde een blockelement, terwijl een float officieel inline is)

Maarja, of dit inderdaad iets te maken heeft met het probleem dat jij tegenkomt weet ik niet. Ik ben hetzelf eigenlijk nooit tegengekomen.

[quote:d8c72c0970="ReaLX"]Ehm, het is wel degelijk "illegaal" volgens de specs om een blocklevel element in een inline element te stoppen. Omdat de bounding box voor een inline element anders wordt berekend en gerenderd, zou een blocklevel element die daar binnen staat een verkeerde parent krijgen, en kunnen er dus render inconsistenties ontstaan. [/quote:d8c72c0970]

Tenzij die box uit de flow van het document wordt gehaald, zoals een float en zoals een position, wat hier dan ook gebeurt.

[quote:d8c72c0970=“ReaLX”]
IE heeft een aparte manier om dit soort dingen te renderen (zoek op google naar “CSS IE hasLayout”), en zou hier best mee te maken kunnen hebben.[/quote:d8c72c0970]

Position of width of height zou hasLayout moeten geven; ik hen het artikel daarover op http://www.positioniseverything.net als over gelezen.

[quote:d8c72c0970=“ReaLX”]
Maarja, of dit inderdaad iets te maken heeft met het probleem dat jij tegenkomt weet ik niet. Ik ben hetzelf eigenlijk nooit tegengekomen.[/quote:d8c72c0970]

Kennelijk niet, het lijkt me een zeer specifieke IE bug die mischien wel een naam heeft, maar ik kan deze niet vinden. Ik heb ook nog niet kunnen testen of IE7 er geen problemen mee heeft; ik ben afhankelijk voor m’n werk van m’n XP machine en ga daar niets aan veranderen. Iemand met IE7 die zou kunnen testen?

Kijk, het is leuk wat de specs zijn en of het nu wel of niet mag, maar dat is eerlijk gezegd een irrelevante discussie voor de praktijk.

Safari, Firefox, Opera hebben er allemaal geen enkel probleem mee, dus zou je kunnen zeggen dat de praktische implementatie van de specs het toelaat, alleen ligt IE dwars. Ik ben op zoek naar een workaround, niet naar een zelotische discussie over de vraag of het wel of niet mag. De techniek is potentieel bruikbaar, heeft een minimum aan code nodig, dus een all-in-one oplossing zou erg prettig zijn. Voorbeeld van een toepassing: http://www.xs4all.nl/~mosm/testsite/rollover.html

misschien als je javascript kan gebruiken moet je eens hier naar kijken: http://moofx.mad4milk.net/ dan kan je zelf een opacity fade maken enz. ( zie de test pagina en druk op toggle opacity: http://moofx.mad4milk.net/tests.html ) Ziet er op zich best leuk uit, ik heb het nu gebruikt op een website waarmee ik bezig ben

Ik heb ook een beetje uitgeprobeerd, wat je zegt dat klopt bijna allemaal, het klopt niet in die zin, dat de condities waaronder dit verschijnsel zich in IE6 voordoet, nog 'simpeler' zijn, zeg maar.

http://www.marsandmc.nl/internet/verdwijning.html

Kijk er maar eens naar, ik weet geen workaround, maar de case krijgt misschien weer een andere invalshoek.
(Tja workaround… het lijkt een beetje op een doolhof inrennen , vervolgens een ‘probleem’ tegenkomen, en dan ‘help help ik wil eruit’ roepen…:slight_smile:
Maar ik vind ze altijd wel leuk deze dingetjes…

Een andere totaal andere verdwijntruuk kwam ik tegen toen ik de link naar je voorbeeldfile, waar een ~ tilde instaat, naar IE6 in Virtual PC wilde plakken… wat je ook doet, de tilde krijg je niet gekopieerd, mij is het tildeteken in virtual pc onbekend, en het lukte me niet die xs4all link in IE6 (VPC) te zien…

Kan iemand met IE7 beta 2 controleren of IE7 het wel goed doet: http://www.xs4all.nl/~mosm/testsite/verdwijntruc.html ?

Dank.

Hij doet het wel, maar net even anders...

Hier het resultaat:
[img:7d02cbdf45]http://kaydies.com/tijdelijk/ie7/test.gif[/img:7d02cbdf45][img:7d02cbdf45]http://kaydies.com/tijdelijk/ie7/test2.gif[/img:7d02cbdf45]

*zucht* Lijkt me dat IE weer wat anders doet met position : absolute.

Ik zal er denk ik toch maar een bug report van maken. Dank! Over een paar weken kan ik zelf IE7 gaan installeren en uitgebreid gaan testen.

Guess what? wanneer je aan de position:absolute dimensies meegeeft (namelijk, top, bottom, left, right) dan doet IE7 het wel goed.