The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

As you know IE6 doesn't support max-width and commonly authors will use an expression or javascript to accomplish this which is undesirable for a number of reasons. Therefore your mission is to create a page that can be squashed to nothing but as it expands it stretches to only a maximum width of 800px (but it could of course be anything).

Once the element is at 800px width it should then be centred in the viewport if the viewport is wider. This would be the same as setting max-width of 800px and using margin:auto.

Edit:

Edit:

I should also point out that I'm not looking to mimic this type of behaviour as follows.

Code:

.test{
max-width:800px;
width:70&#37;;
}

The element .test should be content width and then get capped at 800px width.

Code:

.test{max-width:800px}

Look at the attachments which show working examples of max-width in action in IE6.

The answer is relatively simple and took me about 10 minutes to work out but then I may just have been lucky as google shows no results for this at all

The basic rules are:

valid css/html
no tables
no javascript
No expressions/behaviours etc
no conditional comments in the body of the html
Try to keep the code as simple and usable as possible and the look as close to my original as you can (which is shown in the attachment).

Any questions or if anything is unclear just ask and remember this is just for fun (although this solution will indeed be a very workable solution for IE6)

Solutions to the quiz will be posted at the end of the week (or longer) depending on how it goes

Yes you do need some extra elements but not many. I won't say exactly how many as that would be too much of a clue at this stage. The answer is quite uncomplicated html wise and of course my answer may not be the only way to do it as I'm sure you will all surprise me once again

Mal curtis from Sitepoint staff has also sent me a correct solution Well done Mal.

Any other takers?

Originally Posted by Blake

Hmmm, im guessing if you cant use min-width you can do something like CSS Code:

min-width:1em;

min-width doesn't work in IE6 Blake (see a previous quiz for answers on min-width)

Originally Posted by pixeline

What if you wanted to set both the min-width and max-width? Or the min-height and max-height?

You can use the ie6 min-width routine from a previous quiz and wrap it up with this max-width answer quite easily as already mentioned a couple of times above. This will allow you to mimic the exact behaviour of the following code in IE6:

Code:

.test{
min-width:600px;
max-width:1200px;
}

The quiz answer does not however cater for this types of structure below though:

Code:

.test{
min-width:600px;
max-width:1200px;
width:70%;
}

The quiz is only concerned with max-width. We are not building max-height into it and so does not need to be discussed here (maybe another quiz at another time). Regarding min-height then you don't need to do anything for IE6 because it treats height as a minimum anyway.

Remember these quizzes are for fun and to show your ability in manipulating css to produce the desired result. Whether or not the answers have real world applications is secondary to the quiz but indeed many of the quizzes do have useful real world uses.

What if you wanted to set both the min-width and max-width? Or the min-height and max-height?

You'd have to do a tradeoff, right? Because you can't set the width (or the height) at 2 different values. So there, you 're back to using javascript.

no not really, i have currently min-width and max-width set without javascript in every browser, i can also set the min-height and max-height in any browser if i wanted to, but i don't see any real need for this as sticky footers are much more comfortable.

