Category Archives: CSS Bug

IE7 Float Sorunu ve Çözümü

1 yorum

Bu sorunla bir çok kez karşılaştım.. Sorun nesneye verdiğimiz float’tan kaynaklı olarak kaymaya yol açıyor. Önce bir örnek göstereyim..

Html kodlarımız;

<div class="test">
	Tayfun Erbilen: <img src="resim.jpg" alt="" height="60" />
</div>

CSS kodlarımız;

.test {
	width: 200px;
	border: 1px solid #ddd;
	overflow: hidden;
	padding: 10px
}
.test img {
	float: right
}

Sonuç;

IE7 Float Sorunu ve Çözümü

Çözüm

Çözüm basit. Float uyguladığımız nesneyi başa alacağız.. Yani yazıdan öncesine ekleyeceğiz. Yani;

<div class="test">
	<img src="resim.jpg" alt="" height="60" /> Tayfun Erbilen:
</div>

Ve sonuç;

IE7 Float Sorunu ve Çözümü

Evet bir sorunun daha üstesinden gelmiş olduk 🙂 IE ile bol dertli günler.

Konuyu görmek için tıklayın

IE6-9 için linear-gradient Renk Tanımlama Sorunu

1 yorum

Bildiğiniz gibi css3 ile birlikte linear-gradient özelliği geldi. Ancak css3 özelliği olduğundan IE6-9 için kullanabilmek adına filter özelliğine başvuruyoruz.. Ve burada ise ilginç şekilde bir renk tanımlama sorunu oluşuyor..

Sorun: Renk tanımlamalarında kısa renk tanımı kullanamıyoruz.. Örneğin #333333 olan renk kodunu #333 şeklinde yaptığımızda da aynı mantığa geliyor ancak bunu filter için uygulayamıyoruz, aksi taktirde başka bir renk ortaya çıkıyor..

Örnek;

<style type="text/css">
a {
	text-decoration: none;
	font: 14px Arial;
	display: inline-block;
	padding: 5px 10px;
	color: #fff;
	border-radius: 3px;
	border: 2px solid #444;
	background: #333; /* eski tarayıcılar için */
	background: -moz-linear-gradient(top, #333 0%, #9999 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #999)); 
	background: -webkit-linear-gradient(top, #333 0%, #999 100%);
	background: -o-linear-gradient(top, #333 0%, #999 100%);
	background: -ms-linear-gradient(top, #333 0%, #999 100%);
	background: linear-gradient(to bottom, #333 0%, #999 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#999',GradientType=0 );
}
</style>
<a href="#">erbilen.net</a>

Burada #333 ve #999 renk değerlerinin her ikisinide kısa tanım olarak kullandık.. Örneğin chrome’da şöyle gözükmekte;

IE6-9 için linear-gradient Renk Tanımlama Sorunu

Normal şartlarda da olması gereken görüntü bu.. Ancak birde buna IE6-9 arasında bakalım.. Sonuç;

IE6-9 için linear-gradient Renk Tanımlama Sorunu

Çözüm: yapmamız gereken #333 ve #999 değerlerini uzun haliyle yazmak.. Ancak sadece filter için;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#999',GradientType=0 );

yerine;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#999999',GradientType=0 );

yazmak olacak 🙂 Şimdilik bu sorununda üstesinden gelmiş olduk.

IE6-9 için linear-gradient Renk Tanımlama Sorunu

Konuyu görmek için tıklayın

CSS Charset Tanımında Internet Explorer 8 Hatası

3 yorum

Bugün bir kez daha internet explorer tarayıcısının ne denli ilginç olduğuna şahit oldum.. Olayımız şöyle.. Bildiğiniz gibi css’de karakter tanımlamasını şöyle yapıyoruz;

@charset "utf8";

/* diğer css kodları */

Ancak ilginç bir şekilde IE8’de bu şekilde bir tanımda css dosyası okunmuyor.. Sebebi ise çift tırnak kullanmış olmamız.. Yani şöyle yazarsak bir sorun yok;

CSS Charset Tanımında Internet Explorer 8 Hatası

@charset 'utf8';

/* diğer css kodları */

Ancak diğer türlü css okunmuyor.. Aslında biraz kurcaladıktan sonra daha da ilginç bir şey gördüm.. Buda eğer çift tırnak yazmakta ısrarcıysanız öncesine bir açıklama satırı eklemeniz olacak.. Eğer açıklama satırı var ise çift tırnaklı olsa bile css’i okumaya devam ediyor.. Yani;

/* ah IE ah */
@charset "utf8";

/* diğer css kodları */

bu şekilde de sorun olmadan css’i okuyor. Evet, böyle bir ilginçlik ile karşılaşırsanız buna bakmayı ihmal etmeyin!

CSS Charset Tanımında Internet Explorer 8 Hatası

Konuyu görmek için tıklayın

IE7’de Overflow Hidden Sorunu

yorum yok

Bu sorunla bir çok kez karşılaştım.. Hep bir şekilde çözdüm ancak sorunun tam olarak neden kaynaklandığını ve nasıl çözdüğümü bir türlü bulamıyordum.. Neyse ki bu gece buna bir son verdim ve adam akıllı sorunu anladım, çözdüm ve mutluyum winked Şimdi bu sorun nasıl oluşuyor önce ondan bahseseyim..

Sorun nasıl oluşuyor?

Normal şartlarda kapsayıcı nesneye overflow: hidden verdiğinizde belirlediğimiz genişlik ve yükseklikten taşan her şeyi gizlemesi gerekir.. Bir yere kadar bu şekilde gizleniyor.. Ancak kapsayıcı nesne içindeki nesnelerden herhangi bir tanesine position tanımı yapılırsa.. İşte o zaman işin rengi değişiyor! O zaman taşınca gizlemesi gereken ie, gizlemekten vazgeçiyor.. Bu sorun IE7 ve muhtemelen alt sürümleri için geçerli.. IE8‘de böyle bir sorun yok.

Konuyu görmek için tıklayın

IE7’de Display Inline-Block Hatası

yorum yok

Eğer ie7 uyumlu tasarımlar döktüyseniz bazen blok seviyesinden elemanları float yerine display özelliğini inline-block yaparak yan yana getirmek istemişsinizdir.. Ancak fark edeceğiniz üzere ne yazık ki doğrudan display: inline-block; ie7’de işlevini yerine getirmiyor.. Ancak bu sorunu aşmanın kolay bir yolu var.. Kısaca eğer inline-block uygulayacaksanız ie7 uyumlu hali şöyledir;

ul.tab li {
    display: inline-block;
    *display: inline;
    zoom: 1
}

Ve işte hepsi bu kadar, artık ie7 uyumlu hale geldi.

Konuyu görmek için tıklayın