Berbagai solusi untuk memperbaiki Tampilan web di IE

Kadang kala web designer di bikin kesel sama browser yang satu ini.

tapi jangan emosi dulu. soalnya banyak persoalan di IE masih bisa kita atasin.


CSS kondisi.

Firefox
.kanan {
margin-left:10px;
}
IE
* html .kanan {
margin-left:15px;
}

pake ini juga bisa cuman jadi banyak
<!–[if IE]>
<style>
fieldset {
position: relative;
}
legend {
position: absolute;
top: -.5em;
left: .2em;
}
</style>
<![endif]–>

Posisi Fixed
di IE ga kenal yang namanya position:fixed
jadi di tambahin ini di CSS nya

* html .kanan{
position:absolute;
width:100%;
margin-left:0px;
left: expression(eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollLeft +(documentElement.clientWidth-this.clientWidth) : document.body.scrollLeft +(document.body.clientWidth-this.clientWidth));
top: expression( ( 54 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + ‘px’ );
z-index:2;
}

Buat Background RGBA
Di IE juga ga bisa make RGBA
maka perlu ditambahkan
* html .bak{
background:transparent;
filterrogidXImageTransform.Microsoft.gradient( startColorstr=#80ffffff,endColorstr=#80ffffff);
zoom: 1;
}

Buat GAmbar PNG
Di IE juga ga bisa nampilin gambar PNG, jadinya ada border abu2 di sampingnya. jelek dech.

nich filternya

<script language=”JavaScript”>
// correctly handle PNG transparency in Win IE 5.5 & 6.
function correctPNG() {
var arVersion = navigator.appVersion.split(“MSIE”)
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters)) {
for(var i=0; i<document.images.length; i++) {
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”) {
var imgID = (img.id) ? “id='” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class='” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title='” + img.title + “‘ ” : “title='” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”” + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:XImageTransform.Microsoft.AlphaIma geLoader”
+ “(src=\'” + img.src + “\’, sizingMethod=’scale’);\”></span>”
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent(“onload”, correctPNG );
</script>