Tag Archives: ie6

IE6 Hack – replacing clear:both;

I’ve been excessively frustrated with IE6 for a long time now and despite my growing anger I’m still forced to work with this terrible software day in and day out.  Yesterday I was working for about 6 hours on IE6 fixes and I came across a quite handy hack.

Scenario:
You have a <div> wrapped around 3 elements that are all floated left like so:

<div id=”wrapper” style=”margin-bottom:15px;”>
<div style=”float:left;” id=”A”>A</div>
<div style=”float:left;” id=”B”>B</div>
<div style=”float:left;” id=”C”>C</div>
</div>

Given the above scenario in any browser the wrapper div (#wrapper) would not assume any height.  In more recent browsers the fix for this scenario would involve a choice of two approaches:

  1. Adding an element after #C that has style=”clear:both;”
  2. Adding style=”overflow:hidden;” to #wrapper

Although the first approach is 100% reliable I hate the additional markup.  I find that when I add <div style=”clear:both;”></div> in one place it ends up all over my site.  So I always use the second approach, <div id=”wrapper” style=”overflow:hidden”>.  It allows for clean markup which doesn’t clutter your editing experience and it shifts the responsibility of the visual layout to the CSS.

Well to not surprise the user of overflow:hidden; doesn’t have this affect in IE6 and it doesn’t work with overflow-x:hidden; or overflow-y:hidden;.  You can’t set a min height (at least not a reliable one) and height:auto; will also always display a heightless #wrapper.

Solution:
The solution, set the height (in IE6 only) to 100% and set the overflow to hidden like so.

<!–[if IE 6]>
div#wrapper {
height:100%;
overflow:hidden;
}
<![endif]–>

Thanks for reading

Damien
@DamienH

My IE6 revolt

I am a graphic designer, specifically focused on web design so my day to day job includes a combination of HTML, CSS, JavaScript and occasionally some php. I have been doing this sort of work now for almost a decade and while I am very thankful for my skills and abilities I can’t help but gripe about some of the hurdles that I have constantly had to battle, in particular IE6.

Back in the day I never could have imagined a better browser. I built all of my websites using <table >and <img> tags and life was pretty good. IE6 was my go to browser and why wouldn’t it be with 80%+ of the browser market it just made sense. As time went on and things began to improve the shift to CSS based design was very logical and with that came a whole new approach to designing websites. At first I didn’t really like the new shift but I adapted and as I learned about CSS and the standards that governed it’s implementation I quickly started to hate IE6. Every time I built a website I had to add an extra 100 lines of CSS to make sure that the padding, height and just plain obscurities of IE6 were fixed. Such an effort has been a constant in my life for the last 4 years and despite the fact that IE7 and IE8 are now available the selfish bastards at Microsoft still will not force users to update their browsers. As a result I have developed countless hundreds of fixes and work-arounds for a poorly developed product.  In an effort to fight back I’ve decided to change the way users view my blog. Granted I only have an all-time total of about 200 IE6 views I wanted to give a message to any future viewers who dare use that terrible excuse for a browser. Today I added a quick IE6 hack as follows:

* html body #top,* html body #wpcombar,* html body #bg {
display:none;
}

* html body {
background-color:#fff!important;
background-position:top center;
background-repeat:no-repeat;
background-image:url('http://farm4.static.flickr.com/3544/3313074004_21a8227120.jpg?v=0');
}

The CSS presented above hides all of the elements of my blog and sets the background of the body to the following image.

All in all I am quite happy with my decision and the message that I am giving to IE6 users.  If you feel the same way please feel free to use my image which is located at http://flickr.com/photos/damienhowley/3313074004/.

Thanks and have a great day,

Damien Howley
@DamienH