1 Posted by Vesa Piittinen on 26 January 2005 | Permalink

By using conditional commenting you can do some nice workaround to this problem. Here is a fix:

http://merri.net/bugs/ie_bottom_right.html

As you can see, you can get around it pretty nicely.

2 Posted by IBBoard on 31 January 2005 | Permalink

Just tested the "work around" in Firefox 1.0 and it breaks the layout! On the second box, the grey border is just outside the blue border on the right and bottom. On the fourth box the third div shows overlapping the bottom (and under the 1st div) and the 2nd div overlaps the left by the width of the 1st div. Sorry I can't provide a screenshot.

3 Posted by TarquinWJ on 1 February 2005 | Permalink

IBBoard - the layout also breaks in Opera and Safari, but that is because the workaround page says to use conditional comments, but the page itself does not use them. If it did, then this would work.

However, this only works if you want the element to be an exact width, or an exact width of its parent. Most of the time this bug occurs, the desired effect is to make it use a certain amount of the available space, without knowing the exact height or width dimensions (fluid), so the workaround is essentially useless in those situations.

If you do want to make it work, there is an even more ugly workaround using expressions, but this would need to be tailored to suit each situation:

#mydiv {
left: 100px;
right: 10px;
}
.. then in conditional comments: ..
#mydiv {
width: expression(this.offsetParent.offsetWidth-110);
}

... or some other appropriate calculation.

4 Posted by Vesa Piittinen on 4 February 2005 | Permalink

IBBoard: The workaround was meant to be like that, to show what first is valid and then what is the solution for IE.

TarguinWJ: to strenghten your words, can you give an example page which can't be resolved with the (second) workaround?

5 Posted by Phil Endecott on 17 February 2005 | Permalink

Vesa, here's an example where you can't easily work around it. I want a box that starts 20em from the left of the page and extends to the right margin. I should be able to write "left: 20em; right: 0;". To make this work in IE I need to say "left: 20em; width: expression(parent.offsetWidth-20em)", except of course that that expression is not valid because of the units.

I wonder if IE7 (dean.edwards.name/IE7/) can fix this? I suspect not.

--Phil.

6 Posted by david on 17 February 2005 | Permalink

IE7 _does_ in fact fix this. i'm using this technique on a layout i'm currently designing.

7 Posted by Vesa Piittinen on 18 February 2005 | Permalink

Phil, I did do a workaround to your problem and updated the page with test case for what you said. I used "overflow : hidden" to get rid of the extra stuff (shouldn't be hard to implement) and then fixed the available content area with padding (and of course "width : 100%"). As far as I can see, this is visually a perfect solution to what you described and still rather easy to come up with.

As for IE7 scripting... for some reason, I like it when the least possible amount of JavaScript is used. Though, it is impressive someone have seen the amount of pain and time to "fix" IE's CSS rendering problems.

8 Posted by Pedro_le_ouf on 3 December 2005 | Permalink

It's seams there is another solution:
using IE expression() in css:

For exemple, if you want an element to have full parent element height, put this in it's css rules:
height: expression(this.parentNode.innerHeight + 'px');

PS: Sorry for my poor english