CSS: IE8 vs World (Firefox, Chrome, Safari)

Question

I have a theme using Adaptavist Theme Builder for Confluence, and I've encountered an issue where the theme is prefect in Firefox, Chrome or Safari but IE8 doesn't want to constrain the width of the table:

Example: http://wiki.bccampus.ca/pasbc

Turning on Compatibility mode doesn't help...

It's a three column layout, and the width of the middle column is fixed. Except on IE8... I've compared the output from Firebug in Chrome and Firefox, vs the Developer Tool in IE8 and I can't see a difference in the HTML.

Update

I attempted both of the CSS options provided, but wasn't seeing any change in the rendered element in IE. Then I found out the Theme Builder version was old, and need to upgrade to Confluence 3.3.x to use the newest version of Theme Builder...

Answer 1

Sounds like you have a fun problem on your hands...

IE will cause you many, many headaches in the future.

From what I can tell, your table is set to have "width:100%;" of the surrounding div which is 940px wide. This works great in FF/Chrome/Safari because they see the width of 100% and think 100% of the div directly surrounding the table. IE thinks of it as 100% of the page (from what I can tell)

Try changing your CSS for the table that holds the content from width:100%; to width:940px;

Yes, IE is a pain.

Answer 2

the width of the middle column is controlled using min-width and max-width which are not supported in IE

you can try using expressions
for ex-

min-width:500px;
width:expression(document.body.clientWidth < 500 ? "500px" : "auto");

refer this artical for more details