IE max-width, min-width -- a not-so-simple solution

but it's handy

[ergophobe]

[NOTE: This is really a followup to an old thread [webmasterworld.com] and the solution provided by DrDoc, but that thread is closed and does not allow furth posting. Therefore, I have a bit of a recap to start with

It's frustrating when creating fluid layouts. Line-lengths get too long, floated boxes get squished. You cna fix it, sure, with max-width and min-width and it looks great... for the 5% of users browsing with recent versions of Mozilla, Firefox, Konqueror, Opera, etc. For the masses browsing with IE, though, it doesn't do anything.

IE does however allow for "expressions" in CSS declarations that allow you to achieve things like relatively correct PNG transparency and, setting max-width as suggested by DrDoc. To add to that, Svend Tofte has a nice solution that, in addition to setting pixel widths, allows you to specify max-width in EMs in order to keep line lengths to the desired number of characters.

There is a full and excellent explanation [svendtofte.com] on Svend's site and this is fully stolen from there, but in case that page disappears or the URI changes, the essence of it is follows.

width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto" );
}

For the Javascript challenged:
- document.body.clientWidth = width of browser window
- 500 = roughly how wide the screen can be in pixels with 12 point type to get the desired width of 30em
- 12 = 12 pt type
- parseInt() extracts an integer from a string
- document.body.currentStyle.fontSize = current font size in pts.
-? ... : is the "ternary" operator - if true do the first, if not, do the second.
- 30 em is the max-width
- auto is the width if it's less than 30em

Let's say that document.body.currentStyle.fontSize evaluates to 14.

(500/12) * 24 === 500 * (12/24)

This means that we now consider max-width to be 1000px to achieve the same 30em width. So let's assume 6pt type and 400px viewing area.

expression(400 > (500/12) * 6? "30em" : "auto")
=> expression(400 > 250? "30em" : "auto")
=> "30em"

If the font-size were 16

expression(400 > (500/12) * 16? "30em" : "auto")
=> expression(400 > 667? "30em" : "auto")
=> "auto"

Thanks to Svend Tofte and DrDoc for their solutions!

Tom

[gethan]

Nice find ergophobe. Out of interest what happens to users with js disabled?

[ergophobe]

I don't know, but I assume that it doesn't work. But now instead of 95% of users having 120 character lines (too long!), now only 10% will, and they are likely to be people who expect things to be a little funky.

Tom

[peteb]

check out this article

[alistapart.com...]

its about creating footers via CSS but talks in depth about how to determine widths in X-browser environments

[ergophobe]

thanks peteb