Web Development Blog

by Ei Sabai Nyo

02 Jul, 2009

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);
}
Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Your name:   Your email:  

3 Responses to “Some simple but effective CSS rules for IE 6”

  1. Mario says:

    good tips, thanks!

  2. Jon says:

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

  3. Albert says:

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

Profile PicHello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more about me or have a look at some of the tips & resources I've written.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates

Recommended Book

Categories