Forum Moderators: not2easy

Message Too Old, No Replies

css display: table & IE's expanding box

is there any way to force either for IE Strict

         

SuzyUK

8:44 pm on Jan 6, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



the question says it all

basically, you know how a table will stretch a cell's width/height to contain content, and IE used to expand a box by default (still does in Quirks mode)

is there anyway to force IE Strict to mimic either display: table; or invoke it's old behaviour without the Doctype Switch

coopster

4:10 pm on Jan 10, 2008 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



Either serve up a quirksmode-invoking DOCTYPE by browser sniffing or use a different style sheet using conditional comments msdn [msdn2.microsoft.com]

What are you using?

SuzyUK

6:48 pm on Jan 10, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi coopster

ooops, I see I made a mistake in my question,

is there anyway to force IE Strict to mimic either display: table; or invoke it's old behaviour without the Doctype Switch

should read:
is there anyway to force a block element in IE Strict to mimic either display: table; or invoke it's old behaviour without the Doctype Switch

sorry don't know if that sheds a different light.. sniffing would be a solution if critical, but I didn't really want to go to quirks mode just for IE6/7 because that will invoke all the other Quirky behaviours that need dealing with .. not the best thing when dealing with templates for one to be having conditional comments for every single IE eventuality ;)

I'm actually looking to see if anyone has come across a way to mimic expanding box (table cell) behaviour in IE strict mode.

It's actually the crux of a theoretical exercise to see if a "stretchy" layout template can be built yet. (related question [webmasterworld.com])

I thought float in float would do it, but no.. hmmm I wonder if a solution might be to use conditional comments in the HTML to actually present a table cell as the wrapper for IE, if it won't honor

display: table-cell;
on the body element, then give it an actual table cell..

hmmm that one might have legs and I've just talked myself into trying something else.

-Suzy

SuzyUK

10:56 pm on Jan 10, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



have now posted some code, in this thread [webmasterworld.com] - the template is for an application, but it might carry some ideas for carrying the idea through to a layout if anyone's interested.

the theory of feeding IE an actual table cell via Conditional Comments in the HTML, rather than looking for a CSS hack *seems* to be the best compromise but I'm still open to suggestions!

bare bones building block:


CSS:
#wrap, #wrapie {display: table; width: 100%;}

HTML:
<div id="wrap">
<!--[if lte IE 7]><table summary="Page Content Holder" id="wrapie" cellspacing="0"><tr><td><![endif]-->
.... content/layout in here...
<!--[if IE]></td></tr></table><![endif]-->
</div>

IE will ignore the

display: table;
setting on the 'wrapie' table, but because it's an actual table the stretching box is achieved, compliant browsers treat "wrap" as if it were a table and stretch the div.

Likely it is unnecessary to use "wrap" and the conditional comment at all, but in the interest of future compatibility that's where it's at ;)

-Suzy