ContentPane renders width incorrectly in IE when there are scroll bars

[scottoreilly]

When there is a vertical scroll bar in a content pane, the width acts like there's no scroll bar in IE.

I've tested this in IE6, IE7, Firefox 3, and Safari 3.1, and it's only a problem in IE6 and IE7.

<div dojoType="dijit.layout.ContentPane" style="height:100px; width:400px; background-color:red; padding:25px;">
	This is the ContentPane with a padding of 25px.
	<div style="width:100%; height:200px; background-color:blue;">
		This is a div with a width of 100%.
	</div>
</div>

[scottoreilly]

Screenshots of correct and incorrect rendering

[bill]

That's how IE works, it's the different box sizing model, see ​http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

[scottoreilly]

Sorry, Bill, that was kind of a bad example. I added the padding to show the difference between the DIVs and accidentally made things more confusing. For the IE screenshot I posted I was using IE7 in standards mode and I don't think the problem is caused by the box model bug.

In this second code example (screenshots included) I've removed the padding and added a second ContentPane? without scroll bars. As you can see, IE renders everything correctly when there are no scroll bars. The problem seems to be that the scroll bar width isn't accounted for in IE.

<div dojoType="dijit.layout.ContentPane" style="height:100px; width:400px; background-color:red; padding:0;">
	This is a ContentPane with a padding of 0 and a height of 100px.
	<div style="width:100%; height:200px; background-color:blue;">
		This is a div with a width of 100% and a height of 200px.
	</div>
</div>
<br>
<div dojoType="dijit.layout.ContentPane" style="height:100px; width:400px; background-color:red; padding:0;">
	This is a ContentPane with a padding of 0 and a height of 100px.
	<div style="width:100%; height:50px; background-color:blue;">
		This is a div with a width of 100% and a height of 50px.
	</div>
</div>

[scottoreilly]

Better example of this problem

[scottoreilly]

I was going to try to fix this problem myself and submit a patch. I didn't realize until now, however, that IE7 Standards Mode still has a different box model than other browsers. I'd known about the box model problems with padding, but had never tripped over the issue of 100% width ignoring the scroll bar width. ​http://www.web-zonez.com/screen/100/div/index.html

You'll probably want to close this out again. Sorry for the spam.

[bill]

OK, yah, I didn't know about the scroll bar thing myself. I bet that's fixed/changed in IE8.

I'll close this out.

BTW next time please attach test cases using the attach file button instead of inlining the text. It makes it easier for us and avoids issues like confusion over standards vs quirks, etc.