Fatih Hayrioğlu'nun not defteri » ie-hata http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 Internet Explorer İşaret kutularının(checkbox) onchange tetiklemesindeki sorun ve çözüm önerisi http://www.fatihhayrioglu.com/internet-explorer-isaret-kutularinincheckbox-onchange-tetiklemesindeki-sorun-ve-cozum-onerisi/ http://www.fatihhayrioglu.com/internet-explorer-isaret-kutularinincheckbox-onchange-tetiklemesindeki-sorun-ve-cozum-onerisi/#comments Thu, 09 Aug 2007 07:45:39 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=366 Aslında konuyu başlıkta anlattım. İşaret kutularına onchange ekleyip tetiklemeye çalışınca çalışmıyor. Firefox’da çalışıyor sorunun çözümü 

<p>
    <input type="checkbox" onchange="document.getElementById('spDegistir').innerHTML = 'Checked: ' + this.checked;" id="change">
    <label for="change">Using onchange</label>
    <span id="spDegistir"></span>
</p>

Bu kod Internet Explorer’da çalışmayacaktır. Bizde bunun yerine onclick tetiklemesini kullanacağız.

<p>
    <input type="checkbox" onclick="document.getElementById('spDegistir').innerHTML = 'Checked: ' + this.checked;" id="change">
    <label for="change">Using <code>onchange</code></label>
    <span id="spDegistir"></span>
</p>

kaynak: http://krijnhoetmer.nl/stuff/javascript/checkbox-onchange/

]]> http://www.fatihhayrioglu.com/internet-explorer-isaret-kutularinincheckbox-onchange-tetiklemesindeki-sorun-ve-cozum-onerisi/feed/ 6 CSS Hata Ayıklama Yöntemleri http://www.fatihhayrioglu.com/css-hata-ayiklama-yontemleri/ http://www.fatihhayrioglu.com/css-hata-ayiklama-yontemleri/#comments Thu, 04 Jan 2007 21:05:00 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=242 IE’de Hata Ayıklamak için şžartlı Yorumlar Kullanmak adlı makalede bahsettiğimiz gibi "CSS ile web sitesi kodlamanın en büyük sorunu CSS’in özelliklerini yorumlayamayan veya yanlış yorumlayan web tarayıcılarıdır. Bu nedenle CSS ile web sitesi kodlarken bu tip hataları ayıklamamız gerekiyor. CSS ile hata ayıklama web tarayıcı gruplarının veya bir kısım web tarayıcısı için kuralları veya bildirimleri gizlemek veya göstermek şeklinde uygulanır."

Biz CSS’de hata ayıklamak için bir çok yöntem kullanırız. Bunların en çok kullanılanları aşağıda anlatılmıştır.

Çocuk Seçicileri Kullanarak Hata Ayıklamak

Çocuk seçicilerini incelemek için tıklayınız. Çocuk Seçicileri CSS hata ayıklama yöntemi olarak kullanılabilir. Çocuk Seçicileri Windows sistemlerinde kurulu olan IE6 ve alt versiyonlarında görüntülenmeyecektir, bu nedenle IE6 ve altı versiyonlarda görünmesi istenmeyen tanımlar Çocuk Seçicileri kullanarak gizlenebilir.

Her tanımlamadan sonra ikinci bir tanımlama olarak kullanılır. İkinci tanımlama çocuk seçicisi olmalıdır. 

.icerik h3 {height:21px;}
.icerik > h3 {height:auto; min-height:21px;}

IE 7 Çocuk Seçicilerini desteklemektedir. Bu metot uygulanırken bu dikkate alınmalıdır.

Özellik(Attribute) Seçicileri Kullanarak Hata Ayıklamak

Diğer bir hata ayıklama yöntemi Özellik Seçicileri kullanarak hata ayıklamaktır. Bir çok yeni nesil web tarayıcısı (FF ve Safari) bu kullanımı destekler, ancak IE6 ve altı versiyonlar bu özelliği desteklemez. IE7 bu kullanımı desteklemektedir. Bu hata ayıklama yöntemi yukarıda bahsettiğimiz “Çocuk Seçicileri ile Hata ayıklama” yöntemi gibi kullanılır.

