Simple IE6 CSS expression help? I failed miserably.

[jlizarraga]

Hi all,

Using IE6 expressions for the first time today, to get around the weird problem described below.

I am making an AJAX app that will be used across a lot of sites of varying sizes. There are two main columns to this app (think WordPress, with one large column and a narrower sidebar column). You have to set the widths of these two columns to fit each site, but all of the widths after that are in percentages and ems and whatnot.

The narrow column has some tables (and yes they contain tabular data, they are not for layout), which are told via CSS to have a width of 100% and a height of 100px. In IE7+ and all other browsers, this works just fine, but IE6 makes the table 100% of the width of the column PLUS the width of the table's vertical scrollbar (~15-20px)! This causes the table to spill out of the column in IE6.

To get around this, I tried the following CSS expression in my IE6-only stylesheet:


width: expression((this.parentNode.offsetWidth - 15) + "px");

This instantly crashes IE6. The CPU and memory usage begin to skyrocket and the browser becomes totally unresponsive from this expression.

For now, I've gotten around it by setting the width to 90% in the IE6-only stylesheet, but this is a bit less than ideal as the table is not flush with the column for IE6.

Any tips greatly appreciated!

[jscheuer1]

Expressions are tricky because they recalculate if/as conditions change. If by subtracting 15 from the parent's offsetWidth and setting its child's width to that you also change the parent's offsetWidth, this will set up an endless loop. That sounds like what is happening here.

My suggestion would be to use percent, but to find a better figure. Remember, you can use fractions with percent, so something like:


width: 91.5%;

might work well.

Another thing you might try is setting the overflow on the parent to hidden. That way changes in the child's width shouldn't affect the parent's offsetWidth, then your expression might work. Also, before the expression, set the table's width to 50%, that way it should have no influence on the parent width prior to calculation of the expression, and as long as the value subtracted is sufficient, it should have no effect during calculation.

[jlizarraga]

Thank you John! I think you were right about the endless loop. Overflow: hidden (well, overflow-x: hidden in my case) worked a charm (and 18px ended up being the magic number).