Fatih Hayrioğlu'nun not defteri » ie-fix http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 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’de Hata Ayıklamak için şartlı Yorumlar Kullanmak http://www.fatihhayrioglu.com/iede-hata-ayiklamak-icin-sartli-yorumlar-kullanmak/ http://www.fatihhayrioglu.com/iede-hata-ayiklamak-icin-sartli-yorumlar-kullanmak/#comments Sun, 17 Dec 2006 14:03:58 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=236 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.

CSS kuralları ve bildirimlerini gizlemek için bazı yöntemler mevcuttur. Biz bunlardan şartlı Yorumların kullanımını öğreneceğiz. şartlı Yorumlar Internet Explorer 5 versiyonu ile birlikte kullanılmaya başlanmıştır. şartlı Yorumlar xhtml kodunun yorumlanıp yorumlanmayacağını belirler. 

<!--[if IE]>
Bu kod Interner Explorer 5 ve üzeri versiyonlarda çalışır.
<![endif]-->

Bu kodlama bizim bir çok hatayı ayıklamamız için biçilmiş kaftandır. Ayrıca şartlı komutlar bize versiyon farklılıklarına göre kod yazmamızıda sağlar

<!--[if IE 6]>
<style type='text/css'>
a:link, a:visited, a:active { text-decoration: none; }
</style>
<![endif]-->

Bu kod ile sadece IE 6 versiyonunda linklerin altının çizilmesini engellemiş oluyoruz.

Eğer bir kuralı yugulamka istiyor isek ve bu kuralı belli bir web tarayıcısından gizlemek istediğimiz durumlarda şartlı Komuta (!) operatörünü ekleyerek bunu sağlayabiliriz.

<!--[if !IE 6]>
<style type='text/css'>
a:link, a:visited, a:active { text-decoration: none; }
</style>
<![endif]-->

Bu kod ile sadece IE6′da bu kodun uygulanmasını engelledik.

Bunun gibi başka işlevsel operatörlerde mevcuttur.

Operatör Açıklama Örnek
gt - den büyük <!–[if IE gt 5.5]>
gte - den büyük veya eşit <!–[if IE gte 5.5]>
lt - den küçük <!–[if IE lt 5.5]>
lte - den küçük veya eşit <!–[if IE lte 5.5]>
! değilse <!–[if !IE 5.5]>

 

<!--[if lt IE 6]>
<style type="text/css">
@import ("ie.css");
</style>
<![endif]–>

Birçok hata ayıklama metodunda şartlı Komutlar kullanılabilir.

]]> http://www.fatihhayrioglu.com/iede-hata-ayiklamak-icin-sartli-yorumlar-kullanmak/feed/ 37 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 Genişlik ve Yüksekliğin Sınırlarını Belirlemek(min-width, min-height,max-width, max-height) http://www.fatihhayrioglu.com/genislik-ve-yuksekligin-sinirlarini-belirlemekmin-width-min-heightmax-width-max-height/ http://www.fatihhayrioglu.com/genislik-ve-yuksekligin-sinirlarini-belirlemekmin-width-min-heightmax-width-max-height/#comments Mon, 09 Oct 2006 08:21:12 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=182 Bir kapsayıcı kutunun genişlik değerini minimum ve maksimum değerleri ile sınarlandırabilriz. Bu özellikler CSS2 ile birlikte gelmiştir.

min-width, min-height

Yapısı : min-width, min-height: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: inline nonreplacement elementler ve tablo elementlere
Kalıtsallık: Yok

min-width, min-height kapsayıcı kutunun minimum alacağı değerleri belirtmek için kullanırız. 

p.menu {
float:left;
width:200px;
min-width:150px;
}
Web Tarayıcı Uyumu:

Internet Explorer 7+
Netscape 6+
Opera 6+
W3C’s CSS Level 2+
CSS Profile 2.0

 

Aynı şekilde max-width ve max-height tanımlamalarıda yapılır.

max-width, max-height

Yapısı : max-width, max-height: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | none | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: inline nonreplacement elementler ve tablo elementlere
Kalıtsallık: Yok

max-width, max-height kapsayıcı kutunun maksimum alacağı değerleri belirtmek için kullanırız. 

p.menu {
float:left;
width:200px;
max-width:400px;
}
Web Tarayıcı Uyumu:

Internet Explorer 7+
Netscape 6+
Opera 5+
W3C’s CSS Level 2+
CSS Profile 2.0

 

şžöyle bir sonumuz vardır ki oda IE’nin 7 versiyonundan sonra bu özellikleri desteklemeye başlamasdır. Bu çok kullanışlı özellikleri bu nedenden dolayı kullanmamazlık yapmayacağız tabi.

IE için bir çözüm vardır. expression() özelliği bu özellik sadece IE tarafından yorumlanır. Bu özellik dinamik özellik olarak tanımlanır. Yani bu kod normalde bir javascript kodudur. 

#icerik
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
<body>
<div id="icerik">
....
</div>
</body>

Yukarıdaki tanımlamda css içerisinde javascript komutları kullanılmıştır. Bu tanımlamaları sadece IE anlayacaktır ve uygulayacaktır. Kodda eğer genişlik belirtilen maksimum değerden büyükse atanan değeri alacak değilse auto değeri alacaktır.

Ayrıca min-height için daha kısa bir çözüm vardır

#menu {
min-height:500px;
height:auto !important;
height:500px;
}
]]> http://www.fatihhayrioglu.com/genislik-ve-yuksekligin-sinirlarini-belirlemekmin-width-min-heightmax-width-max-height/feed/ 41 IE’da İkikat görülen Margin Problemi ve Çözümü http://www.fatihhayrioglu.com/ieda-ikikat-gorulen-margin-problemi-ve-cozumu/ http://www.fatihhayrioglu.com/ieda-ikikat-gorulen-margin-problemi-ve-cozumu/#comments Thu, 10 Aug 2006 11:40:40 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=131 Bir blok-level elemente float değeri ve margin değeri atandığında IE’da sorun yaşarız. Örneğin float:left değeri atanmış bir içerik kutusuna soldan 100px kadar ayırmak istediğinde IE’de soldan 100px olması gereken mesafe 200px görünecektir. 

.kapsul1 {
    float: left;
    width: 150px;
    height: 150px;
    margin-left: 100px;
}

Bu hataya yanlızca float ve margin atamalarını beraber kullandığımız blok-level elementlerde karşılaşmaktayız. Bu element’ten sonraki elementlerde bu hata görülmeyecektir. Yani bu hataya sadece ilk float-margin uygulanan blok-level element maruz kalacaktır.

Çözümü ise çok basit display:inline tanımlaması bizim sorunumuzu çözecektir.

.kapsul1 {
    float: left;
    width: 150px;
    height: 150px;
    margin-left: 100px;
    display: inline;
}

Bu makale hazırlanırken positioniseverything.net yararlanılmıştır. Daha ayrıntılı bilgiyi bu sitede bulabilirsiniz.(eng)

]]> http://www.fatihhayrioglu.com/ieda-ikikat-gorulen-margin-problemi-ve-cozumu/feed/ 20