No support for max-width in IE 6

Posted on Feb 9, 2007 in Web Dev | 1 comment

Having built a few one-off, stand-alone web pages (in strict XHTML 1.0 and CSS) and testing them in Safari, Camino, and Firefox (all on the Mac) and it all looked great. When finished, I took a peek in IE 6 for the PC. Whoa! What happened?

One of the issues was my content container, a
div
, was using the CSS2 max-width property to prevent it from growing wider than 65em. The purpose for this was to keep line-length down to a readable level. In IE, the container filled the browser window regardless of how huge it was, less the margin and padding values I’d set. A quick web search revealed why: no support for particularly useful CSS2 properties in IE 6. Among these are
max-width, min-width, max-height, and min-height.

What’s a web developer to do? Well, I just went back to a table layout with a single-pixel gif spaced out to the width I needed. Uh, just kidding. What I did was employ IE’s proprietary expressions as a work-around. A huge tip of the hat to Svend Tofte for explaining this concept!

Read Svend’s article for full details, but I’ll sum up here. The solution is to employ the proper CSS2 property for browsers that understand it. Then, follow up with an IE expression to define a similar setup. IE will understand and obey, while other browsers will simply turn their backs and ignore the proprietary content. Here’s how the CSS selector and the relevant properties look:

#container {
margin: 0 auto;
padding: 2em;
max-width: 65em;
width:expression(document.body.clientWidth > 700? "700px": "auto" );
}

That expression is a ternary operator that says “Is the browser window greater than 700 pixles? If so, the width property is 700px. If not, use auto.” Essentially, it does just what max-width does. So everyone’s happy!
Does anyone know whether IE 7 supports max-width and other CSS2 properties correctly?

Related: If you liked this, check out:

1. First-time bidder Note: This entry was from my first abortive attempt at...