HomeBlogOnline EğitimCSSIE6 sık sık yaşadığımız Css problemini düzeltebilecek bir kaç ipucu

IE6 sık sık yaşadığımız Css problemini düzeltebilecek bir kaç ipucu

  • 2 November 2013
  • Posted by: Kenan AGKURT
  • Category: CSS, Htaccess, Html 5, Online Eğitim
No Comments
  • DOCTYPE Kullanın

HTML sayfanıza kodlamaya başlamadan önce ve sayfanın en üstüne eklemeniz gereken bu kodu mutlaka ekleyin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

,eğer XHTML kullanıyorsanız:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

bu kodu kullanabilirsiniz.

  • position: relative elementini ayarlama

position:relative elementini kullanmak internet explorer’de sorun yaşatabiliyor bu yüzden relative yerine direk boyutlarını görünürlüğü ayarlayamak ie css problemini çözmenize yardımcı olacaktır.

 

3. Float etiketi kullanılan yerde display:inline elementini kullanın

Float kullandığınız elementlerde özellikle marginde bug oluşabilmektedir. Örneğin . Sol margini 5 px verdiğinizi varsayalım. IE6 da 10px gibi görülebiliyor. Bu yüzden

float: left
margin-left : 5px ;
display:inline;

5. Tekrar eden karakter hatası

Hazırlamış olduğunuz katmanda özellikle (float etiketi kullanıldığında) IE ile açtığınızda, bazen yazılarınızın bir kısmı görünmez veya taşma yapar bunları  en aza veya kaldırmanıza yardımcı olması için Css dosyanızı hazırlarken bir kaç basit ama işinize yarayacak çözümleri aşağıda kısaca sıralıyorum :

  1. Tüm float kullandığınız yerde display:inline kullanmayı alışkanlık haline getirin.
  2. Kullandığınız son float etiketine  [highlight style=’cream’] margin-right:-3px;[/highlight] ekleyin.
  3. Son float etiketine şu yorumu ekleyin, i.e. <!--[if !IE]>buraya istediğiniz bir yorumu ekleyebilirsiniz...<![endif]-->
  4. Son element konteynirin için boş bir div tagı ekleyin.

6. <a> elementinde sadece link ve hover elementlerini kullanın.

IE6 sadece a:hover şeklinde algılayabiliyor yani urun a:hover şeklinde bir yapı IE6 için geçerli değildir..

7.  IE için !important veya gelişmiş (advanced selectors)seçiciler kullanın.

IE6 için klasik yöntemlerin dışında CSS için valid kodlar yazmanız mümkün. Örneğim min-height – mininum yükseklik için aşağıdaki gibi bir kodlama yapabilirsiniz:

#element {
	min-height: 20em;
	height: auto !important; /* tum tarayicilar icin */
	height: 20em; /* IE6  sende anla /*
}

IE6 min-height selectoru anlamasa da ona özel kodlama yaparak tasarımlarınızın düzgün görünmesini sağlayabilirsiniz. Bu ek farklı bir seçenekte şu şekilde yapılabilir:

internet_explorer_logo_6
#element {
	min-height: 20em;
	height: 20em;
}

/* IE6 usttekini gormezden geldi */
#element[id] {
	 height: auto;
}

8. Yüzde değerindeki hatalar
Piksel olarak değilde yüzde (percent) olarak çalıştığımızda bazen IE nin kafası ! karışabiliyor. Zaten karışmasa da şaşmak gerek .) Bu tarz bir hataya yol açmamak için !important değerini ekleyebilirsiniz. Mesela ;


body {
	margin: 2% 0 !important;
	margin: 20px 0; /* Sadece IE6 icin */
}

9. Test edin ve sık sık kontrol edin
IE6 test etmeden sitenizde yayınlamayın. Ara ara kontrol ederek sitenizin IE de stabil çalıştığını görün. Eğer IE ve Firefox de problem yoksa diğerlerinde de yoktur :)

 

IE6 için gözden kaçırdığım veya önerdiğiniz bir şey varsa yorumlarınızda belirtebilirsiniz.