Stacking jQuery CSS declaration doesn't work in IE8

Question

This fiddle provides a stripped-down example of what I'm trying to achieve. A lot is missing, but all relevant code is there.

Take a look at this fiddle. The goal is that the pink box fills up the space that's available in width (with a gap defined in CSS by margin-left) and that it has the same height as the yellow part. Unfortunately only the first property (min-height) is applied.

$(".banana + .strawberry").css({
    "minHeight": function () {
        var $this = $(this),
            banana = $this.prev(".banana"),
            bh = banana.outerHeight();
        return bh;
    },
    "width": function () {
        // Many variables, but they allow a highly
        // customized CSS file
        var $this = $(this),
            margin_l = parseInt($this.css("marginLeft"), 10),
            margin_r = parseInt($this.css("marginRight"), 10),
            padding_l = parseInt($this.css("paddingLeft"), 10),
            padding_r = parseInt($this.css("paddingRight"), 10),
            border_l = parseInt($this.css("borderLeftWidth"), 10),
            border_r = parseInt($this.css("borderRightWidth"), 10),
            parent = $(this).parent(),
            pw = parent.width(),
            banana = $this.prev(".banana"),
            bw = banana.outerWidth();

        console.log(margin_l);
        return (pw - bw - margin_l - margin_r - padding_l - padding_r - border_l - border_r);
    }
});

For some reason all browsers accept this code, however IE8 doesn't. On my website I'm using jQuery 1.11.2. I tested IE8 in emulation mode. I also tried alerting some text inside the function that ought to return the right value for width, but even that doesn't work. Can't you stack CSS properties in jQuery with IE8 that all depend on a function to return a value?

Just wondering... What is the return of th? I'm not seeing any th variable. — dowomenfart, Mar 19 '15 at 18:22
I'm trying to load this fiddle in IE 8 and IE 10 and it's not loading anything. Stuck on loading screen. — dowomenfart, Mar 19 '15 at 18:29
IE returns "NaN" on margin_r, border_l and border_r so this answer may help you [http://stackoverflow.com/a/6736521/2359055](http://stackoverflow.com/a/6736521/2359055) — Abraham Uribe, Mar 19 '15 at 19:18
@dowomenfart [This](https://jsfiddle.net/ysx0bp5d/3/embedded/result/) should work. — Bram Vanroy, Mar 19 '15 at 19:49
@AbrahamUribe adding ` || 0` after the `parseInt`'s did work. I don't understand why though. When no border is set, IE8 and lower return NaN? But more recent versions don't? Seems like something jQuery should've taken care of with a custom parseInt function. — Bram Vanroy, Mar 19 '15 at 19:52
IE8 and lower return "auto" on $this.css("marginRight") and parseInt("auto") return NaN so you can also set the default margin-right to 0 in CSS — Abraham Uribe, Mar 19 '15 at 19:55
@AbrahamUribe Ah, I see. Thanks! If you could post that as answer, I'll gladly accept. — Bram Vanroy, Mar 19 '15 at 20:06

score 0 · Accepted Answer · answered Mar 19 '15 at 21:34

IE8 and lower return "auto" (default value) on $this.css("marginRight") and "medium" on $this.css("borderRightWidth") and $this.css("borderLeftWidth") so parseInt("auto") and parseInt("medium") will return NaN
you can set the default value of those properties on CSS to 0 like this

.strawberry {
    background: #FC5A8D;
    margin-left: 10px;
    padding: 8px;
    margin:0;
    border:0;
}

or you can add || 0 after each parseInt() so each var defaults to 0 instead of NaN like this

$(".banana + .strawberry").css({
    "minHeight": function () {
        var $this = $(this),
            banana = $this.prev(".banana"),
            bh = banana.outerHeight();
        return bh;
    },
    "width": function () {
        var $this = $(this),
            margin_l = parseInt($this.css("marginLeft"), 10)||0,
            margin_r = parseInt($this.css("marginRight"), 10)||0,
            padding_l = parseInt($this.css("paddingLeft"), 10)||0,
            padding_r = parseInt($this.css("paddingRight"), 10)||0,
            border_l = parseInt($this.css("borderLeftWidth"), 10)||0,
            border_r = parseInt($this.css("borderRightWidth"), 10)||0,
            parent = $(this).parent(),
            pw = parent.width(),
            banana = $this.prev(".banana"),
            tw = banana.outerWidth();        
            return (pw - tw - margin_l - margin_r - padding_l - padding_r - border_l - border_r);
    }
});

Stacking jQuery CSS declaration doesn't work in IE8

1 Answers1