And Slaters Go Plop

The CSS property ‘max-width’ and ‘max-height’ doesn’t work in Internet Explorer 6. Here’s a workaround:

.myclass {
width:expression(this.width > 100 ? (this.height > this.width ? (this.width / this.height) * 100 : 100) : true);
}

What does this do? It executes a bit of javascript within the CSS that goes along the lines of “If the width is greater than 100 pixels then set the width to 100 – unless the height is greater than the width, in which case scale it down to the difference between the width and the height – otherwise just leave it as it is”.

This means that any element that is of .myclass will fit proportionately into a 100×100 area (change the 100 for whatever max-width or max-height you require).

I hope this saves someone from having to figure this out in the future.

I’ve been HTML-ing and CSS-ing for years now and had never come across this before: To make the content within a div tag (or any other block tag) scrollable all you need to do is fix the width and/or height and add overflow:scroll; to the style for the tag.

You can also set individual scrollbars with overflow-x:scroll; or overflow-x:hidden; and overflow-y:scroll; or overflow-y:hidden;.

I can’t believe I missed out on this one. Perhaps I need to go back to the CSS specification and work through each attribute one by one.