Internet Explorer 6 min-width hack Part 1

Although Internet Explorer 6 usage has dropped dramatically it’s still there in large numbers (it’s at around 20% across the websites I work on). IE6 does not support the CSS min-width property and there’s a commonly known hack using “width: expression”. This post will look at some issues with this particular hack and tomorrow I’ll look at another solution.

I am currently redeveloping the healthy.co.nz website and we are using a fluid layout with fixed left and right columns and a flexible middle column that uses up the remaning space. It needs a minimum width otherwise the layout kind of falls apart a little.

IE6 usage is a tad under 20% on this website so we want to make sure they get as good an experience as everyone else otherwise that’s potentially 20% less sales.

The CSS Hack for IE6

The well known hack to make Internet Explorer 6 have a minimum width (and it can also be used for maximum width) is to use the “expression” function which works only in Internet Explorer.

If we have a wrapper div around all the content, we can make sure the content within it is always at least 400px (in this example) by doing this:

* html #wrapper {
    width: expression(document.body.clientWidth < 400 ? "400": "auto" );
}

This solution works pretty well but I know of two issues with this method. Tomorrow I’ll supply a different solution, and the one we’ll be using on the healthy.co.nz website.

Issue #1: It’s Javascript

Many people think that because it’s a CSS property that it’s pure CSS and doesn’t require Javascript to work. Wrong! Try disabling Javascript and see if it still works. The stuff between the brackets is actually a Javascript call.

OK, so not many people disable Javascript so it’s probably not really going to be much of an issue, but it is something to be aware of.

Issue #2: It can lock the browser up

Depending on how you set the DOCTYPE, IE can completely lock up when you resizew the window to where it starts applying your Javascript expression. If your window was already smaller than the minimum width it will lock up immediately. Once it locks up you have to click the X button to quit the app.

If your DOCTYPE is OK then it won’t do this.

For whatever reason, the DOCTYPE header we’ve used on this new version of the website is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

This locked IE 6 up when using the Javascript expression and the window was sized lower than the minimum width.

With the addition of an xml tag at the top it worked fine and didn’t lock up the browser:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

However, in our case this completely threw the layout of the website out so it was not a viable option.

Table hack solution

So for this particular website we couldn’t use expression() because when used in combination with the headers we were using the browser crashed. When the headers were changed the layout was destroyed. Without a minimum width the layout gets destroyed at a certain point. So what was the solution? A simple table hack for IE6 only, which I will explain in tomorrow’s post.