cssinternet-explorerinternet-explorer-6css-expressions

CSS expression crashing the browser


In my website, I want the body tag to have a minimum width of 640px. Thing is, IE6 doesn't recognize min-width, so I'm trying to fix this with a CSS expression in my IE6 stylesheet:

body {
    width : expression(this.clientWidth < 639 ? "640px" : "auto");
}

But this is crashing the browser as son as I resize it. I've tried with document.body.clientWidth instead of this.clientWidth but it too crashes. Is it possible to fix this?


Solution

  • If the body has padding:0, then this should work:

    body {
        width : expression(this.clientWidth < 641 ? "640px" : "auto");
    }
    

    Demo: http://jsfiddle.net/kt2m8/embedded/result/


    In case there is some padding you could use something like this:

    body {
        width : expression(this.clientWidth < 641+parseInt(document.body.currentStyle.paddingLeft,10)+parseInt(document.body.currentStyle.paddingRight,10) ? "640px" : "auto");
    }
    

    Demo with padding:10px and margin:10px: http://jsfiddle.net/vL689/embedded/result/