Özellik Seçicileri kullanarak elementlerin id’lerine göre atamalar yapabiliriz. Bu bize bir çok avantaj sağlar. Bu avantajları hata ayıklamak içinde kullanabiliriz. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
	<style type="text/css">
    p{background: red; /* Tüm web tarayıcılarında görünür */}
    body[class|="sayfaYapisi"] p{ background: green; /* IE 7 ve Yeni web tarayıcılarında görünür Opera hariç */}
    </style>
</head>
<body class="sayfaYapisi">
	<p>Test</p>
</body>
</html>

Genel Seçicileri (*) Kullanarak Hata Ayıklamak

Her ne kadar bu hata IE7 ile birlikte düzeltildiyse de çok kullanışlı bir hata ayıklama metodudur. Kullanımı çok basittir. 

a:hover {border: 1px dotted black;}
* html a:hover { // bu tanımlamayı ie6+ ve altı versiyonlarda görünmeyecektir.
	border-style: solid;
}

Ters Bölü İşareti(\) İle Hata Ayıklama

IE5x/Win versiyonları bu karakteri yorumlamazlar bu nedenle IE5x/win versiyonlarından kodumuzu gizlemek için bu yöntemi kullanabiliriz. CSS kodu yazarken en çok ihtiyacımız olan genişlik tanımının IE5x versiyonlarda yanlış algılanmasıdır. bu hatayı düzeltmek için bu yöntem kullanılabilir. 

#icerik {
  width: 770px;
  wid\th: 750px; /* ie5x - win bu kodu görmeyecek */
}

Ben şahsen kutu modelinde hata ayıklamak için tantek‘in kullandığı metodu kullanıyorum, daha sağlıklı ve tüm web tarayıcıları göze alınarak hazırlanmış bir hata ayıklama metodudur tavsiye ederim. Ama bu yönteminde kullanıldığını bilelim.

Alt Çizgi (_) ile Hata Ayıklama

Bu yöntemde IE4-6 versiyonlarda hata düzeltmek için kullanılabilir. 

#menu {
  position: fixed;
  _position: static;
}

Burada yeni nesil web tarayıcıları ikinci tanımlamayı görecek ve buna göre yorumlama yapacaktır. Ancak IE4-6/win versiyonları (_) anlayamadığı için bu kodu yorumlamayacak ve ilk koda göre hareket edecektir.

Owen Yöntemi ile Hata Ayıklama

şžimdiye kadar ki tüm yöntemler Internet Explorer içindi. Bunun nedeni bir çok hatanın IE’den kaynaklanmasıdır tabi. şžimdi kullanacağımız metod ise Opera için bir hata ayıklamasıdır. 

.solAlan {
	background-image: none
}
/*  Asagidaki bolum Opera 6 ve altı veya IE6/win görünmeyecek */
head:first-child+body .solAlan {
	background-image: url(menu.png);
	background-attachment: fixed;
}

Bu yöntem hem Opera 6 ve altı hem de IE6 ve altı versiyonlar için geçerlidir. Sadece Opera 6 ve altı versiyonlar için kod yazmak istersek

html>body div.alt {
	c\olor: red; /* sadece Opera 6 için */
}
head:first-child+body div.alt {
	color: black;
}

Yorum Kodları içinde (\) Kullanımı ile IE/Mac’de Hata Ayıklama

IE/Mac versiyonlarında yorum satırı içindeki ters bölme işaretini(\) yorumlamamaktadır. Bu nedenle IE/Mac versiyonlarında hata ayıklamak için bu yöntem kullanılabilir. 

/* bu alani IE5/Mac den gizleyelim \*/
* html {
	height: 1px;
}
/* hata ayiklama sonu */

