IE6 Double Margin Bug Fix

I know this doesn’t pertain to anyone reading this except me I’m sure. I’m simply writing this up so I’ll have a reference for later when I encounter the same problem in my wonderful world of css. Nonetheless, if you have a floated element such as a div and you place margin-right or margin-left on that element, our most beloved Internet Explorer 6.0 will double that margin value, causing havoc in your html layout. To fix this simply add display:inline; to your floating element. Bah Boom!

162 Comments

Stephane Koenig said...

Thank god you wrote that up.

Thank you.

~ Steph

Martin Przybyla said...

Amen, brother. Thanks for sharing.

Ben said...

Yes! Thanks for sharing. You saved me.

Jeremy said...

Thank you! Until now I’ve always used:

margin-left:20px;
_margin-left:10px;

First one gets read by IE7 and FireFox. Second gets read by IE6. Awesome!

Bonny said...

Jeremy’s method of above is super helpful when you have a DIV that is set to display:none; but needs the IE6 fix ! You Rock!

James said...

Whew, that was an easy fix, I was expecting a much more complicated fix like all the others. Thanks a million.

James said...

And Jeremy — you just fixed the other one of my bugs. Thanks for the tip!

Steve said...

My God fella, just spent 3 hours trying to work out why my page was getting chewed up by IE6, then I found your answer, thankyou!

ryan said...

You lost me at ‘beloved’ :P

Haha! But in all seriousness… that’s a very helpful tip. Thanks.

Vitor Lopes said...

Dude… thank you so much!

IE6 should be banned.

jimmy said...

Thanks!

Dave said...

I can only agree with the ones above: Thank you so much!

//Dave

Bart-Jan said...

So much better than writing up IE specific hacks every time, thanks a lot!

Peter said...

My god this is a life saver :D I hate Exporer 6 with a passion but so many of my clients still use it, this really makes my work so much easier ^^

Krystian said...

THANK YOU!

Paul Koppen said...

Whish all Google #1 hits were this short and this accurate!!

You’re my hero for today.

andy said...

Definitely a helpful fix, thanks.

Atze said...

i was nearly goin’ nuts with IE6 – until i figured out that the margin was exactly doubled…
so a “IE6 double margin” in google brought me to your “anyone reading this except me” :D post.
amazing – i don’t like those * html etc. hacks in my stylesheets.
your solution works like charm :)

Ashish said...

Hi,
In my case, I have floated the left element and the right content is relative positioned with a left margin. The left sidebar includes “display: inline” Still, IE 6 shifts the right element below the left. Any clue why?
Thanks a ton.
Ashish

Patrick said...

Hi there,

I was going nuts too, this saved me. Thanks for the fix!

Keith said...

hey dude
more love to you man, easy fix, thank god i found this page haha

russellnation said...

sweet just what i needed

Roger Gordon said...

I encountered this before and though I must be going crazy. So tonight I encountered the same problem, tested and measured it, and yip, IE6 does indeed double the margin. What the heck?

Anyway, thanks for this elegant fix. I was about to revert to a new IE6 style sheet, but will probably be able to retain just the one now.

Ian Atkinson said...

Googled ‘ie6 double margin’ and got this … which works like a charm! Top man!

Ian.

Steve said...

Same as all the others, you’re a life saver.

Kai Chan Vong said...

Thanks. Just spent ages thinking I was going out of my mind.

Justin said...

Thanks for this.

Bryony said...

Kudos to you!
Thanks muchly :)

Rapidz said...

You sir, are a GOD. Many thanks.

Alexandra said...

Wow! Thanks a lot for this!!!!
It saves me lots of hours of pulling my hair ;-)
good work!
greetings from France

Kaloyan said...

Very helpfull, thanks.

Sean said...

You have saved my scalp many a missing hair.

jp said...

Nice one :)

dj said...

Fantastic. HOWEVER, and I’d love to have someone confirm this, but until I put the display:inline rule *above* the margin rule, IE6 still doubled up on me.

