Sonra incelediğimde ve araştırdığımda bu sorunun benim kullandığım sıfırlama kodundaki bir durumdan kaynaklandığını gördüm.

textarea, input, select {
    font:inherit;
    white-space:normal;
}

Örneği görmek için tıklayınız.

Sıfırlama kodundaki yukarıdaki kodda white-space:normal; tanımlaması sorunu çıkarıyor. Bu kodu çıkarınca sorun ortadan kalkıyor. Ancak yinede ie’nin textarea’daki white-space:normal; kullanımında sorun oluşturduğu gerçeğini bu ortadan kaldırmıyor.

Bu durumu halletmenin daha düzgün bir yolu var

textarea {
	white-space:pre;
}

Örneği görmek için tıklayınız.

Tanımıda bu sorunu gidermek için yeterlidir.

Kaynaklar

• http://stackoverflow.com/questions/1282202/enter-does-not-work-in-textarea-in-internet-explorer-8
• http://www.fourmilab.ch/fourmilog/archives/2005-04/000510.html
• http://stackoverflow.com/questions/737614/textarea-css-ie7-and-enter-key-creating-inline-space

Sorunu şöyle tanımlayabilirim; overflow kullandığım bir eleman içindeki bir elemana position:relative tanımladığımda relative verdiğim eleman overflow uyguladığım elemanın dışına çıkıyor ve scroll olmuyor.

Şöyle küçük bir örnek durumu daha iyi gösterecektir.

<div id="icerikAlani">
    <p>İlk paragaraf</p>
    <p class="relative">position:relative uygulanan kısım</p>
</div>

CSS kodu da şöyle

#icerikAlani{
    height:80px;
    overflow:auto;
    width:200px;
    height:80px;
    background-color:#ccc
}
.relative{
    position:relative;
    background-color:lightblue;
    width:150px;
}

Sonuca ie 6 ve 7 ile baktığımızda aşağıdaki gibi bir sorun ile karşılaşacağız.

Örneği görmek içni tıklayınız.

Sorunun çözümü ise çok basit. overflow uyguladığımız elemana position:relative tanımı yaparak sorunu giderebilirsiniz.

#icerikAlani{
    height:80px;
    overflow:auto;
    width:200px;
    height:80px;
    background-color:#ccc;
    position:relative;
}
.relative{
    position:relative;
    background-color:lightblue;
    width:150px;
}

Kaynaklar

• http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
• http://www.rowanw.com/bugs/overflow_relative.htm
• http://dustyreagan.com/workaround-to-ies-overflow-auto-and/

Sorunumuzu tam olarak şöyle tanımlayabiliriz; Dikey olarak listelediğimiz menülerde ie’de fazladan boşluk gözüküyor. Bu durum bazen ie6′da bazense ie6 ve ie7′de oluyor.

Bir örnek verelim

<ul id="menu">
  <li><a href="#">Menu Bir</a></li>
  <li><a href="#">Menu İki</a></li>
  <li><a href="#">Menu Üç</a></li>
  <li><a href="#">Menu Dört</a> </li>
</ul>

CSS kodumuzda da

ul#menu li a{ display:block}

Örneği görmek için tıklayınız.

kodumuz olsun. Diğer tarayıcılarda normal bir görünüt alırken ie6′da liste öğeleri arasında fazladan boşluk görürüz.

Sorun İnternet Explorer’un hasLayout sorunudur. Aşağıdaki tanımlardan biri yapılması durumunda bu sorun düzelecektir.

display: inline-block
height: herhangi bir değeri
float: left veya right
*max-height: herhangi bir değeri
*max-width: herhangi bir değeri
*min-height: herhangi bir değeri
*min-width: herhangi bir değeri
*overflow: not visible
position: absolute
width: herhangi bir değeri
writing-mode: tb-rl
zoom: herhangi bir değeri

* ie7 de geçerli.

Biz bir tanesini seçelim.

* html ul#menu li a {height: 1px;}

Örneği görmek için tıklayınız.

Bu kodu yazdıktan sonra sayfa aşağıdaki gibi görünecektir.

Kaynaklar

• http://www.brunildo.org/test/IEWlispace.php
• http://www.hicksdesign.co.uk/journal/ie-whitespace-bug
• http://www.cssnewbie.com/fixing-ie6-whitespace-bug/
• http://orlandodefrias.com/2008/11/23/ie-unordered-list-extra-space-bug/
• http://archivist.incutio.com/viewlist/css-discuss/34926
• http://gtwebdev.com/workshop/gaps/white-space-bug.php

Ben genelde bu sorun ile özel textbox alanlarını kodlarken karşılaşıyorum.

yukarıdaki gibi bir tasarımı koda çevirirken

