Internet Explorer 7 ve CSS
Internet Explorer 7 tam sürümü yayınlandı, peki bu yeni sürüm bizlere(web kodlayıcılarına) ne kazandırıyor. Güvenlik açısından yenilikler içeren IE7 eski versiyonlardaki CSS sorunlarının bir çoğunuda çözmüş görünüyor. Bu bizim gibi kodlayıcılar için çok güzel bir gelişme, IE gibi web tarayıcı pazarında %75′ni(değişik oranlar mevcut ben de ortalamayı aldım) elinde bulunduran bir web tarayıcısının standartlara daha uyumlu olması bizi sevindiriyor.
Bu makale IE7 ile çözülen CSS hatalarına bir göz atacağız.
Artık IE için ayrıca CSS kodlarımızı düzenlemeyeceğiz(Bir süre daha kodlayacağız tabi IE 7 yaygınlaşana kadar). Buna sevinmeliyiz. IE7 ile birlikte 200′e yakın CSS sorununu düzeltildiğini söylüyor Microsoft. Tüm bu düzeltmelerin <!DOCTYPE> switch‘da çalıştığını Garip Mod‘da ise IE6 gibi yorumlayacağını söylüyor ona göre.
IE7 ile Düzelen Genel Sorunlar
- Peekaboo Sorunu – İçinde uzunca bir metin, resim, link vb. içerik olan bir katmanımız olsun ve bu katmanın altında bir clear:both uygulanan bir bir katmanımız olsun. Firefox, Safari veya diğer yeni nesil tarayıcılarda bu kod sorunsuz çalışacaktır. Ancak Internet Explorer 6′da içerik bölümü görünmeyecektir. Ayrıntılı bilgi için tıklayınız.
- Giyotin Hatası ‘ Float uygulanmış bir elementteki linklerin üzerine geldiğinizde kapsayıcı elementin altı kısmı kayboması sorunu. Ayrıntılı bilgi için tıklayınız.
- Tekrarlayan Karakter Sorunu-Bu hata birden fazla float uygulanmış içiçe elementlerde meydana gelir. Son float uygulanmış elementin son karakterleri alt tarafta tekrarlanır. Bu hatayı ayıklamak için ne yapabiliriz, ayrıntıları görmek için tıklayınız. (12/12/2006′da güncellendi)
- Kenarlık Kargaşası ‘ Bu hata iki içiçe geçmiş blok-level elementlerde; negatif üst margin kulanıldığında ; son olarakta ikinci kutu veya üst element de kenarlık içermesi durumlarında meydana gelir. Ayrıntılı bilgi için tıklayınız.
- Kaydrıma Çubuğu Çıkmama Sorunu ‘Kapsayıcı kutunun uzun içeriği olmasına karşın kaydırma çubuğunun çıkmaması ve alt kısımdaki içeriğin görünmemesi sorunudur. Ayrıntılı bilgi için tıklayınız.
- 3 Piksel Metin Öteleme Sorunu ‘ Float uygulanmış elementlerdeki metine 3 piksel boşluk uygular ve element normal yerinden aşağı kayar. Bu hatayı ayıklamak için ne yapabiliriz, ayrıntıları görmek için tıklayınız. (10/12/2006′da güncellendi)
- Sihirli Gizli Metin Sorunu ‘Bu hataIE/5.5/6/Win meydana gelir. Bir biri içine geçmiş elementlerde ve aşağıdaki kodu içeren dışarıdaki elementlerde meydan gelir: Ayrıntılı bilgi için tıklayınız.
div {
border-left: 1px solid red;
padding-bottom: 1px;
}
- Line-height/Replaced Element Sorunu: Eğer line-height uygulanmış bir satırda replaced element varsa line-height değeri sorunlu yorumlanacaktır. Ayrıntılı bilgi için tıklayınız.
- Tekrarlanan Satır Başı Boşluğu Sorunu
Bu hata float uygulanmış katmanın yanındaki inline-elementlerde(metin ve resim) meydana gelir.
Ayrıntılı bilgi için tıklayınız. - IE/Win’de Gözden Kaybolan List-background Sorunu
Bu hata Göreceli Konumlandırmalı floating uygulanmış bir liste elementine background uygulandığında meydana gelir. Ayrıntılı bilgi için tıklayınız. - Internet Explorer ve Genişleyen Kutu Problemi
Ayrıntılı bilgi için tıklayınız. - IE6′nınGarip Yüzde Sorunu
Ayrıntılı bilgi için tıklayınız. - IE ve İtalik Yazı Sorunu
Ayrıntılı bilgi için tıklayınız. - Kayıp İlk Harf Hatası
Ayrıntılı bilgi için tıklayınız. - Yanıltıcı Kutu Sorunu
Ayrıntılı bilgi için tıklayınız.
Diğer Düzeltilen Hatalar
- :hover sadece linklere(a) değil tüm elementlere uygulanabiliyor (Bu sayede menu oluştururken IE için script yazmayacağız, tabi bunu için erken daha)
- Background-attachment: fixed tüm elementlerde çalışıyor
- <?xml> ön tanımlamasını Garip Mod olarak algılamıyor artık
- Overflow şimdi çalışıyor(Bunun anlamı kutular artık otomatik büyümeyecek.)
- Derleyici Hataları : * html, _property and /**/ yorum hataları düzeltilmiş
- Mutlak Konumlandırılmış elelmnetlerde genişlik auto
left ve right değerlerindeki sorunlar giderilmiş - Belirli Göreceli Konumlandırma sorunları giderilmiş
- Belirli Mutlak Konumlandırma sorunları giderilmiş
- 1 px noktalı(dotted) kenarlıklar atık çizgili(dashed) gibi yorumlanmayacak
- birkaç negatif margin uygulamalrındaki sorunlar giderilmiş
- Pseudo-sınıfları ve Pseudo-elementleri destekliyor (:first-letter, :first-line vd.)
- !important sorunları giderilmiş
- List-item boşluk sorunu giderilmiş
- ve bir çok sorun giderilmiş.
Tüm liste için tıklayınız.
CSS2.1′deki yeni özellikleri destekliyor
- Min/max width/height destekliyor
- Transparent kenarlıkları destekliyor
- Fixed konumlandırmayı destekliyor
- PNG destekliyor
- Çocuk Seçiciler ve Bitişik Kardeş Seçicileri destekliyor.
engin_er kusura bakma sorunu daha yeni gördüm. Bende ie 7 de bakıyorum ama böyle bir sorun göremedim
“”engin_er Nisan 5, 2007
Kaydrıma Çubuğu Çıkmama Sorunu
‘Kapsayıcı kutunun uzun içeriği olmasına karşın kaydırma çubuğunun çıkmaması ve alt kısımdaki içeriğin görünmemesi sorunudur.”
”
tamam bunu biliyoruz zaten ama benim söylemek istediğim sorun ilgili web sitesindemi yoksa IE7 den mi kaynaklanıyor???
esas bunu öğrenmek istiyorum siteden olsa IE6-firefox ve operada düzgün görünüyor..
IE7 ye bir eklenti falan mı yüklemek gerekiyor çözüm nedir önerileriniz nedir bunu öğrenmek istiyorum ..
Selam şu png’nin ie6,0 da doğru görüntülenmemesi beni deli etti sizin önerdiğiniz ve diğer sitelerde bulduğum çözümleri kullandım ve çalıştılar fakat bu seferde sitenin css dosyasını w3.org’da test edince eror veriyor bu hack yöntemlerine ve o kadar özene bözene yazdığım css telef oluyor yokmudur bunun bir çaresi?
Kaydrıma Çubuğu Çıkmama Sorunu
‘Kapsayıcı kutunun uzun içeriği olmasına karşın kaydırma çubuğunun çıkmaması ve alt kısımdaki içeriğin görünmemesi sorunudur.
bu sorun IE7 de mi var yoksa aşağıda adresini verdiğim adrestemi var
http://www.bonus.com.tr den altta bulunan müşteri hizmetleri, site haritası gibi linklere tıklayınca kaydırma çubuğu çıkmadığı gibi sayfaların alt kısmı görünmüyor
ama IE6 da ve Firefoksta sayfanın tamamı ve kaydırma çubuğu çıkıyor. fakat Firefoksta yazıların üst bilgileri görünmüyor.
bu sorun; http://www.cizgi.com.tr forumda ve http://www.teknolojitelevizyonu.com forumda açıkladım… sizde bir el atarsınız umarım
ya bu internet explorer 7 yi indiremiyorum o nasıl yüklencek ya
IE 7 den önce sorunu
background:url(../images/arama_zemin_resmi.gif) no-repeat top left !important; /* ie den gizle */
background:url(../images/arama_zemin_resmi.gif) no-repeat top left fixed;
şeklinde çözüyordum ancak bu yöntem ie 7 çıkınca sorun çıkarıyor. Aşağıda verdiğim linkde adam javascript ile bir yöntem sunmuş
http://www.howtocreate.co.uk/fixedBackground.html
Merhaba,
textboxlarin altina zemin atmak için asagidaki gibi css tanimlamasi yaptim
daha önce düzgün çalisiyorken IE 7′da zemini göstermemeye basladi.
.txt1{
width:198px;
height:24px;
border:0px;
background-color:#E9E9E9;
background-image: url(../images/TextBack.gif);
background-attachment: fixed;
background-repeat:no-repeat;
padding-left:6px;
padding-top:4px;
margin-top: 2px;
vertical-align:middle;
}
Burada
background-attachment: fixed;
ifadesini kaldirinca zemin görünüyor. Fakat bu sefer de yaz uzadikça zemin
de kaydigi için kötü görünüyor.
Evet iki linkte hata var. Ancak sorun siteden kaynaklı çünkü google da aratınca önbellekte görünüyor.
Peekaboo Sorunu için
Kaydırma Çubuğu Çıkmama Sorunu
Bu güzel bilgiler için teşekkür ederim. Yalnız http://www.positioniseverything.net/ sitesi bende açılmadı. Umarım bu sorun sadece bendedir ve geçicidir.
Bu arada IE’nin aslında ne kadar sorunlu olduğunu birkez daha görmüş olduk. Meğer ne çok hatası varmış değil mi :)
epey çalışmışlar anlaşılan ama sanırım en az bir kaç yıl daha ie 6 ve aşağı sürümler kullanımda oldukça hacklara başvuracağız,
bu güzel bilgiler için teşekkürler sayın fatih hayrioğlu, elleriniz dert görmesin