Setting Min and Max Widths in IE
I wanted to make the theme I am working on have fixed minimum and maximum widths so that it was flexible enough to fit browsers screens as small as 800px wide yet also expand for bigger screens, but in a controlled way so that viewers with wide format monitors can still read the page without hard to read long lines of text.
This is easy with most modern browsers as they understand the CSS2 “min-width” and “max-width” but Internet Explorer 6 and before typically doesn’t get it. Hopefully this is something that the upcoming IE7 will remedy but I’m not getting exited just yet as it may not.
So far the best fix that I have found is this code based on an example at The Norwegian Cow:
* html div#wrap {
width: 960px /* fallback value */;
width:expression(((document.compatMode &&
document.compatMode==’CSS1Compat’) ?
document.documentElement.clientWidth :
document.body.clientWidth)
> 978 ? “960px” : (((document.compatMode &&
document.compatMode==’CSS1Compat’) ?
document.documentElement.clientWidth :
document.body.clientWidth) < 768 ? “750px” : “99.7%”));
}
While this seems to work well and cure the IE problem there is a downside in that the CSS doesn’t validate.
The question I am now faced with is do I go ahead and use an invalid CSS statement so that visitors see a reasonably consistent website in most browsers or not use it and stick to only valid code. If you want to look at what I have so far take a look at my Dev Site.
It seems to me that at times validity is put above visitor experience when the surely the visitor is the most important thing.
I’m tempted to go with it. What do you think?
This entry was posted on Tuesday, June 27th, 2006 at 11:13 pm and is filed under Web Design, WordPress Themes. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.
June 28th, 2006 at 9:23 pm
I’d say go with it, but include a valid CSS stylesheet, so the people obsessed by validity can use that instead!
June 28th, 2006 at 9:46 pm
That’s not a bad idea. I suppose the best of both worlds.
I’ve been giving this “user vs validity” thing quite a bit of though. Once the world has decent browsers it should not be a problem.
Like that is ever going to happen!
June 29th, 2006 at 4:23 am
Ainslie, I agree with you. Sometimes you need to find a happy middle ground between the user experience and code validity.
I think since this is such a small thing, I would use the css hack to make it more enjoyable for the end user.
The rest of your code is very clean and seems to be cross browser compliant.
The idea of having both style sheets in your distribution files is also good, just be sure to make a little note in a readme file for the person to understand what the difference is.
June 29th, 2006 at 4:33 pm
I do as a rule try and keep all my code fully valid. It’s not such a big deal usually, as there are valid workarounds for browser quirks. This time I couldn’t find anything else that fits.
I think I will use it and maybe put the code at the top of the style sheet and comment it so that it can be deleted if the user doesn’t like it or if the time comes when IE accepts min-widtht and max-width. I don’t think it is a big enough bit of code to warrant another style sheet as it will be simple enough to remove.
Then again as has happend in the past a better compliant way of doing this may turn up. Usually this is the result of some clever person giving me a good flaming for daring not to get it right!
One other option is to put this in the html and then use an IE conditional statement comment so that it validates, but this only hides it from the validator as it is still there, so it seems to me that I may as well say I have done this because…