IE7 z-index Hatası ve Çözümü

IE7’ye uygun tasarımlar dökmeye çalışıyorsanız, bu tarz sorunlarla muhakkak karşılaşıyorsunuzdur.. Bir türlü z konumunu yükselttiğiniz değer bir diğer nesnenin üzerine çıkmıyordur.. Bu sorunun sebebi z-index verdiğiniz nesnenin üst nesnelerinden birisine position uygulamanızdan kaynaklıdır. Yani bu mantıkla baktığımızda IE7 z-index uygulanacak nesnenin üst nesnelerinde position olmasını kabul etmiyor. Küçük bir örnek vermek gerekirse;

Burada hakkımda menüsünün üzerine gelince açılan bir alt menüsü mevcut.. Şuan tüm tarayıcılarda arama kutusu açılan menünün üzerine çıkmış durumda.. Şimdi z-index değerini açılan ul nesnesine verelim.. Örneğin z-index: 1 ekleyip deneyelim;

Evet şuan IE7 hariç diğer tüm tarayıcılarda (muhtemelen) açılır menü yukarıya çıktı. Ancak IE7’de ne hikmetse hala altta ???? Bunun sebebi en başta da dediğim gibi ul’nin üst nesnesi olan li’de position değeri olmasından kaynaklanıyor. Burada li’nin position değerini silemeyeceğimize göre ul’ye verdiğimiz z-index değerini li’ye vermemiz gerekecek. Yani IE7 ve diğer tarayıcılar için uyumlu hali;

Bir başka iğrenç IE hatasında görüşmek üzere ????

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir