CSS for IE 6 and 7 with no hacks

Tuesday, January 16th, 2007 | Browsers, CSS, Internet Explorer, Programming, XHTML

UPDATE
Since the time of this writing I have learned some important things:

  • With correct doctypes, IE6 almost always renders the same as FFX and IE7, except when it comes to PNGs.
  • If you set your body’s font-size to 62.5%, you reset browsers to 10px.

Eric posted about this some time ago, but I really think this is one of the most unique methods I use in my coding process. I’ve yet to see this idea brought up by most sites I browse for CSS/XHTML solutions. The idea is that you can use pure XHTML in conjunction with conditional comments to create a CSS style sheet that is free of your usual hacks. The reason we found this out is because the people on the IE 7 dev team actually managed to bring their new browser into closer range for compliant style rendering. IE 7, for the most part, follows the box model pretty well, and ignores the usual string of hacks we use in our CSS.

Before we learned about conditional comments, we were using an underscore to rewrite any definitions that IE 6 needed to render our code correctly. The most common fix was usually to the width attribute. Add your padding back. Well, no more underscores. Here’s what you do:

When you create your body tag, write it as so:

<!--[If lt IE 7]>
<body class="ie6">
<![endif]-->
<!--[If IE 7]>
<body class="ie7">
<![endif]-->
<!--<![If !IE]>-->
<body>
<!--<![endif]>-->
OK, so what is this mess, you wonder. This is code that only Internet Explorer since v5.5 understands. Microsoft did a good thing by adding this functionality so that web developers like us can fix our coding problems without hacks. Essentially here’s what it says in order from top to bottom:

If Less Than IE 7 then read: <body class="ie6"> If IE 7 then read: <body class="ie7"> If NOT IE, then read: <body>

Since the first two statements are commented out, all browsers except IE ignore the HTML inside the comments. The last statement is commented it out, as well, but the HTML: is not. This is actually a twist on down-level revealed comments. The tags supplied by MS in the link above would have you use <![If !IE]>. This tag is not valid XHTML. All we did was put comments around it. IE still understands, and the code is perfectly valid. IE will skip that tag, no other browser will. Everyone is happy.Here’s how you use it in CSS:One thing I noticed is font sizes in IE tend to be bigger than Firefox. Here’s what I usually do at the top of my CSS files:

body{
font:normal 1em Arial, Helvetica, sans-serif; }
body.ie6, body.ie7{
font-size:0.9em;
}

Starting my stylesheets with this declaration almost always guarantees my fonts will be the same size on Firefox, IE6, and IE7.

And of course, if you need to fix a width problem due to improper box model:

.bigdiv{
width:140px;
padding:0 5px;
}
body.ie6 .bigdiv{
width:150px;
}

Using body.ie6 as the parent selector will cause .bigdiv’s new width to only be implemented by IE 6.

You may read Eric’s post and notice he didn’t differentiate between IE 6 and 7 in his comments. Since his post, I’ve come to find that sometimes IE 6 needs fixing, sometimes IE 7 needs fixing, and sometimes they both do. That’s why I’ve chosen to differentiate between them in my body sub classes.

8 Comments to CSS for IE 6 and 7 with no hacks

Jobi
September 2, 2007

Hello Joseph and anyone out there.

I don’t fully understand your postings but I have a feeling its about fixing a problem am having.

I made my website and later realized all tables, sizes overlap/ display real badly when vewi>text size on IE is changed (except with smallest size) unfortunately people hardly view with such size.

I am not a developer, and am looking for any simple help to this program. I’ll eternally appreciate any codes that I can paste to my pages to fix this problem.

My website address is: http://member.hkbn.net/~clpkids/LF-87042_INFO.html

Please taka a look/visit it and play with text size from IE. I dont’ know about other browsers but I would be greatful if I can get simple code to just fix IE hence my target visitors are ordinary folks likely to use only windows IE.

Thank you.
Jobi

Joe Sak
September 3, 2007

I think your problem has to do with everything being absolutely positioned and using static heights. Try floating and not setting the heights of your elements and see if that gets you better results.

Jobi
September 4, 2007

Thanks Joe, notice, font sizes got oversized and tables overlap if larger text size of browser is selected? If I can only make my pages not to respond to visitors browser text change (view/text size) for now.

I am low on cash to hire a web maker to solve the problems.

I’ve carefully positioned everything (using Dreamweaver on my Laptop/XP. It can’t connect online so, I always have to transfer files to PC/ ME system) and its at this stage that I can see the bad positionings, but that don’t matter cause everything get messy after re positioning/fixings when visitors view site using larger text size [on their browsers].

“the flloating” is what I’ve always wanted but tables will still overlap? I will learn about that now.

Meanwhile, how do I make my site to stop responding to browser (text size) changes?

Thanks,
Jobi

Joe Sak
September 4, 2007

Here’s why you shouldn’t impede on users wanting to resize their text.

And you can only make it work in IE6, by setting static pixel values instead of relative percentages or EMs on your font sizes.

You’ll want to read up on css at http://www.w3schools.com and learn how to set yourself free from tables, use compliant XHTML, and always design with the user in mind.

Jobi
September 4, 2007

Hi Joe,

I’ve discovered “page propeties setting” fixed the overlapping issues but I want your advise floating hence I’ve solved my first problems by myself.

How to create floating of the menus?
how to create static height ? what is this?

Thanks.
Jobi

Joe Sak
September 4, 2007

I’m saying you need to eliminate the static height on your containers (td, div, etc)

That will allow for EXPANSION of the elements when fonts are resized.

Jobi
September 6, 2007

Hi Joe,

I am not a web developer. My site is the first thing I’ve tried making. I was asking for advise on points I barely know about. I have no idea what td, div refers.

Size isn’t the trouble now, its floating I wanted to do, I will grap some books ASAP on them.

Thanks for the advise.

Joey
May 17, 2009

Great article.. Helped me out a lot! Thanks for keeping this page up!

Leave a comment

Search

Social Media

About the Author

I'm a Front-End Web Developer from Chicago, IL. I like XHTML, CSS, JavaScript, last.fm, 37signals, flickr, Getting Real, dogs, bikes, social life, ROWE, speaking my mind, UX/UI engineering & design, dinner dates, dancing, movies, indie rock music, hipsters, scene kids, bars, food co-ops, drums, writing, books, organic food, eco-friendly, progressive thinkers, the secret message of Jesus, and lots of other things.