IE8 Hakkında Bilmeniz Gerekenler

IE8 uyumluluk modu / IE8 tarayıcısının IE7 gibi render etmesini önlemek

IE8 içinde bir düğmeye basarak sayfamızı IE7 içinde çalışır gibi davranmasını sağlayabiliyoruz. Bu düğmeye tıklandığında sayfamız bundan sonra IE7 gibi davranmaya başlayacaktır. Peki, IE7 modunda sayfamızın IE8 gibi davranma şansı varmı? Maalesef bunu yapmak mümkün değil. Eğer sayfalarımızı IE8 içinde çalışacak şekilde tasarlamış ve kesinlikle bu modda çalışmasını sağlamak istiyorsak sayfamızın içine aşağıdaki parametreyi eklemek yeterli olacaktır.

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Alternatif olarak, eğer tarayıcımızın IE7 gibi davranmasını istiyorsak aşağıdaki kodu eklememiz yeterli olacaktır.

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Her ne kadar bu etiketleri ekleyerek IE8’in IE7 gibi davranmasını sağlasakta bu gerçek bir IE7 gibi olmayacaktır. Bu nedenden meta etiketlerinin kullanımını önermiyorum.

IE8 CSS Hack

IE8 için kullanacağım hack yöntemi star hack yöntemini kullarak IE7 ve daha düşük versiyonları hedef alır. Fakat eski IE tarayıcıları için daha farklı hack yöntemleride kullanılabilir.

p.myclass {
color: green;
*color: red;
}

body:last-child p.myclass {
color: blue;
}

Bu hack yöntemi kullanıldığında myclass sınıfına sahip paragraflar;

Döküman tipi HTML 4.01 Transitional olarak tanımlanmış sayfalardaki 100% yükseklik probleminin çözümü

Bu yazımda sayfamızı döküman tipi HTML 4.01 Transitional olarak tanımlanan sayfamızın 100% oranında yüksekliği ayarlamak isterken karşılaştığımız hatanın nedenlerini ve nasıl çözüleceği hakkında bilgi vermeye çalışacağım.

İlk olarak standart bir web sayfasının hangi bölümlerden oluştuğu ile işe başlamak daha doğru olacak sanırım. Çok kısa şekilde anlatmak istersem bir web sayfası HEAD ve BODY olmak üzerine iki kısımdan oluşur. HEAD bölümü sayfamızın document type, title, meta tag, css ve javascipt tanımlarımızı yaptığımız tarayıcı ekranı içinde görünmeyen fakat hem arama motorları hemde web sayfanın browser içinde nasıl yorumlanacağını belirlediğimiz bölümdür. BODY kısmı ise tarayıcı ekranında görünen kısımların oluşturulduğu bölümdür. Eğer sayfamızı Dreamweaver, Visual Studio ve benzeri üçüncü parti yazılımlar kullanarak hazırlıyorsak HEAD bölümünün en üst kısmına Document Type tanımlasıda varsayılan değer olarak eklenir. Document Type tanımlaması sayfanın hangi standartlara göre tarayıcı içinde yorumlayacağını belirler ve farklı tanımlamalar varsayılan sayfayı farklı şekilde yorumlayarak tarayıcı içinde gösterebilir. IE 6 ve Firefox olmak üzerine iki tarayıcı içinde nasıl bir çözüme gidebileceğinizi kısaca anlatmaya çalışalım.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>">

Sayfanızdaki tanımlamamızın yukarıdaki gibi olduğunu varsayıyorum. Varsayılan CSS belgemizin içine yada sayfa içindeki style tanımlaması altına

html, body {
min-height:100% // IE altında çalışmaz sadece Firefox ve Opera içinde geçerlidir
height:100%
}

Sayfamızı sarmayalan ve %100 uzamasını istediğimiz alana verilecek

#container {
height:100%;
}

bu tanımlamayı yaptığımızda sayfadaki değişikliği farkedeceksiniz ama halen eksik birşeylerin olduğunu ve halen sayfamızın istediğimiz gibi çalışmadığıda göreceksiniz. Burada çok ufak bir püf nokta daha var. Döküman tipi tanımlaması içinde yazılı olan “http://www.w3.org/TR/html4/loose.dtd” alanınıda silmememiz gerekiyor ve artık sayfamızı 100% yüksekliğinde problemsiz kullanabilir hale gelebiliyoruz. Bunun body elementi içinde font tanımlaması yapan kişiler için bir sakıncası var. Varsayılan font tanımlamalarınız bozulmuş olacak ve font özelliklerini değiştirmek istediğiniz bölümlerdeki tüm classların içine font tanımlamalarını tekrar yapmamız gerecektir.