Form Stillerinde IE Sorunu
CSS kullanarak form elemanlarına verilen [type=text] şeklindeki stiller maalesef IE (özelikle IE6) sorun yaratır. IE bu şablonları tanımaz. Örnek olarak;
.form input[type=text] { …… }
Yukarıdaki gibi kodları IE a anlatmak için birçok yöntemi, değişikliği denedim ancak başarılı olamadım. İmdadıma ise JavaScript yetişti. İşlem oldukça basit, ziyaretçimizin tarayıcı tipi şayet IE ise devreye JS kodları ve IE için oluşturulmuş CSS sayfası girecek. Devreye giren JS kodları ile form elemanlarının birer şablonu olduğunu IE ye hatırlatıp, bu şablona göre formumuzu göstermesini sağlayacağız.
Kullanılacak JS kodları aşağıdaki gibi olacak; (iecss.js gibi kaydedilebilir)
// IE için form elemanları
function changeClasses(currentdoc){
var inputElements = currentdoc.getElementsByTagName(’input’);
for (var i=0; i<inputElements.length; i++){
if(inputElements[i].type == “submit”){ inputElements[i].className = inputElements[i].className + ” submitbutton”;
} else if (inputElements[i].type == “checkbox”){ inputElements[i].className = inputElements[i].className + ” checkbox”;
} else if (inputElements[i].type == “radio”){ inputElements[i].className = inputElements[i].className + ” radio”;
} else if (inputElements[i].type == “text”){ inputElements[i].className = inputElements[i].className + ” textbox”;
} else if (inputElements[i].type == “password”){ inputElements[i].className = inputElements[i].className + ” password”;
} else if (inputElements[i].type == “file”){ inputElements[i].className = inputElements[i].className + ” file”;
}
}
}
Dosyayı devreye sokmak için kullanılacak kodlar; (<head></head> etiketleri arasına)
<!–[if lte IE]>
<script type=”text/javascript” src=”ie6css.js” ></script>
<![endif]–>
Yine IE ile kullanılacak CSS dosyası; (<head></head> etiketleri arasına)
<!–[if lte IE ]>
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>
Örnek CSS kodları; (ie.css)
input.textbox {
border:1px solid #dfe6ee;
background-color:#e8edf3;
width:220px;
padding:3px;
margin-bottom:5px;
}input.password {
border:1px solid #ccc;
background-color:#fff;
width:220px;
padding:3px;
margin-bottom:5px;
}
Hepsi bu kadar…
(Henüz değerlendirilmedi) 
Bu yazıyı beğendiniz mi? O halde bir fincan kahve ısmarlayarak teşekkür edebilirsiniz. (PayPal - $2.75)
