IE6 Destroys my site

Hello all,

We just had a customer call because he was using IE6, and we found that it destroys the layout of the site.

Just wondering if anyone has any idea what the problem is…

Crawfish, Crawfish Boil Pots, & Propane Burners | Crawfish.com

It’s a new design, and we didn’t consider IE6 in production. Ouch :frowning:

Not knowing your location, do youu find a lot of people still visit on ie6? If no, I would just tell them how a more modern browser is needed.

Well I looked at our stats and 5% of our traffic is coming from IE6, so unfortunately we’ll have to account for it.

Try and get rid of those pesky comments between divs and everywhere. It seems that they break the header element for you in IE6.

Running the code quickly through DreamweaverCS5, there are multiple spots where IE6/7 will have problems.

line 154 and 163: Positioned containers define a new stacking order, even when the computed z-index of the container is auto. This can cause positioned children of the container to appear above other positioned elements on the page when they should not.

176 possible: If line-height is defined for a block, it will collapse by half for any line that contains an inline replaced element (img, input, textarea, select, or object).

Numerous:
If a link with display: block and no explicit dimensions is inside a list item, any spaces or linebreaks that follow the list item in the code will cause extra whitespace to appear in the browser.

Affects: Internet Explorer 6.0
Likelihood: Very Likely

line 480:
Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.

Affects: Internet Explorer 6.0
Likelihood: Likely

Not to mention you’re pulling a lot of javascript. I use Jquery fairly extensively and we have to test for IE6. It usually works and only has issues when setting CSS properties or manipulating elements with specific paddings/margins so that framework (which is all javascript) is fine but possibly, if in your other .js files you are using anything to position or move elements, you may have some issues.

Initially though, it looks to be all css-related and things like removing comments where possible as mentioned above.

Could download IETester for free on a Windows machine and see from IE5 through 9. Also, if on a Mac IE5.5 is pretty close to what IE6 on Windows renders. If, by any chance you’re on Citrux, they use IE6 for the browser.

Or you could just tell people to upgrade. :goof:

Otherwise, have fun redesigning your site to support a 10-year-old, obsolete, buggy, insecure browser that fewer people are using every day. Your voice may get a little hoarse from all the swearing you are going to do. :lol:

There are two main problems with your page and IE6 and the first is the double margin bug on floats is pushing everything over the place.

Add display:inline to every floated element that has a side margin and it will cure it (It is only a bug on floats whose side edge touch the containing block but on a page with that may floats you may as well add it to all floats that have a side margin to make sure).

The other main problem is that the png fix method you are using doesn;t seem to cater fo repeats or positioning.


<script type="text/javascript" src="http://www.crawfish.com/minify/1272514090/js/lib/ds-sleight.js,/skin/frontend/base/default/js/ie6.js" ></script>


Removing that code and the page snaps back into position albeit with many minor bugs. Try another png fix instead such as the twinhelix pngfix. Or just use normal non transparent images for IE6.