Comments on: Internet Explorer 6 CSS bug, margins, padding and how to fix it.

By: eric

eric — Mon, 15 Mar 2010 20:59:31 +0000

Thanks Neil. !important is clear and easy to read. I’ll think about using it if I have IE6 problems again.

By: Neil

Neil — Sat, 13 Mar 2010 22:58:54 +0000

You don’t need the underscore hack to make ie6 work. What you can do is something like this:

padding: 5px !important /*all other browsers including ie 7 and 8
padding:2px /*ie 6 only */

The important hack can be a very useful method when applying hacks to ie6 alone while affecting other browsers differently

By: Alan

Alan — Wed, 03 Feb 2010 10:30:14 +0000

Thanks for sharing, Dreamweaver shows that hack as invalid but IT WORKS!!

By: eric

eric — Fri, 22 Jan 2010 16:24:55 +0000

Glad it helped. I have so many people still using IE6, including my wife and people at work. I just can’t get them to upgrade past Windows 2000.

By: LinZilla

LinZilla — Fri, 22 Jan 2010 02:08:07 +0000

Oh man, reading your ie6 padding issue workaround has saved me erm, like, lots of hours of my life and also saved me from having a less that optimal site. So thankyou!!
I was on the verge of a rewrite, because of the stupid ie6 issues, adding that extra line with the “_” in it just saved the day. Cheers

By: TypO3 from Munich

TypO3 from Munich — Thu, 24 Sep 2009 09:40:57 +0000

Hi Eric,
thanks a lot for the trick with the underscore! In order to keep the CSS valid, I used this solution:

My container (#rightcolumn) should have a width of 200px with padding-left 5px and padding-right 5px.

1. Using the underscore trick:
#rightcolumn {
width: 190px;
_width: 200px; /* for IE6 only, which works fine */
padding-left: 5px;
padding-right: 5px;
}

2. In order to get valid CSS and without needing any browser hack, I added a second container (#rightcontent within #rightcolumn):

CSS:
#rightcolumn {
width: 200px;
}
#rightcontent {
padding-left: 5px;
padding-right: 5px;
}

As far as I found out yet, the different padding-interpretation occurs only in combination with a fixed width or height. So I splitted width and padding in two separate containers.

By: Adam

Adam — Thu, 10 Sep 2009 21:49:50 +0000

Great job!!!
I’ve been searching for a fix for so long and tried so many things.. this is brilliant!!!

By: eric

eric — Mon, 24 Aug 2009 12:19:19 +0000

You are welcome!

By: Andrew Maxwell

Andrew Maxwell — Sun, 23 Aug 2009 21:45:46 +0000

Excellent – much appreciated.
Somehow a div was being pushed 75px out of line in IE6.
Padding and margins both 0. Using floated div inside another.
The underscore trick worked perfectly:
_margin-left: 75px;

Still displayed perfectly in IE7, Opera, Firefox – the correction is only visible in IE6.

Regards,

Andrew.

By: eric

eric — Tue, 18 Aug 2009 13:50:26 +0000

Thank you. Glad it worked for you.