<div class="dis">
    <div class="ic"><input type="text" value="Arama" /></div>
</div>

CSS kodu

div.dis{
	margin-left:65px;
}
div.ic{
    width:241px;
    height:25px;
    background:url(arama_ardalan.gif) 0 0 no-repeat
}
div.ic input{
    border:0;
    background:none;
    width:204px;
    margin:4px 0 0 5px;
    font-size:11px;
    color:#534013;
}

Örneği görmek için tıklayınız.

Böyle bir kod yazıyorum. Dıştaki div(div.dis) herhangi bir kapsayıcı div olarak düşünün. Sayfanın diğer bir öğesi yani bu arama kısmı ile alakası yok. Bu kapsayıcı katmandaki margin tanımı ie’de sorun çıkarıyor.

Firefox’da yukarıdaki gibi bir görüntü alırken

İnternet Explore 6 ve 7 sürümlerinde yukarıdaki gibi bir görüntü ile karşılaşıyorum. En dıştaki katmana atadığım margin-left değeri içerideki elemanımı etkiliyor. Kalıtsal olarak bu değeri alıyor. Sorunu ilk önce "IE’da İkikat görülen Margin Problemi ve Çözümü" anlattığım gibi bir sorun olduğunu düşündüm ama değildi. Bu sefer ki farklı bir sorun. positioniseverything.net sitesinde aynı sorunu görünce anca adını koyabildim.

Sorun; input alanını kapsayan ebeveyn elemanda hasLayout ve margin tanımı var ise oluyor. Kaynak kısmında verdiğim sitede bir kaç çözüm önerisi var. Ancak ben hasLayout sorunlarının en kolay çözüm yolu olan zoom:1 tanımı ile bu sorunu aştım. Margin tanımı olan elemana zoom:1 tanımı yapınca sorun çözüldü

div.dis{ margin-left:65px; zoom:1}

Örneği görmek için tıklayınız.

Bu sorun tüm input çeşitlerinde(text, checkbox, radyo buton ve resim) meydana geliyor, ayrıca textarea’da yaşanıyor bu sorun, ancak select elemanında bu sorun ile karşılaşılmıyor.

Kaynak

• http://www.positioniseverything.net/explorer/inherited_margin.html

Pek nadirde olsa böyle bir istek ile karşılaşıyorum. Bu ikinci oldu. İlk başta bunun bir çözümü yoktur diye düşündüm(Bunu düşünmemin nedeni daha önce böyle bir istek ile karşılaştığımda çözümünü bulamadım diye aklımda kalması). Ancak sonra bazı sitelerde böyle bir şey yapıldığını görünce, araştırmaya karar verdim ve çözümü buldum.

Genelde %100 flash sayfalarda veya kendi içinde kaydırma çubuğu çıkan sayfalarda bu tip bir istek geliyor.

Firefox, İnternet Explorer 8, Safari, Google Chrome gibi yeni nesil tarayıcılar eğer içerik uzun değilse kaydırma çubuğunu göstermiyor. Ancak ie6 ve ie7 de durum böyle değil. İçerik olsun yada olması sağda yatay kaydırma çubuğu daima görünüyor. Bu durumu eşitlemek için çok basit bir kod yazmamız yeteli oluyor.

html {overflow:auto;}

Kaynaklar

• http://www.webmasterworld.com/forum21/10389.htm
• http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_22759180.html

Bu seferki hataya menüde denk geldim. Menüme background-image ile bir ikon koydum, her şey güzel ama ie6 görmedi. Araştırdım ve sonuç ie sorunu çıktı tabiki. Sorunun tam tanımı şöyle; listeleri(ul, ol ve dl) kapsayan elemana eğer float ve position:relative tanımı yaptı iseniz, ie6 liste background özelliklerini(resim veya renk) görmüyor.

Bu durmu bir örnek ile gösterelim.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie lsite ardalan sorunu</title>
<style>
#menuKapsul{
position:relative;
float:left;
}
ul li{
background:url(ikon.gif) 3px 9px no-repeat;
list-style:none;
padding-left:12px;
}
</style>
</head>
<body>
<div id="menuKapsul">
	<ul>
    	<li>Liste 1</li>
        <li>Liste 2</li>
        <li>Liste 3</li>
    </ul>
</div>
</body>
</html>

Yukarı görülen basit bir listenin ardalanına resim yerleştiriyoruz. Kapsayıcı elemanada position:relative; ve float:left; tanımları atanmış olsun. Aktif tarayıcıların tümünde sorunsuz çalışan kodumuz, ie6′da sorunlu görünecektir. Sorun liste ardalan resminin görünmemesidir. Sorunu çözerken bayağı bir cebelleşmiştim. Sonunda çözümü bulunca ve bu çözümde çok basit olunca sevineyim mi üzüleyim mi şaşırdım.