there, im still not using javascript (for anything but fancy special effects).
(please don't use expressions for your own sake, just write a small javascript function and leave it at that.)

Remember these quizzes are for fun and to show your ability in manipulating css to produce the desired result. Whether or not the answers have real world applications is secondary to the quiz but indeed many of the quizzes do have useful real world uses.

they always do, either in the form of knowledge, or in the form of the actual quiz, i always find them useful.
but for reference reasons, the quizzes are kept separate and as simple as possible, regardless if they are usable or not (who knows, someone might make a usable version after seeing a quiz).

Nice quiz idea! Funny we didn't think of it during the min-width quiz .

One way to think about 'max-width' is that a box should expand naturally until a certain point – and is then prevented from expanding further. I suspect there's just one single way (modulo minor variations on a theme) to exploit IE6's rendering model to achieve this: I'm sure we've all come across a certain feature of IE6 where a box's width isn't as wide as we might have hoped (nor indeed as wide as it would have been in a CSS21-compliant browser), due to external factors, and often cursed it .

(...All the while celebrating it at other times, wishing it were part of the CSS21 spec; it's that old "in-column typography vs grid-layout" dichotomy again!)

Originally Posted by Paul O'B

You can use the ie6 min-width routine from a previous quiz and wrap it up with this max-width answer quite easily as already mentioned a couple of times above. This will allow you to mimic the exact behaviour of the following code in IE6:

Code:

.test{
min-width:600px;
max-width:1200px;
}

Almost . Whilst the solution (assuming there's only one) plays nicely with 'min-width', it's not truly a 'max-width' replacement, even in the limited case where it is not used in conjunction with 'width'. In particular, my above characterization of 'max-width' omitted one other important behaviour of CSS21 max-width: that content which is wider than the container's computed 'max-width' should overflow. Alas the very IE6 behaviour which we can exploit to help produce our pseudo 'max-width' also /inhibits/ overflow, instead preferring to widen the container. Still, that's a different issue and there are other workarounds for it (which are also discussed in the min-width quiz, as it happens) and so this is not a concern.

I also note that, in my solution at least, another well-known IE6 bug rears its head when combining the min-width and max-width techniques, but you have to look closely to see it! (I'll provide the details once the quiz is over.)

Originally Posted by Paul O'B

The quiz answer does not however cater for this types of structure below though:

Code:

.test{
min-width:600px;
max-width:1200px;
width:70&#37;;
}

Indeed, and I'm going to stick my neck out and say that I strongly believe that there is no way to mimic a combination of 'width' and 'max-width' in IE6 using only HTML and CSS (except /perhaps/ using tables, which I haven't given much thought to because my gut feeling is "no" even then.) The thing about 'width' in IE6 is that it's really agressive; once you've set it (other than 'auto') I really don't think you can then suppress it, neither by fair means nor foul. The IE6 expanding box behaviour is but one consequence of this.

Originally Posted by Paul O'B

The quiz is only concerned with max-width. We are not building max-height into it and so does not need to be discussed here (maybe another quiz at another time). Regarding min-height then you don't need to do anything for IE6 because it treats height as a minimum anyway.

Yes; unlike 'width', 'height' really does behave the same as CSS21 'min-height' in IE6. I was going to be brave (foolhardy?!) and claim that I believed that 'max-height' could not be mimicked in IE6. (Max-height is a strange concept in CSS21, since the idea that boxes ordinarily expand completely freely in the 'height' direction is central to the CSS21 rendering model. It's doubly so in IE6, where it's really hard to get things to overflow properly even at the best of times.) However, Timo (YuriKolovsky) has just stated that he has a working 'max-height' in IE6, so I'm going to give it some more thought first!

I'm ashamed to say that i'm swamped with stuff to give it my own try this week but maybe if i got an opening i'm gonna give it a try. I hope Erik J.'s solution gets posted though. The combination of min/max seems very useful

and is then prevented from expanding further. I suspect there's just one single way (modulo minor variations on a theme) to exploit IE6's rendering model to achieve this:

Thanks for the comments Anton

There are no quirks needed for this at all and the solution works in all browsers without using max-width for good browsers either. Indeed my min and max width version works in all browsers without using min and max width at all.

Almost . Whilst the solution (assuming there's only one) plays nicely with 'min-width', it's not truly a 'max-width' replacement, even in the limited case where it is not used in conjunction with 'width'. In particular, my above characterization of 'max-width' omitted one other important behaviour of CSS21 max-width: that content which is wider than the container's computed 'max-width' should overflow.

While you are 100&#37; correct that the content overflow should be visible by default if max-width is exceeded it would be a little churlish to say that it isn't a true representation of this behaviour of max-width for the purposes of the quiz.

Especially as the problem is an inherent problem with width/height itself due to the expanding box problem in IE6. In fact we could disallow all quizzes so far on this basis as width does not work in any one of them the way it should do