Limiting web site width in IE

Almost impossible for fully valid, accessible site?

[kiwibrit]

Sorting out the company new web site layout is taking far longer than I had hoped.

Objectives:

Bright, clean, corporate look.
All CSS.
Scalable - but limited to a max width of (to cope with the huge range of screen sizes without looking to squeezed out on high resolution screens.
Fully accessible - no javascript if at all possible.
Fully w3c valid.
Easy conversion to PDA and mobile phones thorough there own style sheets.

You'd think this was all bog-standard stuff. Not so.

In practice, the look is being affected by scalability. For example, a display in line horizontal menu was cutting across a left hand column as it scaled. So the menu had to go right to the top of the page.

And max width scaling is possible in all browsers with valid CSS - except IE! It is possible to max-width limit IE - but only with a proprietary extension that fails w3c validation. Just for the moment, I have made the overall page wrapper 955px. But I need a long-term solution.

Given that achieving all the objectives is not possible, I will have to compromise. I would prefer not to use javascript. OTOH, using it would not fail w3c validation, whereas using the proprietary IE CSS will. I think the best compromise is to use javascript, and accept that for the small number of no-javascript users, the pages will look a little quirky on high resolution screens.

But I would be very interested to see our views on this.

[Robin_reala]

I'd go with what you have in mind. I'm yet to see a very high res user browse the web with their window maximised so I think even with your high-res/javascript-off combo you won't be causing problems for that many users.

I assume you're going to do this, but I'd also make sure the resize javascript is wrapped in a conditional comment so that other users don't have to download the script file.

[kiwibrit]

Thank you, I like that. Never had to use a conditional HTML statement before is this correct?

<!--[if IE]>
<script type="text/javascript" src="thejs.js"></script>
<![endif]-->

Or should I be specifying separately for IE5 and IE6?

[Robin_reala]

Exactly. You'll probably want to limit it to less-than-or-equal to IE6 though. Hopefully IE7 will support max-width natively.

<!--[if lte IE 6]> ... <![endif]-->

[encyclo]

If you are using an IE conditional comment, then you should specify less than IE7, as the final IE7 when released in a few months may support max-width.

<!--[if [b]lt IE 7[/b]]>
<script type="text/javascript" src="thejs.js"></script>
<![endif]-->

However, it is easier to use the IE expression within CSS:

width:expression(document.body.clientWidth > 750? "750px": "auto" );

The expression is actually Javascript anyway. As you say, it will not pass validation, although it will not interfere with any other rules or break other browsers. Up to you whether you can live with that. If you can't, you can use the IE conditional comment in your document head to include just that rule rather than calling another file for just one rule:

<!--[if lt IE 7]>
<style type="text/css">
body {
width:expression(document.body.clientWidth > 750? "750px": "auto" );
}
</style>
<![endif]-->

<added>Robin_reala beat me to it ;)</added>

[kiwibrit]

Thank you both - that was very helpful.