Çözüm ise çok basit. Ardalan resmi uyguladığımız liste öğesine postion:relative tanımı yapıyoruz ve bu kadar düzeliyor.

ul li{
	background:url(ikon.gif) 3px 9px no-repeat;
    list-style:none;
    padding-left:12px;
    position:relative
}

bu kadar bu kod bizim sorunlarımızı gideriyor.

Bir başka çözüm yoluda kapsayıcı bir eleman daha ekleyerek bu elemana farklı konumlandırma değeri atayıp çözebiliriz, ama bu pek mantıklı değil, fazladan kod eklememiz gerektiği için. En iyi position:relative ekleyip sonuca gitmek.

Örnek kodu görmek için tıklayınız.

Bir ie6 sorununun daha üstesinden geldik bir başka ie6 sorunu ile daha karşınızda olana dek hoşça kalın.(Bu ie6 oldukça nasıl hoş kalacağız oda ayrı bir konu.)

• http://www.positioniseverything.net/explorer/ie-listbug.html
• http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=1&postId=481

Şu an genelde kullanılan tarayıcılar: Internet Explorer, Mozilla Firefox, Opera ve Safari

http://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg

İnternet tarayıcılarının gelişimini anlaya bilmek için güzel bir resim bence.

İnternet tarayıcıları hakkında makale yazma ihtiyacım iki nedenden dolayı oldu. Birinci neden internet tarayıcıları arasındaki rekabetin iyice kızışması. Asıl olan ve ikinci neden, insanların CSS ile web sayfası yapmalarından alı koyan düzenlemelerden(fix) kaçmaları. İnsanlar CSS ile kod yazarken farklı tarayıcılarda farklı görüntüler aldığında, bu sorunu CSS’e yüklüyorlar. Bir çok makalemde belirttiğim gibi aslında bu sorun CSS’in değil İnternet Tarayıcılarından kaynaklana sorunlardır. Bu sorunlar bizi yıldırmamalı.

İnternet tarayıcılarındaki gelişmeler ümit verici. İnternet tarayıcıları web standartlarına uyumluluk açısından rekabet etmeleri en çok biz kod yazanlara yarayacaktır. Bu rekabet her ne kadar şu an bizi etkilemese de gelecekte işimizi daha kolay hale getireceklerdir. Yeni nesil tarayıcılar veya standartlara uyan tarayıcılardan kastımız; HTML ve XHTML, CSS, ECMAScript ve DOM destekleridir.

Bir çok yeni nesil tarayıcı Acid testini dikkate alıp kendilerini bu testten geçirmeleri standartlar açısından güzel bir gelişme. Acid testi web standartları bakımından İnternet tarayıcıları nı test eden çevrimiçi bir kontroldür.

Ben kodumu yazarken daha önce yazdığım gibi Firefox ve Internet Explorer(6-7) ile test ediyorum. Önceleri ie’nin 5.5 versiyonuna görede test ediyordum ama son 4-5 aydır ie5.5 testlerimi sonlandırdım. Şu an için konuşursam beni en çok zorlayan ie6 sorunları. Microsoft her ne kadar sorunlarını giderdiğini söylese ie7′de bazı sorunlar yaşamıyor değiliz. Ancak ie7 bizi ie6 kadar zorlamıyor, burada Microsoft’un ie7′yi sunuş stratejisi yanlıştı bence. Neyseki sonra bu stratejisinden vazgeçti. İnternet Explorer 8 ile birlikte web standartlarına tam uyumlu bir tarayıcı çıkarma niyetin olmaları güzel bir gelişme. Beta versiyon ile birlikte bunu gerçekleştirmeye yakınlar. Hala bazı sorunlar olsa da kararlı sürüme kadar bunların düzeltileceğine inanıyorum.

Popüler Tarayıcılara bir göz atalım:

Firefox

Mozilla alt yapısını kullanan Firefox, açık kaynak kodlu olması, web standartlarına uyumluluğu ve web geliştiricilere güzel seçenekler(eklentiler) sunması nedeni ile popülerliğini arttırıyor. Kullanım yüzdesini arttırmasında her ne kadar Microsoft’un katkısıda olsa Firefox emin adımlarla zirveye doğru ilerliyor. Fireofx 2.0 ile Microsoft’un ie 7′sine iyi bir cevap veren Firefox 3′üncü sürümü ile birlikte daha kuvvetli geleceğe benziyor. Bakalım ie8 ve ff3 yarışından kim galip çıkacak.

Bir çok yerde farklı yüzdeler verilmekte Firefox’un kullanım yüzdesi olarak. % 15-35 arasında rakam veriyor istatistikler.

