İE 6 iki CSS seçicisi Sorunu ve Çözümü
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
Merhaba fatih bey, ie6 da bugün bir hata yaşadım ve çözdüm. Yazılarınız içinde bu hatayla ilgili bir uyarı göremedim, belkide ben gözden kaçırdım, hatayı sizle paylaşmak istiyorum sizde kullanıcılara paylaşırsanız daha çok kişi yararlanır. Hata ise şu: divin yüksekliğine 14px verdim ve tarayıcıda görüntülemeye çalıştım, ie6 dışındaki tarayıcılarda 14px yüksekliğinde görüntüledim, ie6 da ise 16px yükseklik aldığını farkettim, anladım ki ie6 16px den küçük sayılarada sıkıntı çıkarıyor, çözüm olarak ise divin css koduna font-size:14px; tanımlaması yaptım tarayıcı kendine geldi. Bu hatayı daha önce yaşadıysanız ve paylaştıysanız bu yorumu dikkate almayın. Yaşamadıysanız hatayı yayınlarsanız çok memnun olurum. İyi günler :)
benzer bir sorun cevabını http://www.fatihhayrioglu.com/css-ipuclari-14-ie-… burda yazmıştım.
[...] İE 6 iki CSS seçicisi Sorunu ve Çözümü [...]
[...] İE 6 iki CSS seçicisi Sorunu ve Çözümü (5 yorum) 2-10 /* */ [...]
Dünya tarayıcılarının %24 kadarı IE6'ymış.. Haliyle daha çok çekeriz… Ancak şu yeni çıkan Google Chrome Frame eklentisi tutarsa çok iyi olacak. Microsoft Google'a çok kızmış; ama bence daha beterini hakediyor Microsoft…
inş dediğin gibi 1-2 sene biter işi =) IE işi bozuyor yaa sevmiyorum IE yi.
o zamana kadar başımızın belası olarak kalacak desenize
2014'e kadar süreceğini zannetmiyorum ie6'nın yaşayacağını. 1-2 seneye işi biter gibime geliyor.
Çok güzel sade bir anlatım ama IE6 dan ben ümidimi kestim. 2014 e kadar destek te verse tak etti artık tarayıcı uyumsuzlukları. IE6 yı artık es geçiyorum. Hatta IE6 ile siteye giren kullanıcılara Küçük bir uyarı gösterip FireFox İndirmelerini rica ediyorum. Ciddi Anlamda IE6 bezdirdi insanı. =)