02 Jul, 2009
Some simple but effective CSS rules for IE 6
Web Development » CSS, Troubleshooting » Some simple but effective CSS rules for IE 6
All these CSS are used in a conditional CSS file for IE 6 to ensure CSS validity as some of the properties used here are proprietary to the IE 6 browser.
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]-->
Setting an opacity
.transparency {
filter: alpha(opacity=50);
}
Change the link to a hand cursor
a.link {
cursor: pointer;
}
Get rid of double margin bug by adding display:inline to a block level element
#sidebar {
float: left;
margin-left: 20px;
width: 300px;
display: inline;
}
Ensure proper positioning of list items
ul li {
display: inline-block;
}
Hide extra spaces and padding
#header {
height: 10px;
overflow: hidden;
}
Bring a layer on top of other layers
#close {
position: absolute;
z-index: 50;
}
Resolve float issue in IE6 by triggering hasLayout property
#content {
zoom: 1;
}
PNG transparency in IE6 (uses IEPNGFix code)
#background {
behavior: url(iepngfix.htc);
}