If this is true, I wonder what other nuances and bugs are caused simply by the ordering of style rules? Perhaps I haven’t been crazy all of this time trying to devise the best order to type out my styles…

Anyway thanks A MILLION for this!

Thilina said...

awesomesauce! ty!

George Wiscombe said...

This is what i love about blogs…
You use it as a tool to remember something and in turn help thousands!

Adrian Diaconescu said...

Thanks Jayme! You just saved me a lot of time.

Jaison James said...

nice :)

volker said...

DANKE from Germany!

Ryan Covert said...

Thank you! I, too, was thinking that the problem wasn’t as easy as this. In the past, some of the floating problems in IE6 were fixed by simply wrapping the div with a nameless container div.. but that didn’t help this time around. your “Display: inline;” did the trick.

Does anyone know “why” this works and “why” IE6 doubles the margin, though?

Thanks again!

Alexander Pavlov said...

Thanx alot, i’ve been almost crazy about that!

Anders said...

Quick and clean – perfect!

Keith Foster said...

Simple… I love it.

I was aware of the double margin issue… and was just doing a quick search to see what the hell was actually going on with IE6.

I was just about to do a *margin-left, thanks for the non hacky solution.

Brooks said...

Oh joy,
love it thank you very much!

BJ said...

Thanks. I thought I just needed some sleep. Damn IE6!

DanDan said...

I would like to award you the IE destroyamagator award. Way to go.

Russell Bishop said...

My god sir, you are my hero :D

Was working late for a client – deadline tomorrow – going crazy, then I googled ie6 double margin and found this LOVELY fix.

Ken said...

Works like a charm. This problem took me hours! thanks

Patrick O'Connor said...

You are a godsend! a simple Google search brought this up and saved me a ton of time and frustration!

Thanks for this great reference!

Paff said...

Thank You for this very useful and time-saving tip! :)

imran khalid said...

I was worried about this problem but you solved my problem…..

Thanks

Pip said...

Great tip! Thanks. Saved me a lot of hassle.. :)

Paul Feakins said...

Microsoft suck.

You rock.

Cheers.

Ben Walker said...

I love you. Which is more than I can say for IE6. ;o)

Daniel Böcker said...

Superior!

Paul Ward said...

Many thanks for your post – has ended a couple of hours of hacking around!

James said...

Do you need a job?

Valerie said...

Bless your heart from Durham!

Eddy said...

i love you!

Mody said...

Thank you!

Todd said...

Best tip ever.

Eric said...

Just for fun I punched “margin double” in Google and found this toward the top. I know IE is horrible, but I thought, “No way, it could be something this obvious.” I didn’t even expect to find a solution. This is just such a great post.

Jonathan said...

Woah… I can’t believe that worked.

E Meline said...

Bless you kind sir!

Bevi said...

IE6… Why???? Why too much people still use it????

Thanx to all the guys than gave some solutions, everyone have his magic ;-)

Mainly thanx to the publisher of the note in the begining, cause the rest not happen

Greetings from Argentina!!!

Jimbo said...

According to W3C browser statistics, 28.9% of all computers on the web still use IE6. So this is a great tool for helping those of us who hate Microsoft cope. Thanks for the tip.

slarty said...

Thanks a lot man, having just finished sorting out transparent PNG problems in IE6 I got to work trying to figure out with the heck was going on with my margins.
Worked like a charm

Daniel Perin Tavares said...

Great!!!

Thanks for share!

J0n said...

Wow… I love Google and I love YOU!

Stephen Lombardo said...

I’m sure this just saved me an hour+ of hacking… Thanks!

Kris said...

Worked a charm

Royce said...

Thanks a lot!! You’ve saved me another hours solving this problem…

Chris Allen said...

YOU ROCK!!

Jonathan Weiss said...

Thank you very much. Internet Explorer 6 has proved itself to be the worst browser I have ever tried to make a web design work for.

null said...

thank you. i didn’t realize what was happening until i saw the title of this post.
goodKarma++;

Freddy said...

nice…….

Ivo said...

thanks for sharing bro!

Smillie said...

I build web sites all the time and I always forget the answer to this so it’s about the 5th time I have checked your site!

