Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > CSS > BOOK: CSS Instant Results
BOOK: CSS Instant Results
This is the forum to discuss the Wrox book CSS Instant Results by Richard York; ISBN: 9780471751267
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: CSS Instant Results section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
Old November 27th, 2006, 01:58 PM
richard.york's Avatar
Wrox Author
Join Date: Jun 2003
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.

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

            // If the width of the body is greater than 1000 pixels
            // set the max-width to 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.

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

    /* In IE, height behaves like min-height */
    height: 400px;
div#third-column {
    height: expression(
        document.getElementById('container').offsetHeight - 10
div#content {
    position: relative;
    top: 3px;
    height: 392px;
div#footer {
    width: expression(
        documentElement.clientWidth >= 1000?
            documentElement.clientWidth <= 750?
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.


Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results


Similar Threads
Thread Thread Starter Forum Replies Last Post
How does one get the Max or Min Filename? crabjoe ASP.NET 1.0 and 1.1 Basics 4 January 15th, 2008 04:48 PM
MAX/MIN Value Help slbibs SQL Server 2005 4 November 6th, 2007 04:00 AM
MIN( MAX( UPDATE Stuart Stalker SQL Language 3 February 21st, 2007 07:10 AM
Min / Max followup danbush XSLT 2 August 31st, 2005 12:02 PM
MAX and MIN ON TD cleytonjordan XSLT 7 July 27th, 2005 12:39 PM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.