ie5+ için en kolay png desteği yolu

17/12/06

Internet Explorer‘ın PNG ile olan transparan problemini sağır sultan bile duydu sanırım. Ama hâlâ etkili bir çözüm bulunabilmiş değil. Bulunmasını da beklemiyorum; IE7 ile beklenen CSS ile sözde uyumluluk tasarımcıları hayal kırıklığına uğrattı.

PNG ile olan sorunu aşmak için en bilindik yöntem aşağıdaki gibi
#header{ background:url('header.png'); height:45px; width:770px; }

* html #header{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='header.png', sizingMethod='scale'); background-image: none; }

kısa kolay bir yöntem ama PNG kullandığınız her bölüm için ayrı ayrı yazmanız gerekiyor.
Angus Turnbull daha kolay bir yöntem bulmuş. Yapmanız gereken oldukça basit;

- ilk olarak iepngfix.htc dosyasını CSS dosyanız ile aynı klasöre yerleştirin.

- sonra img { behavior: url(iepngfix.htc); } kodunu CSS dosyanıza ekleyin.

- Bitti.

img, #header, .class, blockquote { behavior: url(iepngfix.htc); }
kullanarak istediğiniz elemente ya da *{ behavior: url(iepngfix.htc); } kullanarak tüm PNG kullandığınız bölümlere uygulayabilirsiniz.

Buradan demosuna ulaşabilirsiniz. Gördüğüm tek sorun tekrar eden arkaplan resimlerini sadece tek resim olarak göstermesi.

Yorumlar [11] Etiketler: , ,

This is IE, remember? (CSS float-margin hatası)

16/02/06

Hatırladınız değil mi? hep böyle garip hatalar ancak IE üzerinde oluyor. Ya da buyrun garip olup olmadığına siz karar verin.
Bir web tasarımcısı için en en hoş olmayan durumlardan biri de çıkan işin farklı tarayıcılarda farklı farklı gözükmesidir. Sağolsun IE de buna yardımcı oluyor.. Sorun şu; float ile elementlerin sağa veya sola yaslı olmasını sağlıyoruz ama tamanen bitişik olmaması için margin ile istediğimiz yerde durmasını sağlıyoruz. Ne güzel! ama her nedense IE eğer float:right; margin-right:10px; veya float:left; margin-left:10px; gibi bir kullanımda verilen margin değerini ikiye katlıyor.
sorun 2004 ocak ayında çözülmüş daha önceleri çözülmez sanıldığı için margin yerine başka bir görünmeyen(visibility:hidden;) element ekliyorlarmış. Steve Clason çok basit bir çözüm keşfetmiş.
display:inline; özelliğini eklemek olayı çözüyor.
İster istemez sorası geliyor insanın “2004’den bu yana kaç IE yaması çıktı?”

Yorumlar [3] Etiketler: , , ,