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);
}

3 thoughts on “Some simple but effective CSS rules for IE 6

  1. good tips, thanks!

  2. good info, I will refer to in the future…thanks

  3. very useful list & I still think the htc is teriffic! ;)

Comments are closed.

Twitter
LinkedIn
YouTube
Instagram