Max-Width Workaround

This bug affects: IE6

max-width is not supported

Sat Jul 18 22:12:00 2009

So, you got a funky "fluid" layout that uses max-width property to stay sane... whappah - IE doesn't support that property? What to do!

Due to the nature of the bug, demo is shown on a separate page.

HTML Code:

<div>
    Foo Bar
</div>

CSS Code:

div {
    background: #999;
    border: 1px solid #000;
    max-width: 500px;
}

Not much to say here, if browser window is larger than 500px our <div> stops expanding, otherwise it stays at browser window's width... not in IE

Below are solutions for the above bug ordered by the solution type.

Sat Jul 18 22:18:20 2009

all of the affected

We'll use a pre-coded JavaScript solution to fix this bug - the minmax.js script. I've stored a local version of the script in case their page goes down. Here's the fixed demo:

Due to the nature of the bug, the demo is available on a separate page

HTML Code:

<script type="text/javascript" src="/minmax.js"></script>

<div>
    Foo Bar
</div>

CSS Code:

div {
    background: #999;
    border: 1px solid #000;
    max-width: 500px;
}

The script does the magic, 'nuf said. Just include it in your document and the rest is history.

Currently there are no posted comments.

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

hasLayout.net