‘Hata ayıklama’ etiketi için sonuçlar
İE 6 iki CSS seçicisi Sorunu ve Çözümü
Ekim 2nd, 2009 • 7 yorum CSS, XHTML
Etiketler: hata, Hata ayıklama, ie6, iki-seçici-sorunu
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
FireBug 1.4 sürümü çıktı
Temmuz 19th, 2009 • 3 yorum CSS, XHTML
Etiketler: firebug, Firefox, Hata ayıklama, web
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ş.
Firefox’da satıriçi(inline) elemanların padding-right sorunu
Şubat 13th, 2008 • 15 yorum CSS, XHTML
Etiketler: Firefox, hata, Hata ayıklama, padding-right
Ş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. Okumaya devam edin »
Internet Explorer İşaret kutularının(checkbox) onchange tetiklemesindeki sorun ve çözüm önerisi
Ağustos 9th, 2007 • 6 yorum Javascript
Etiketler: hata, Hata ayıklama, ie, ie-hata, ie6, işaret-kutucuğu, Javascript
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/
CSS İpuçları 11 – CSS Kodlarını Web Tarayıcıları ile Test etmek
Ocak 27th, 2007 • 19 yorum CSS
Etiketler: CSS, Hata ayıklama, İnternet Tarayıcısı, test-etmek
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. Okumaya devam edin »
CSS Hata Ayıklama Yöntemleri
Ocak 4th, 2007 • 14 yorum CSS, XHTML
Etiketler: Attribute, backslash, CSS, Çocuk-Seçicileri, Firefox, Hata ayıklama, ie-fix, ie-hata, ie6, ie7, important, Opera, owen, XHTML
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." Okumaya devam edin »
