Internet Explorer 6 min-width hack Part 2

Posted January 25th, 2009 in HTML and CSS

Yesterday I looked at a commonly known min-width hack for Internet Explorer 6 using the CSS/Javascript expression() which works only in IE and a couple of problems it presents. This post looks at an alternative solution which works and does not require Javascript to be enabled using a table hack and IE's conditional comments.

This table hack uses a fixed width invisible pixel in a table cell to make sure the cell is always at least that wide. Putting the stretched pixel just in the regular flow of HTML does not work; although the page will get scrollbars, the divs will still only go as wide as the window.

The HTML

I have added line breaks and tabbed the HTML for readability purposes but in the actual code you need to ensure it all appears on one line otherwise IE will add extra space to the top of the page...

<!--[if lte IE 6]>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>
                <img src="/images/ie6.gif" width="400" height="1" alt="" />
            <td>
        </tr>
        <tr>
            <td>
<![endif]-->

... html here ...

<!--[if lte IE 6]>
            </td>
        </tr>
    </table>
<![endif]-->

Here's the top bit on one line as it should appear in your HTML:

<!--[if lte IE 6]><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><img src="/images/ie6.gif" width="400" height="1" alt="" /><td></tr><tr><td><![endif]-->

and the bottom bit on one line:

<!--[if lte IE 6]></td></tr></table><![endif]-->

Notes about the HTML

The opening <!--[if lte IE 6]> and closing <![endif]--> tags are Internet Explorer's conditional comments. In this case they say that if the browser is IE6 or less then show the content between the open and close. No other browsers will render this because it appears as a regular HTML comment to them.

The table itself is set to 100% wide, although if you were wanting to make a maximum width you could probably set a pixel width here and it would work.

The table has two rows with one cell each. The first row contains an invisible pixel stretch to the width of your minimum width. In the example above its width is 400px so the content on the rest of the page will have a minimum width of 400px.

And finally the second cell contains the content of the page.

Conclusion

Yes, it's a bit of a hack and it adds extra code to the page, but at least it works well, doesn't require Javascript or DOCTYPEs that may either crash the browser or screw up your layout (refer to my previous post about this).