table{border-collapse:collapse}
table tr{border-bottom:1px solid #000;}

Gayet basit normal bir tanım. Ancak ie6 ve 7 için durum öyle değil. Karmaşık gelmiş olmalı ki bu atamayı uygulamadı. border-collapse:collapse tanımı kenar çizgileri arasında boşluk olmamaısı için kullanıyoruz.

Peki İnternet Explorer 6 ve 7 için nasıl bir çözüm üretmeliyiz. Satıra değilde satırı oluşturan hücrelere kenar çizgisi verirsek sorunumuz ortadan kalkıyor.

table{border-collapse:collapse}
table td{border-bottom:1px solid #000;}

Örneği görmek için tıklayınız.

Kaynak

http://www.csarven.ca/tr-border-trick-for-ie

Burada ie8′de css düzeltmesi yapmamız gerektiğinde nasıl bir yol izleyeceğimiz konusunda bir ipucu vereceğim.

	.uyari { color /*\**/: red\9 }

Bir çok yerde bu kodun tek başına ie8 için yeterli olduğu yazıyor. Ama ben test ettiğimde ie7′de bu kodu görüyor. Bunun için

    .uyari{color:blue} /* tum taricilar */
    .uyari { color /*\**/: red\9 } /* ie8 ve ie 7 */
    *+html .uyari{color:blue} /* ie 7 */

Şeklinde bir çözüm işimize yaracaktır.

Örneği görmek için tıklayınız.

Ayrıca şartlı yorumlar yardımı ile de yapabiliriz.

<!–[if gte IE 8]>
	<style type="text/css">
	.uyari {
		color: red;
	}
    </style>
<![endif]–>

Ayrıca daha önce bahsettiğimiz ie7 gibi yorumlama kodu var.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Testlerimi ietester ile yaptım.

• http://paulirish.com/2009/browser-specific-css-hacks/
• http://acidmartin.wordpress.com/2009/06/04/css-hack-for-internet-explorer-8/
• http://snipplr.com/view/15167/ie8-csshacks/
• http://www.evotech.net/blog/2009/03/ie8-css-support/
• http://www.fatihhayrioglu.com/internet-explorer-8i-7-gibi-yorumla-kodu/

Kodlama çok basit

::-moz-selection {
    background:#c00;
    color:#fff;
}
::selection {
    background:#c00;
    color:#fff;
}

Kodlamanın birinci kısmı(::-moz-selection) mozilla tabanlı yani Firefox için ikinci kısmı ise normal CSS 3 ile birlikte gelen koddur. Webkit tabanlı tarayıcılar ve Opera 9.5 bu kodu destekliyor.

Ayrıca diğer seçicilerede bunu uygulayabiliyoruz. Bağlantılar için farklı bir renk tanımlayalım mesela

a::-moz-selection {
    background:#1259C7;
    color:#fff;
}

a::selection {
    background:#1259C7;
    color:#fff;
}

Örnek olarak bu sitede herhangi bir metni seçince göreceksiniz.

Internet Explore desteklemiyor. Bunun haricinde Firefox 2, Safari, Opera 9.5 ve Google Chrome destekliyor.

Kaynaklar

• http://www.quirksmode.org/css/selection.html
• http://css-tricks.com/overriding-the-default-text-selection-color-with-css/
• http://www.w3.org/TR/css3-selectors/

table tr{
    background:url(images/southpark.gif) 0 0 no-repeat;
    height:130px;
}

Örneği görmek için tıklayınız.

tanımlaması Firefox ve Opera da sorunsuz çalışırken IE ve Webkit tabanlı tarayıcılarda sorun çıkaracaktır.

Çözüm için

table tr{
    background:url(images/southpark.gif) 0 0 no-repeat;
    height:130px;
    position:relative;
}

table tr td{
    color:#fff;
    font:12px Arial, Helvetica, sans-serif;
    background:none;
}

tanımlamaları yeterlidir. Örneği görmek için tıklayınız.

Kaynak

http://test.pixelbebop.com/test33/

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Kodunu sitemize eklememiz yeterli. Bu META etiketi sayesinde Sayfalarımız Internet Explorer 7′de görünüyor gibi yorumlanacaktır.

Bir projede meta’ların ilk başına yazınca olmadı, </head>’in bir öncesine koyunca oldu aklınızda bulunsun.

Genel olarak değerlendirdiğimizde daha hızlı, daha güvenli ve yeni özellikler sunuyor ie8. Kod yazarları için ie8′in en büyük avantajı CSS2.1(CSS3′ün bazı özelliklerini destekliyor) ve javascript standartlarını tam desteklediğini duyurmasıdır. Ayrıca sorun yaşadığımızda bize ie7 gibi davranma seçeneği sunması da güzel.

Bence Microsoft Internet Explorer 8 diğer tarayıcıların yükselişini engelleyecek yetenekte bir tarayıcı değil. Bunda kaybedilen pazar paylarının ve alternatiflerine hızlı yanıt verememesinin büyük etkisi var. Ayrıca ie6 gibi garabet bir tarayıcıya uzun yıllar bizi mahkum etmeninde etkisi var. Bence Windows tarayıcı pazarından çekilmelidir. Tek güzellik standartlara uygun bir tarayıcının böyle yaygın bir işletim sistemi ile gelmeside güzel. 

Bu arada bize güzel bir iş çıktı yaptığımız siteler ie8′de sorunlu mu değil mi? Kontrol zamanı

İndirmek için tıklayınız.

• http://www.melihbayramdede.com/2009/03/19/internet-explorer-8-yayinlandi-hemen-indirin/ 
• http://ajaxian.com/archives/ie-8-launches-at-mix09-probably-without-one-of-your-features 
• http://www.readwriteweb.com/archives/microsoft_releases_internet_explorer8_rc1.php 
• http://www.computerworld.com/action/article.do?command=viewArticleBasic&articleId=9129906 
• http://blog.wired.com/business/2009/01/more-details-ab.html 
• http://www.microsoft.com/windows/internet-explorer/beta/readiness/developers-new.aspx 
• http://ejohn.org/blog/javascript-in-internet-explorer-8/ 
• http://www.alistapart.com/articles/beyonddoctype 
• http://blogs.msdn.com/ie/archive/2008/01/21/compatibility-and-ie8.aspx 
• http://blogs.msdn.com/ie/archive/2008/03/03/microsoft-s-interoperability-principles-and-ie8.aspx 
• http://daron.yondem.com/tr/PermaLink.aspx?guid=e649f2d5-0f91-4ed0-a231-74321d01d5b3 
• http://www.fatihhayrioglu.com/internet-explorer-8e-kisa-bir-bakis/
• http://www.thestandard.com/news/2009/01/28/ie8-rc1-gains-ground-javascript-race
• http://blogs.msdn.com/ie/archive/2009/01/29/overview-of-platform-improvements-in-ie8-rc1.aspx

Web kod yazarlarını en çok zorlayan konulardan biri farklı tarayıcılara uyumlu kod yazmaktır. Birinin düzgün yorumladığını diğer farklı yorumlar ve bizim için arayış ve çile başlar, çözünce geçici bir sevinç yaşarız genelde. Farklı tarayıcılara göre kod yazmak bu iş için devamlı bir sorun olarak kalacağını düşünüyorum. Peki bu durumu nasıl aşacağız derseniz, yaşadığım süreçlerden size şunu söyliyebilirimki zamanla aynı hataları aldığımız için çözümü fazla zaman almıyor. Azda olsa farklı hatalarla karşılaşıyoruz, bunlarıda arayıp çözüyoruz. 

Web kod yazarları her zaman bir tarayıcı ile uğraşır. Vakti zamanında Netscape Navigator 4, Internet Explorer 5, Internet Explorer 5.5 uğraştık. Şimdide ve son olarakta Internet Explorer 6 ile uğraşıyoruz. 27 Ağustos’ta Internet Explorer 6 7.senesini doldurdu.

Ama asıl sorun standart dışı tarayıcılar için ürettiğimiz fazla kodlar. İşte burada Internet Explorer 6 sorun olmaya başlıyor.

Yaklaşık 1-1,5 senedir yazdığım tüm kodlarda Internet Explorer 6 ile sorunlar yaşamaktayım. Yaşadığımız sorunlardan dolayı moralimizin bozulması ve çalışma azmimizi kırılmasını. Harcadığımız gayret ve zamanı düşünürsek bu olay web kod yazarları için çok büyük bir dert. Bu sorunların manevi olduğu kadar maddi kayıplarıda var kaybedilen zaman düşünüldüğünde bir çok firma için ciddi parasal kayıp söz konusu. Buna Türkiye’deki bir çok firma bilmiyor, bilenlerde çare aramıyor. Ama yurtdışında durum farklı.

Internet Explorer 6 ile uğraşırken kaybedilen zaman ve eforu düşüne bazı firmalar(Facebook, Apple ve 37signals) web sitelerinde internet Explorer 6 sürümü için destek vermeyeceklerini bildirdi. Ayrıca internet Explorer 6′a karşı kampanya düzenleyen sitler var. Bir çok kod yazarı bu sorunu en kısa zamanda çözmek için çabalıyor. M. Dave Auayan  Mart 2009′da internet Explorer 6 uyumuna son vermek için bir site açtı IE Death March.

Internet Explorer 6. sürümünün bizi bu kadar uğraştırmasında Microsoft’un yeni sürüm çıkarmak için çok beklemesinin çok büyük katkısı var. Kullanıcı için bu bir bakıma iyi bir bakıma kötü sonuçlar doğurdu. İyi sonuçları bu süreçte alternatif tarayıcıların büyümesine katkı sağladı. Kötü sonuçlarını ise daha çok web kod yazarları çekiyor. Her yazdığı kodu internet Explorer 6′ya göre test edip uyarlamak zorundayız. Bu zorunluluğu hala Internet Explorer 6 kullanan %20-25′in üzerinde olan kullanıcı yüzdesi. Farklı istatistik sitelerinde farklı değerler alıyoruz. Benim sitemde %14 gibi bir oran var. 

CSS Problemleri ve Çözüm Önerileri adlı bölümdeki 14 konudan 10 tanesi internet Explorer ile ilgili sorunlar. Bunları sayarsak;

• IE’de Hata Ayıklamak için şartlı Yorumlar Kullanmak
• CSS Hata Ayıklama Yöntemleri
• Css de kodumuzu İE’den gizleme
• CSS ile Kutu modeli, sorunları ve çözümleri
• IE’da İkikat görülen Margin Problemi ve Çözümü
• IE’da min-width, min-height,max-width, max-height Kullanmak
• IE6′un Tekrarlayan Karakter Sorunu
• IE’un 3 piksel Metin Öteleme Hatası
• IE6′da CEE-EEE(peek-a-boo) Hatası
• Göreceli-Mutlak Konumlandırma Sorunu
• Kenar Boşluğu(Margin) Çökmesi
• Float Uygulanmış Elementleri Tam Kapsayamama Sorunu
• Internet Explorer 6 için saydam PNG desteği

Bunun dışında diğer konulardaki Internet Explorer 6 sorunlarını listelersek

• Özellik Seçicileri(Attribute Selectors)ie 6 desteklemiyor
• Pseudo-sınıfları ve Pseudo-elementleri ie 6 bir çok sınıfı desteklemiyor
• Sabit Konumlandırma (Postion:fixed) ie 6 desteklemiyor
• CSS ile Menü Yapmak III – Dikey Açılır Menüler
• CSS ile Menü Yapmak IV – Yatay Açılır Menüler

Görüldüğü gibi neredeyse yazdığım yazıların yarısında Internet Explorer 6 ile sorun yaşamışız ve çözüm üretmek zorunda kalmışız. 

İnsanı şöyle bir düşünce sarıyor. Bu insanlar hala niye Internet Explorer 6 kullanıyor. Bu konuda css-tricks’in ayrıntılı güzel bir çalışması var. http://css-tricks.com/why-people-still-use-ie-6/ isteyen bakabilir ben kısa kısa geçeceğim;

• Bir çok büyük şirket sürüm yükseltmekte yavaş davranıyor ve birçok kullanıcı şirketlerinden eski sürümlerden interneti dolaşıyor.
• Eski sürüm işletim sistemi kullanan kullanıcılar Windows 2000, Windows Me ve 98 hala ie6′yı kullanıyor
• Pasif internet kullanıcıları sistemlerini yenilemediği müddetçe yeni sürüme yükseltmesi 
• Yeni sürüm ve avantajlarından bi haber kullanıcılar

Sonuç olarak şunu söyleyebiliriz ki biz ie6 ile uğraşmaya yaklaşık 1-2 sene daha devam edeceğiz gibi görünüyor. Microsoft’un ie 8 çıkarması belki bu süreci hızlandırabilir, ama ben pek ümitli değilim. Biz web kod yazarları bu konuda müşterinin istekleri doğrultusunda kod yazdığımız için elimizden gelen pek bir şey olmuyor açıkçası. 

Ne diyelim Internet Explorer 6′ya ölüm.

Kaynaklar

• http://wisdump.com/web-programming/campaigns-to-kill-the-web-browser-that-just-wont-die-internet-explorer-6/
• http://cdharrison.com/2008/09/04/death-to-ie6/
• http://www.webmaster-source.com/2008/09/04/fighting-internet-explorer-6/
• http://leblog.exuberance.com/2006/03/the_explorer_ta.html
• http://www.siberkultur.com/?q=37signals-ie6-destegini-kaldiriyor
• http://www.w3counter.com/globalstats.php
• http://www.thecounter.com/stats/2008/August/browser.php
• http://www.savethedevelopers.org/
• http://sonspring.com/journal/time-to-drop-ie6
• http://www.infoq.com/news/2008/07/ie6_on_its_way_out
• http://www.sitepoint.com/blogs/2008/08/25/is-it-time-to-ditch-ie6/
• http://css-tricks.com/why-people-still-use-ie-6/
• http://elliotjaystocks.com/blog/archive/2008/death-to-ie6/
• http://iedeathmarch.org/
• http://www.devlounge.net/column/the-death-of-internet-explorer-6-still-prematurely-called
• http://websitetips.com/css/solutions/
• http://my.opera.com/zomg/blog/2007/07/31/common-crossbrowser-css-issues

Bu Ardalanı beyaz olan sitelerde sorun değil ama ardalanında resim veya farklı renk olan sitelerde sorun çıkarıyor.

Bu durumu engellemek için <iframe> koduna çok basit bir özellik eklemesi yeterli oluyor.

<iframe allowtransparency="true"></iframe>

Örnek: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/allowTransparency.htm