Fatih Hayrioğlu'nun not defteri » Hata ayıklama http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 İE 6 iki CSS seçicisi Sorunu ve Çözümü http://www.fatihhayrioglu.com/ie-6-iki-css-secicisi-sorunu-ve-cozumu/ http://www.fatihhayrioglu.com/ie-6-iki-css-secicisi-sorunu-ve-cozumu/#comments Fri, 02 Oct 2009 12:42:39 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1336 Yine bir ie6 sorunu ile karşınızdayız. Microsoft ie6 kullananları düşünerek 2014′e kadar ie6 desteğini sürdüreceğini söylemiş, peki bizi kim düşünüyor, Microsoft’un düşünmediği kesin. Neyse biz konumuza gelelim.

Sorunumuz tam olarak şöyle; id atadığım bir elemana sınıf tanımladığımda ve id ve sınıf tanımlarında aynı özellik tanımlamış isem diğer tarayıcılar sorusuz çalışırken ie6 sorun çıkarıyor. Aynı şey iki adet sınıf tanımladığımızdada yaşıyoruz. 

Uygulama olarak şöyle bir uygulama yaptım. Bir elemana bir id verip bu id’li elemanın ardalan resmi olarak genel bir resim tanımladım. Daha sonra farklı bölümler için bu elemena farklı resimler atamam gerektiğinde aynı elemana .bolumA, .bolumB, vd. gibi sınıflar atadım. Bir bölümü olmayan sayfalarda ana resmimi görünecek bölümü olan sayfalarda ise ilgili resim görünecekti. 

#tanitimAlani{
    background:transparent url(../images/genel.jpg) no-repeat scroll center top;
    text-align:center;
    width:100%;
}

#tanitimAlani.bolumA {
	background:transparent url(../images/bolumA.jpg) no-repeat scroll center top;
}

#tanitimAlani.bolumB {
	background:transparent url(../images/bolumB.jpg) no-repeat scroll center top;
}

Tanımı ile yapıyordum. Bu düşüncem tüm tarayıcılarda sorunsuz çalışırken ie6 sorun çıkardı. İlk atanan genel resmini gösterdi sadece, bölüm resimlerini göstermedi.

Çözüm

id ile atadığım genel ardalan resmi tanımı kaldırıp genel içinde bir sınıf(.bolumGenel) tanımladım ve bu sorunu aştım. Yani kodumu şöyle değiştirdim.

#tanitimalani{
    text-align:center;
    width:100%;
}

.bolumA {
	background:transparent url(../images/bolumA.jpg) no-repeat scroll center top;
}

.bolumB {
	background:transparent url(../images/bolumB.jpg) no-repeat scroll center top;
}

.bolumGenel {
	background:transparent url(../images/genel.jpg) no-repeat scroll center top;
}

hribar.info’nun yaptığı örnek güzel inceleyin.

http://hribar.info/static/projects/multi-class_ie6_bug/error.html

 Kaynaklar

]]> http://www.fatihhayrioglu.com/ie-6-iki-css-secicisi-sorunu-ve-cozumu/feed/ 9 FireBug 1.4 sürümü çıktı http://www.fatihhayrioglu.com/firebug-1-4-surumu-cikti/ http://www.fatihhayrioglu.com/firebug-1-4-surumu-cikti/#comments Sun, 19 Jul 2009 12:13:09 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1284 Firebug 1.4 sürümü çıktı. Firebug web sitelerine tarayıcı üzerinden düzenleme ve denetleme yapabileceğimiz, ayrıca hata ayıklaması yapmamızı ve network hareketlerini izlememizi sağlayan güzel bir Firefox eklentisidir. HTML, CSS ve javascript kodlarına tarayıcı üzerinden etkileşimli olarak müdahale etme olanağı sağladığı için biz web kod yazarları için bulunmaz bir araçtır.

Yeni sürüm ile gelen özellikler;

  • Sekmeleri üste alınmış. Görsel olarak biraz daha derli toplu olması için. Eskiye alışanlar için ilk başta biraz garip olsada zamanla alışacağız.
  • Birden fazla panelde arama imkanı. Bu bir çok zaman gereksinim duyduğumuz bir şey idi.
  • Daha gelişmiş bir Net paneli
  • Panel akif-pasif geçişi kolaylaştırılmış.
  • Script paneli performansı arttırılmış.
  • Firefox 3.5 desteği var

Bunun dışında 150′den fazla hata giderilmiş.

