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.
Evet dediğin gibi bir açıklam getirilebilir.
Son zamanalarda saydam PNG ile çalışmak kaçınılmaz oldu. Burada en büyük sorunumuz IE6 nın ki hala çok fazla kullanıcı bu tarayıcıyı kullanıyor.
Bunun için çeşitli düzeltme kodları üretiliyor. Bu kodların hangisi ne kadar işe yarıyor ve diğer elemanlar ile ilişkileri nasıl oluyor bunlar önem kazanıyor.
Bende bir makale yazacağım ama araya kitap yayını ve bazı diğer işler girince gecikti bilmiyorum ne zaman yayınlaya bilirm.
Umarım benden önce yayınlarsın
evet oldu. bu kodu içinde scroll olacak divin stiline ekledim. Şimdi bu kodda z-index-1 diyerek sanırım bi üst katmana çıkmasını sağladık anladığım kadarıyla. Bi de sizden öğrenebilir miyim bu açıklamayı. Bugün yaşadığım bu sorun CSS’e yeni başlayanlar açısından önemli bir konu olarka görüyorum ve bir makale yazacağım şimdi. png dosyaları ile çalışırken overflow konusunda z-index uygulamak herkesin fark edemeyeceği bir özelliktir. Teşekkür ederim.
position: relative;
z-index: 1;
eklermisin
Tekrar merhaba, sorunu çözmek için önemli bir şey buldum. O da şu: Ben IE6′da .PNG dosyalarımın görüntülenmesi için div arka plan resminin kodlarını aşağıda gösterdiğim gibi kullanıyorum. Bu kodu kaldırdığımda overflow:auto özelliği IE’de çalışıyor ama bir div’in arka plan resmini aşağıdaki kodlardaki gibi kullanırsam o zaman overflow:auto veya overflow:scroll çalışmıyor. Kayan çubuk gözüküyor ama aşağı kaydırılmıyor. Bu durumda sanırım .PNG dosyalarını IE6 da doğru bir şekilde çalıştırmam için farklı bir background-image koduna ihtiyacım olacak. Değişik bir problem değil mi ?
————————————————
background: transparent url(images/detay.png) !important; background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true , sizingMethod=scale src=’images/detay.png’);
http://www.emeknet.com/cnskimya buranın sitesini hazırlıyorumda. Gördüğünüz gibi IE’de kaydırma çubuğu kaymıyor. Ben başka küçük bi uygulama yaptım onda sorun yok. Demek ki benim kodlamam da bir sorun oldu. Çeşitli forumlarda sordum tam yanıt alamadım. css ve div taglarımın bulunduğu dosyaları ayrıca .htm olarak kaydettim siz bakarsınız die.
css.htm ve div.htm sayfalarına da bakabilirsiniz.
Bilemiyorum Emre bir örneği görebileceğimiz bir link varmı ?
Merhaba, CSS’de bi çalışma yapıyorum şu an. IE6′da ve diğer tarayıcılarda deniyorum. oweflow:auto özelliği IE6 ve maxthon2 dışında sağlıklı çalışıyor. Bu tarayıcılarda kaydırma çubuğu gözükmektedir ancak aşağı doğru kaydırılmıyor. Bunu çözmek mümkün müdür ?
http://www.fatihhayrioglu.com/?p=259
bu makaleye bir göz at
merhabalar,
yanlış yere yazıyorum ama tarayıcılarla ilgili genel bir konu bulamadım hocam. yeni başlayan biri olarak sayfalarımı yalnızca IE6 ve firefox da sınıyorum.. sizce site tasarımını IE ve firefox da test etmemiz yeterli mi?
diğer tarayıcılarla ilgili fazla bilgim yok açıkcası, önemsemeli miyim?
şimdiden teşekkürler
Taner http://homepage.ntlworld.com/bobosola/pngtestfixed.htm
adresteki png w3c de sorunsuz çalışıyor.