hasLayout.net

Affected Versions

This bug affects: IE6

Symptoms

max-height is not supported

Date of the Tutorial

Sat Jul 18 22:27:58 2009

Description

I'll be honest, never used max-height in my life... however, I'll note that even if I did, IE below version 7 does not support it. Let's glance at a demo:

Demo

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

HTML Code:

<div>
    Foo Bar
</div>

CSS Code:

* {
    margin: 0;
    padding: 0;
}

html, body, div {
    height: 100%;
}

div {
    background: #999;
    width: 500px;
    max-height: 500px;
}

In anything but affected browsers the <div> will be as high as browser window, unless it exceeds 500px in height; in which case, the <div> will remain at that height.

Solutions

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

Solution (JavaScript Solution)

Date of the Solution

Sat Jul 18 23:03:14 2009

Fixed Versions

all of the affected

Description

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, fixed demo page is shown on a separate page.

HTML Code:

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

<div>
    Foo Bar
</div>

CSS Code:

div {
    background: #999;
    width: 500px;
    max-height: 500px;
}

We've included the script and it did everything for us automagically. Our div has max-height in affected browsers and everything's spiffy.

Comments

Currently there are no posted comments.

Donate / Buy My Books

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

Alternatively, purchase my book: