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.
Bir ara böyle bir hata ile karşılaşmıştım fakat sebebini bir türlü anayamamıştım. Bu makale kafamdaki soru işaretini kaldırdı :) Aslında grafikten pek anlamayan ve kod seven bir insanım fakat böyle konulara her zaman ihtiyaç duyuyor insan. Bir ara gif, jpg ve png dosyalarının özelliklerini ve birbirlerinden farkını anlatan bir makale yazarsan çok sevinirim :)
burada yazılmışı var :D
İnşaallah bir ara Türkçe’ye çevirme fırsatı bulurum
Abi çok saol ya, süper anlatmış adam. Abi elini çabuk tut yoksa ben çeviricem :D
peki ilk fırsatta bakayım :) Sitepoint ‘de çevirecek makale çok seç beğen al :)
tabii bi tane gif uzantılı transparan gorsel lazım 1px 1px olsa yeter
Temel olarak aynı işi yapsalar da şöyle bir çözüm de var.
Merhaba, yukarıda bahsettiğiniz iepngfix.htc dosyasını kullanarak png resimlerimi rahatlıkla kullanıyorum. Yalnız bir sorun var. IE’de a tagı için background olarak png kullanırsam a:hover özelliği çalışmıyor. Yani png resimlerle değişen menü zeminleri hazırlayamıyorum. Tabii ki firefox ve opera’da sağlam. Ama bu lanet ie için bir çözüm var mı aceba ? Teşekkürler…
Şu png gösterme tekniği için çok teşekkürler yalnız img için kodu css dosyama eklediğimde ve w3.org sayfasında test ettiğimde “Property behavior doesn’t exist :url(iepngfix.htc) diye bir hata oluyorum yani özene bözene hazıladığım w3 uyumlu css bianda dağılıyor bunu çözmenin bir yolu varmıdır acaba?
ie için şartlı yorum (comment) kullanabilirsin.
Ben şöyle yapıyorum; ie için gerekli düzenlemeleri (hackleri ) ayrı bir css dosyasında yapıyorum. sonrasında bu cssdosyasını şartlı yorum içinde çağırıyorum.
<!--[if IE]>
<link rel=“stylesheet” type=“text/css” media=“screen” href=“ie_hacks.css” />
<![endif] --> gibi
merhabalar verdiğiniz örneklere baktım fakat hiçbiri valid değil ve daha bir çok siteden örnek kodlar gördüm çoğu çalışmıyor çalışanlarda valid değil. Eğer bu konuda yardım ederseniz veya kaynak gösterirseniz memnun olurum.. sevgiyle kalın..
bir önceki yorumda bahsettiğim yöntem işe yarıyor ve validasyonu geçiyor. canlı örneğini şurada görebilirsiniz.