Bunların dışında kutu modeli hata ayıklaması için kullandığımız tantek‘in yöntemi, Css de kodumuzu İE’den gizleme adlı makalede kullandığımız !important yöntemi ve IE’da min-width, min-height,max-width, max-height Kullanmak makalesinde kullandığımız expression() yöntemleride vardır. Bunlardan daha önce bahsettiğimiz için değinmedik. Bunların dışında kullanılan diğer bazı yöntemler olsa da biz burada genel kabul görmüş yöntemleri yazmayı uygun bulduk.

Kaynaklar

]]> http://www.fatihhayrioglu.com/css-hata-ayiklama-yontemleri/feed/ 16 IE’un 3 piksel Metin Öteleme Hatası http://www.fatihhayrioglu.com/ieun-3-piksel-metin-oteleme-hatasi/ http://www.fatihhayrioglu.com/ieun-3-piksel-metin-oteleme-hatasi/#comments Sun, 10 Dec 2006 16:42:16 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=231 Bu hata IE5-6/Win versiyonlarında görünür. Float uygulanmış elementlere komşu metinlerin maruz kaldığı bir hatadır. Örneği bir elementinize float:left tanımı yaptınız ve yanına bir paraf yazı eklemek istediğinizde, ie5-6 versiyonlarında soldaki float uygulanmış element içeriği boyunda sağdaki metin soldan 3 piksel kadar içeriğini öteleyecektir.

.solKolon {
    float: left;
    width: 200px;
    background-color:#00CCFF;
}
p {
    margin-left: 200px;
    background-color:#CCCCCC;
}

Başlangıç olarak değişen içeriğine göre yükselik alan metin alanına(sağdaki metin) müdahale edeceğiz. Görünüm olarak 3 piksellik boşluğu kaldırabiliriz. IE5-6 yükseklik tanımını min-height gibi yorumlar, elementin yüksekliğine küçük bir değer(height:1%) atadığımızda bu elementin boyutunu değiştirmeyecektir. Bu atama diğer web tarayıcılarını etkileyecektir bu nedenle diğer web tarayıcılarından bu kodu gizlemeliyiz. 

/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. \*/
* html p {
	height: 1%;
}
/* IE5/Mac den gizlemeye son */

Ancak şöyle bir sorunumuz daha var ki önceki konulardan bildiğimiz gibi bu alana float uygulandığında margin-left:200px tanımını IE iki kat görecektir bunu engellemek için margin-left değerini sıfırlamalıyız.

/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. \*/
* html p {
  height: 1%;
  margin-left: 0;
}
/* IE5/Mac den gizlemeye son */

İçerideki boşluğu aldık ancak elementler arasında boşluk kaldı bunu kaldırmak için sağ margin değerine -3 piksel atama yapmalıyız. 

/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. \*/
* html p {
  height: 1%;
  margin-left: 0;
}
* html .solKolon {
  margin-right: -3px;
}
/* IE5/Mac den gizlemeye son */

Bu tüm sorunlarımız çözecektir. Tabi float uygulanan elementin içinde resim yoksa. Resmin olduğu durumlarda sorun olacaktır. Bu sorunu çözmek için IE5/Win için resmin sağına ve soluna -3 piksel margin ataması yapmalıyız. IE6 bu margin’leri görmemelidir. Bunun için kodumuz şöyle olacaktır:

/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. \*/
* html p {
  height: 1%;
  margin-left: 0;
}
* html img.solKolon {
  margin: 0 -3px;
  ma\rgin: 0;
}
/* IE5/Mac den gizlemeye son */

Biliyorum bu kod bizim sade ve temiz kod mantığımıza çok ters ama yapılabilecek pek bir şey de yok. Bu CSS’in sorunu değil tamamen IE’nin sorunundan kaynaklanıyor.

Microsoft bu hatasını sonunda anladı ve yeni versiyonu IE7‘de bu sorunu giderdi. Ama bu bizim hatayı ayıklamamız anlamına gelmiyor. En azında IE7 kullananlar çoğalana kadar. Hala 1999′da çıkan IE5 için kod yazdığımızı düşünürsek bayağı bir zaman daha bu kodları yazmamız gerekiyor:/

Kaynaklar

]]> http://www.fatihhayrioglu.com/ieun-3-piksel-metin-oteleme-hatasi/feed/ 9