Benim için en önemli artısı FireBug gibi bir aracı barındırması, standartlara uyumluluğu ve güvenlik açıklarına hızlı cevap vermesi bakımından güzel bir tarayıcı.

İnternet Explorer

Hala dünya üzerinde en çok kullanılan internet tarayıcısı olma özeliğini koruyor. Tabi bunun en önemli nedeni windows işletim sistemi ile birlikte gelmesi. Microsoft netscape’ten liderliği aldıktan sonra İnternet tarayıcı olan İnternet Explorer’a pek önem vermedi. Bunu iyi değerlendiren Firefox iyi bir pazar payı yakalım. Bunun üzerine Microsoft atağa geçti ve yeni sürümler üzerinde çalışmalarına başladı. 7. sürümden bir çok sorunları gidersede hala yapısal bir çok sorunu var ie’nin. Bunun farkında olan Microsoft ie8 ile birlikte atağa geçmeye niyetinde bakalım bunun ne kadarını gerçekleştirecek.

Hala piyasada olan ie6′nın bir çok sorunu ile uğraşan biz web kodlayıcılarını zorlayan bir çok sorunu var. Microsoft’un ie7 deki yanlış strateji nedeni ile bizim bu çilemiz 1-2 sende daha sürecek gibi. Ne diyelim ie 7 ve 8 hızlı yayılsada bizde bu dertlerden kurtulsak. Yada Firefox ve diğerlerine mi ümit bağlasak bilemiyorum.

CSS Dersleri bölümündeki problemler ve çözüm önerileri bölümünü dolduran internet explorer umut ediyoruz ki bu sorunları halledip bize daha iyi tarayıcılar sunacaktır.

Opera

Diğer bir popüler internet tarayıcısıda Opera’dır. Opera her ne kadar hızlı erişim ve kullanışlı özellikleri olsada hiç bir zaman yeterli ilgiyi kazanmadır. Daha çok mobil araçlarda kullanılan Opera mini ile adını duyuran Opera güzel bir alternatif olarak kalmaya devam ediyor.

Safari

Apple firması son zamanlarda geçtiği atak ile bir çok yenilikler sunuyor kullanıcılara. Mac her nekadar fazla tercih edilen bir işletim sistemi olmasada, belli bir kitleye hitap eden bir sistem. Safari her ne kadar MacOs için çıktı isede 3. sürüm ile birlikte Windows sürümünüde çıkardı. Son zamanlarda CSS’e yeni özellikler kazandırmaya çalışan Safari geliştiricileri(WebKit) bizlere yeni özellikler kazandırmaya niyetliler. Ancak standartlara girmedikten sonra bunların uygulanabilirliği kalmayacaktır.

Sonuç

Sonuç olarak şunu söyleyebilirim ki. Web site ara yüzlerini kodlarken bir çok sorunlarla karşılaştığımız internet tarayıcıları yakın gelecekte bizleri mutlu edecek sürümler çıkaracaktır. Her ne kadar iyimser olsak da sonucun ne olacağını tam olarak kestirmek zor. Daha az düzeltme kodu yazdığımız bir internet alemi istiyoruz. Bunu sağlayabilmek için rekabet olması şart bence.

Kaynaklar

• http://www.fatihhayrioglu.com/?p=470
• http://www.fatihhayrioglu.com/?p=259
  
• http://www.bilgisayartoplulugu.com/index.php?option=com_content&view=article&id=16:hangi-internet-taraycs-daha-iyi&catid=6:web&Itemid=11
• http://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg
  

not: Son olarak Nisan 2008′da tarayıcı kullanım oranları. http://www.favbrowser.com/internet-explorer-opera-mini-gains-firefox-and-safari-loses-april-08/

Açıkçası ben parantElement özelliğini kullandım her defasında. Ancak Firefox’da çalışmadığını görünce vazgeçtim her seferinde.

Daha sonra aramalar sonucu her ikisininde çalıştırdığı parentNode özelliğini kullanmaya karar verdim.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parentNode örnek sayfası</title>
</head>
<body>
<form id="DugmeFormu">
<input id="Dugme" type="button" value="Üst elemanı göster" onclick="ustEleman();">
</form>
<script language="JavaScript">
function ustEleman() {
var m = document.getElementById("Dugme").parentNode.id;
alert("Üst elemanı: "+'"'+m+'"');
}
</script>
</body>
</html>

Örnek sayfayı görmek için tıklayınız.

Kaynaklar

• http://www.w3schools.com/htmldom/dom_nodetree.asp
• http://www.java2s.com/Code/JavaScriptReference/Javascript-Properties/parentNodeSyntaxandNote.htm
• http://ronsguide.com/js/parentnode/