View Single Post
  #1 (permalink)  
Old November 27th, 2006, 01:58 PM
richard.york's Avatar
richard.york richard.york is offline
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default Code Announcement: Emulating min/max width in IE

I've discovered a bug in the code in Chapter 2, Multi-column Layouts.

Here's the fix; swap out the conditional comment style sheet "hack-columns-ie.css" in Step 4 on Page 57 in the section titled "Good Old Fashioned Internet Explorer Hacking" with the following code.

The code originally supplied with the book causes IE to crash when the width of the window is less than 750 pixels. This happens when a new window is opened with the page in question at a size lower than the lower threshold.

Code:
div#container {
    width: expression(
        documentElement.clientWidth >= 1000?

            // If the width of the body is greater than 1000 pixels
            // set the max-width to 1000

            1000
        :
            // If the width of the body is less than 1000, perform
            // another check.

            documentElement.clientWidth <= 750?

                // If the width of the body is 750 pixels or less,
                // make the min-width of the container 750 pixels.

                750
            :
                // If the width of the body is greater that 750 pixels, 
                // but less than 1000 make it auto.

                'auto'
    );
    /* In IE, height behaves like min-height */
    height: 400px;
}
div#first-column,
div#third-column {
    height: expression(
        document.getElementById('container').offsetHeight - 10
    );
}
div#content {
    position: relative;
    top: 3px;
    height: 392px;
}
div#header,
div#footer {
    width: expression(
        documentElement.clientWidth >= 1000?
            994
        :
            documentElement.clientWidth <= 750?
                744
            :
                'auto'
    );
}
Snippets from this code also appear on page 59, and the bottom of page 60, top of page 70.

You'll see that I'm now referencing the documentElement.clientWidth object, and checking for greater-than or equal to, or less-than or equal to. Without these modifications, IE will crash when the lower threshold is met.

Note, the above fix is for IE6 in standards-compliant mode.

For IE 6 in quirks mode and previous versions of IE, you'll need to change the object from documentElement.clientWidth to document.body.clientWidth.

Please contact me if you have questions.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html
Reply With Quote