Thank you and please dont remove the page!!

Karlheinz Dereser said...

Hey, my partner and me we think this (_margin) is the best and shortest bug fix we ever have seen. Thanks a lot and for all lucky bug fixing!

heinz0815 said...

Nice One. THANK U!

john said...

found this via google, saved me a load of time, thanks very much!

AmandaO said...

YOU ROCK!!! So you glad you posted it “just for yourself.”

Ben Palmer said...

You’re a life saver mate, thanks for the heads up

Melody Morgan said...

hope affirming! xxx

name said...

ie 6 is a balls up. thank you, i expected the “feeling lucky” to take me to positioniseverything but this was a short solution! thank you :)

James said...

I’ve posted here before… forgot about this post, forgot the hack, came across the same problem, googled it and came across the same post. quite funny. guess that’s what bookmarks and code snippets are for. anyway… thatnks for the fifth time, i think. great design, btw.

Matt said...

you rock

mike scott said...

Bless you!! Wish I’d have Googled this about 4 hours ago…

Vesters said...

Thanks so much – awesome!

Nathan Monk said...

Thank you!

Slawomir said...

Dude, you saved me..

Pyrop said...

Thanks a lot!

Jan said...

Thanks for posting this :)

nuSpace said...

Thanks! I’ve been meaning to start adding all thses fixes to my blog as well to help me remember.

Freek said...

Thanks for posting this fix – It saved me hours (maybe days) of scratching my head.

charlie said...

you are the f***in man for posting this!

mark said...

Thanks for posting this. Saved me a lot of time.

pickupjojo said...

You are god… Really!
Thanks for this very nice tip. <3

dave said...

thanks for the blog post. saved me a lot of hassle! damn ie6!

Matt Kayan said...

Google would be worthless without people like you posting fixes like this – many thanks!

Nir said...

“I know this doesn’t pertain to anyone reading this except me I’m sure.”

You were wrong about that :p

Thank you!

Salvatore Marrafino said...

thanks buddy!!!

Anonymous said...

thanks a lot you saved me there

Dave said...

Another day in web dev, another IE6 bug. Thanks for the tip :)

Johny said...

WOW! I should have come across this post before, it could have saved me 2 hours of trying to figure out the problem… Thank you very much!!! they need to disappear ie6 from every computer.

Chip said...

Thankyou so much. I still wonder why so many people are still using ie6!

andrew said...

thanks for the tip. very helpful. nice ‘n’ concise.

Nate said...

thank you thank you you solved a big issue I was having

R-Enemy said...

THANK YOU!!!!!

Alex said...

thanks for writing it down. I always forget it ;)

Angel said...

Thanks for the help. I’ve got stumped on this often. Have book marked until it sinks in!

Gavin said...

Ahhhhh!!! Brilliant! :-) This has been bugging me for ages! Thanks!

Elisabeth said...

Thanks, you just saved my day for posting this.

Melville said...

informative post, keep it up.,

Piero Di Carlo Dalla-Bona said...

Thank you very much!

This hack work parfectly!

=)

Mukul said...

You’re a lifesaver! I’ve cursed IE for ages but somehow never got around to finding a solution to this particular problem…Thanks a ton!

Maki said...

You saved me hours upon hours of frustrating labor! Thank you so very much!!!!!!!

Anton said...

Haha! You rock brotha.

Sky said...

Thanks a lot!

Christian said...

Thanks are due! Thats allowed me to claw back a few minutes from the countless hours that IE6 has cost me :)

Mac said...

Great post, many thanks!

cybergord said...

Thanks for that. Its something I keep forgetting about!

Harry said...

Thanks a lot for the help……. just solved the problem in no time

Webmaster said...

That was awesome….

Mr Groovy said...

Thanks this has helped me.

ross said...

Thanks… maybe someday IE will be gone….

Murray Lunn said...

Awesome!

I was going nuts because I had my new site perfect in Firefox and IE7, and loaded up in 6 only to find it all wacky. Now it’s good to go.

Dave said...

Thank you. Was first result on google, my exact problem. Now fixed.

Wojciech said...

Exacly what I was looking for. Thanks!

Kel said...

Wow, if only it were always this easy to do a google search, click on the top result and fix my problems with one little copy and paste!

Joe Michaud said...

Simple problem, simple solution. You just saved me hours of digging. Thanks!

Mark Smith said...

You rock my socks, unfortunately IE6 does not!

PoZel said...

thanks! saved me some hassle!

Chris said...

Thanks for posting this man! I’ve been trying to figure this problem out!

Hussain said...

Thanks a lot. you have solved my problem regarding ie6.

I am facing another problem of height of iframe in ie7
Other browsers are displaying height of iframe very well but ie 7 is compressing it.. I am not getting why?

If you have the solution then please help me..

Thanks.

jignesh said...

Thanks a lot.

Jason said...

Thanks a million man. I am just finishing the Teach yourself series for CSS by Sams Publishing. So far this book has been amazing and I’ve got CSS down pretty good as far as layouts. Unfortunatley most of the work I do is in IE6 at work (practicing) and I have IE7 at home on my new laptop. This was bugging the heck out of me when it worked in IE7 and Firefox but not IE6.

The book I’m reading and working with is awesome but this must be one of the few ie6 hacks that is not listed in it. Greatly appreciated bud. And as the others stated google FINALLY had the best hit listed as number 1!

Luke said...

Thanks for this solution. Nothing like playing whack-a-mole with CSS.

Richard Adams said...

THANK YOU!

John Tedesco said...

so much for thinking you’re the only one needing this info… as a web developer, I’m forced to make all my websites work in ALL browsers, current and one version back. I would love to phase out IE 6 AND IE 7, but the truth is, 90% viewers are using IE… and 50% of THEM are using IE6. Needless to say, it’s going to be awhile before they phase it out.

katie said...

cheers!

Tom said...

This is brilliant. Thank you so much–you probably saved my sanity.

Jason Vanstone said...

I found you through twitter by accident, and found you again on this hint….

Whatever you are doing keep it up. Obviously you know how to communicate with the current tech.

Congrats!

Jason

PS: The site looks very cool too!

Tanner said...

Thank you much!

Pascal said...

Thanks for sharing

Rob Kille said...

Fantastic. Been grilling my brain for the last hour trying to fix it.

damien said...

great fix

Aeternum said...

Thanks!!

Me said...

Great tip, worked like a charm but… If we keep fixing IE6 then people will continue to use it! Isn’t it time to just say, “you know what, if you want to see my page then get a proper browser.”

Michael B said...

Congratulations, this is the number 1 google link when I searched for “IE6 margin”.
WHEN I SAY I WANT MARGIN RIGHT TO BE 10 PX I MEAN JUST 10PX…. NOT 20PX YOU STUPID WEB BROWSER!!!!!!!!

Ben said...

I just spent 3 days trying to iron out a CSS bug in IE6, so didn’t want to waste another 3 days on another one. – Thankfully came across your excellent page BEFORE I attempted to solve it. Bam – worked first time! A real life saver.

THANKYOU! THANKYOU! THANKYOU!

Rajeev said...

Hey! thank you so much for saving my hours debugging this issue.

newbie said...

Im new to computers so are vague to how to do the fix. Could someone explain what Im meant to click on and how to go about it. Many thanks.

You are awesome said...

Thank you a lot!

Rick said...

IE6 drives me nuts with this bug, many thanks!

Tim said...

Thnx mate !!

lucab said...

Actually that prevents lots of headaches to me!
Thanks guy!

Ben H. said...

Thank the maker!

That put an end to an hour’s worth of head on desk slamming interspersed with enough profanity to make a ex-con blush.

Bhupi said...

Thanks a lot :)

James Dismukes said...

Worked like a charm, thanks for reminding me that it’s IE6 that’s crazy and not me…

Hutch said...

Thanks, also very glad you wrote this up… :)

Bill said...

Great tip.
Jeremy’s (comment 4) actually fixed my problem. Thanks Jeremy!