Kişisel sitemi yeniledim. Bu yenileme sırasında en büyük sıkıntıyı IE6 uyumlu olsun diye yaşadım. Modern diyebileceğim Firefox, Opera ve Internet Explorer 7 kullanıcıları gayet güzel görüyorlardı. Sorun, bir nesnenin (benim için menüydü) ekrandaki diğer öğeler kaydırılırken sabit tutulması.

Normalde CSS ile bir Div tanımlarken

#leftsider {
	float: left;
	position: fixed;
	width: 579px;
	background-color: #000000;
	top: 0px;
	left: 0px;
	cursor: pointer;

}

position:fixed; komutu istediğiniz bir öğeyi yerinde sabitler. Diyelim ekranın en üstünde solunda tutar. Böylece sayfa aşağı kayarken bir menü veya banner sabit tutulabilir.

Ancak bu kod IE6 için işe yaramaz.

Benim portfolyo sitemde içerik aşağı değil otomatik olarak sağa kaydırıldığından webde bulunan bir çok çözüm işe yaramadı. Sonunda garip bir çözüm uyguladım. İki CSS dosyası hazırladım. IE6 için ve diğer tüm browserlar için. Önce modern browserlar için yazdığım CSS dosyasını test ettim. “Tamam” dedikten sonra onu çıkarıp, IE6 için yaptığım CSS dosyasını denedim ve IE6 ile baktım. Bu seçimi otomatik yapılması için HTML dosyama şöyle aktardım.

<link rel="stylesheet" type="text/css" href="css/modern.css" />

<!–[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]–>

işte ikinci satır eğer ziyaretçim IE7′den daha eski bir browser kullanıyorsa devreye giriyor.

Sonra ilk olarak position:fixed; yerine position: absolute; kullandım. Ancak içerik, dediğim gibi aşağı değil, sağa kaydığından önerilen çözüm çuvalladı.
Böylece 3 günlük deli uğraşıdan sonra çözümü buldum. Bu yazıyı yazma nedenim de budur. Belki arayan çıkar ki, webde bulmak oldukça zor. Belki ne aradığınızı bilseniz saniyede bulursunuz ama

Sabit tutmak istediğiniz nesneyi kaydırma alanında ekranda görünen alanın o andaki koordinatlarını buldururarak left ve top değerlerini vermelisiniz. Ne demek şimdi bu? Eğer top ve left’e sıfır değerini veriyorsanız, bu değerleri ekran sabit koordinatı değil, sayfanın koordinatı kabul ediyor IE6 ve sayfa kaydırma çubuklarıyla kaydırılınca nesneyi kaydırıyor. Bunun yerine bir formül ile koordinat veriyoruz.

left: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollLeft+0+"px" : body.scrollLeft+"px");		

top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+0+"px" : body.scrollTop+"px");

Yukardaki IE6 için yazdığım CSS dosyama eklenen kod sizi dinamik olarak hep sola ve üste alır. Bu kod sadece IE6 uyumludur. Çünkü zaten sorunu olan odur
document.documentElement.scrollLeft+0+”px” ifadesinde sıfır yerine koyacağınız rakam kadar soldan uzaklaşacaktır. Top için de aynısı yapılır.

Sonuç olarak IE6 için aynı div CSS’de aşağıdaki gibi tanımlanır.
HTML’ye CSS seçici kodu eklemeyi unutmayın.

#leftsider {

float: left;
position: absolute;
width: 579px;
background-color: #000000;
left: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollLeft+0+"px" : body.scrollLeft+"px");		

top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+0+"px" : body.scrollTop+"px");

cursor: pointer;

}

Uzun lafın kısası beni çok uğraştırdı ama sanırım güzel bir portfolyo sitem oldu.
www.suleymansonmez.com

Kaynakça:

Expression örnekleri
http://webfx.eae.net/dhtml/cssexpr/cssexpr.html