http://getfirebug.com/

]]> http://www.fatihhayrioglu.com/firebug-1-4-surumu-cikti/feed/ 3 Firefox’da satıriçi(inline) elemanların padding-right sorunu http://www.fatihhayrioglu.com/firefoxda-satiriciinline-elemanlarin-padding-right-sorunu/ http://www.fatihhayrioglu.com/firefoxda-satiriciinline-elemanlarin-padding-right-sorunu/#comments Tue, 12 Feb 2008 22:07:39 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=456 Şimdiye kadar hep Internet Explorer ile ilgili sorunlara değindim. Şimdi ise size en çok sevdiğim tarayıcı Firefox’un küçük bir sorununu aktarmaya çalışacağım. Amaç sorunu bilip ona göre kod yazmak.

Birden fazla satır içeren satıriçi(inline) elemanlara padding-right değeri atandığında, satıriçi elemanın sonuna padding-right değeri eklenir. Firefox 2 ve alt sürümlerinde pading-right değeri uygulandığı satıriçi elemanın tümüne uygulanacaktır. Bu problem Padding-left’de yoktur.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div#kapsul { width: 260px; border: 1px dotted #999; margin: 40px }
span#metin { background: red; padding: 0 3em 0 0;}
</style>
</head>
<body>
<div id="kapsul">
<span id="metin">This is a longer line with some more text to see how the line will wrap in container</span>
</div>
</body>
</html>

Örnek sayfayı görmak için tıklayınız.


Internet Explorer 7(sorunusuz)


Firefox (sorunlu)

Ben hala Firefox’u çok seviyorum :D

Kaynak: https://bugzilla.mozilla.org/show_bug.cgi?id=122795

]]> http://www.fatihhayrioglu.com/firefoxda-satiriciinline-elemanlarin-padding-right-sorunu/feed/ 15 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 İpuçları 11 – CSS Kodlarını Web Tarayıcıları ile Test etmek http://www.fatihhayrioglu.com/css-ipuclari-11-css-kodlarini-web-tarayicilari-ile-test-etmek/ http://www.fatihhayrioglu.com/css-ipuclari-11-css-kodlarini-web-tarayicilari-ile-test-etmek/#comments Sat, 27 Jan 2007 14:20:50 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=259 CSS ile web sayfası oluştururken en çok yaptığımız işlerden biri yaptığımız sayfaları yazarken belirli aralıklarla web tarayıcıları ile deneyerek eğer hata var ise zamanında düzelterek sorunları büyümeden gidermektir. Ben kod yazarken her nesneyi yerleştirdikten sonra web tarayıcısı ile test ediyorum. Mesela arama bölümünü ekledikten sonra, banner alanını ekledikten sonra vb. Bazı önemli öğelerde bu test işini daha fazla yapıyorum mesela menüyü oluştururken, sayfa genel yapısını oluştururken.

Kodlarımı genelde ilk olarak Firefox’da test ediyorum. Belli aralıklarla IE’de test ediyorum. Tüm site bittikten sonrada Opera’da test ediyorum. Son olaraktan IE eski sürümleri ile test ediyorum. Bu iş için bazı programlar olsada ben her zaman web tarayıcılarının kendileri ile test etmeyi uygun görüyorum. Tüm kodlama bittikten sonra böyle bir program kullanarak test etmekte yararlı olabilir.

Firefox kullanmamın nedeni CSS ve XHTML ile sorunlarının az olması ve çok kullanışlı web araçlarının(web developer ve FireBug gibi) olmasının bunda etkisi büyük.

Not: “Eğer yazdığınız kod Firefox’da problemli ise hata sizdedir, eğer yazdığınız kod IE’de hatalı ise sorun IE’dedir” genel kabulü ile hareket ediyorum. Belki IE7 bunu biraz kırdı ise de daha çok yeni ve kullanım oranı hala düşük.
]]> http://www.fatihhayrioglu.com/css-ipuclari-11-css-kodlarini-web-tarayicilari-ile-test-etmek/feed/ 20 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 CSS İpuçları – 2 http://www.fatihhayrioglu.com/hata-yakalama-yontemleri/ http://www.fatihhayrioglu.com/hata-yakalama-yontemleri/#comments Sat, 15 Jul 2006 20:59:09 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=74 CSS ile sayfa planlama ve gelişmiş sayfa tasarımlarında başınıza bir çok hata gelebilir. Bu gayet normal bir haldir. Mesele bu hataları çözmektir.

Hata çözmede izlenecek yöntemlerden bir tanesi elementlere kenar çizgisi(border) atamaktır.

li a {
	border: 1px solid red;
}

Diğer bir yöntemde elemente ardalan rengi(background-color) uygulamaktır.

#icerikalani {
	background-color:#999;
}

Böylece elementin etki alanı görülecek ve hatayı tespit kolaylaşacaktır.

]]> http://www.fatihhayrioglu.com/hata-yakalama-yontemleri/feed/ 3