Ik ben tegen het volgende opgelopen tijdens het aanpassen van een CSS stylesheet, zodat deze compatible werd met Internet Explorer 6/7.
Wanneer je 2 divs hebt direkt naast elkaar en je hebt een image in de 1ste div welke overflowt buiten de eerste div, dan zal de image in Firefox ook de 2e div ernaast overlappen mits de image een hogere z-index heeft dan de 2e div.
In IE echter is dit niet het geval. In IE zal de 2e div altijd de image overlappen/bedekken, ook al heeft de image een hogere z-index. En dat is nu juist het probleem waar ik tegenaan ben gelopen.
Kort samengevat komt het erop neer dat een genest element welke overflowt in IE altijd bedekt zal worden door een later gerenderd element, onafhankelijk van de z-index waarden.
Ik weet niet of men dit echt als fout kan beschouwen, maar het is wel uiterst irritant dat z-index waarden niet worden gerespecteerd. Of althans in IE is de aanpak m.b.t. het respecteren van z-index's anders dan in Firefox. In Firefox kijkt de browser naar de absolute z-index waarde, onafhankelijk van nesting. In IE echter lijkt nesting wel een rol te spelen en z-index's lijken alleen beperkt effect te hebben binnen de scope van het parent element.(In ieder geval waar sprake is van overflow)
Weet iemand hoe men toch de overgeflowde image de 2e div kan laten overlappen?
Wanneer je 2 divs hebt direkt naast elkaar en je hebt een image in de 1ste div welke overflowt buiten de eerste div, dan zal de image in Firefox ook de 2e div ernaast overlappen mits de image een hogere z-index heeft dan de 2e div.
In IE echter is dit niet het geval. In IE zal de 2e div altijd de image overlappen/bedekken, ook al heeft de image een hogere z-index. En dat is nu juist het probleem waar ik tegenaan ben gelopen.
Kort samengevat komt het erop neer dat een genest element welke overflowt in IE altijd bedekt zal worden door een later gerenderd element, onafhankelijk van de z-index waarden.
Ik weet niet of men dit echt als fout kan beschouwen, maar het is wel uiterst irritant dat z-index waarden niet worden gerespecteerd. Of althans in IE is de aanpak m.b.t. het respecteren van z-index's anders dan in Firefox. In Firefox kijkt de browser naar de absolute z-index waarde, onafhankelijk van nesting. In IE echter lijkt nesting wel een rol te spelen en z-index's lijken alleen beperkt effect te hebben binnen de scope van het parent element.(In ieder geval waar sprake is van overflow)
Weet iemand hoe men toch de overgeflowde image de 2e div kan laten overlappen?
:strip_icc():strip_exif()/u/35587/icon-got.jpg?f=community){kind=icon}
).
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
:strip_icc():strip_exif()/u/284710/crop5ad23704eeff3_cropped.jpeg?f=community)
