[css-d] using display:table-cell blows up in IE
I finally figured out how to achieve the look of what used to be floated divs, centered in a page (when I don't know the width of the parent div). Right now, I'm using a wrapper div with a display:table and an inner wrapper div with a display:table-row. The colored boxes for the movie campaigns are set to display:table-cell. However, in IE, this displays all the campaign divs one on top of the other, as opposed to the intended horizontal layout. I'm aware that this is an issue in IE, however, but I can't seem to find a solution or hack to get it to work. The fix is located at: http://archivist.incutio.com/viewlist/css-discuss/42280 Hoping someone knows how to get this to look correct. It works properly in Firefox/most everything else. The page: http://stg.participate.net/ The CSS: http://stg.participate.net/css/w3c.css Thanks! -Jack -- John Haas Web/Multimedia Designer [man][ape] design w: http://www.manapedesign.com e: [EMAIL PROTECTED] p: 215.868.2661 630 N. 17th St. #1 Philadelphia, PA 19130 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using display:table-cell blows up in IE
On Jan 22, 2006, at 4:33 PM, John Haas wrote:
I finally figured out how to achieve the look of what used to be
floated divs, centered in a page (when I don't know the width of
the parent div).
Right now, I'm using a wrapper div with a display:table and an
inner wrapper div with a display:table-row. The colored boxes for
the movie campaigns are set to display:table-cell.
However, in IE, this displays all the campaign divs one on top of
the other, as opposed to the intended horizontal layout.
Hrmmm -- you mentioned you don't know the width of the parent div;
but I assume you know the width of the centered div.
Is there a reason you're not using the following:
div id=centeredSome content.../div
#centered { width: 600px; margin: 0 auto; }
This will work regardless of the width of the parent element, or even
if there is no parent element.
--
Matthew Levine (http://www.infocraft.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using display:table-cell blows up in IE
On 1/22/06, John Haas [EMAIL PROTECTED] wrote: I'm aware that this is an issue in IE, however, but I can't seem to find a solution or hack to get it to work. The fix is located at: http://archivist.incutio.com/viewlist/css-discuss/42280 Hoping someone knows how to get this to look correct. Apparently the IE fix is to apply text-align:center where you have display:table and display:inline-block where you have display:table-row. Obviously, behind a conditional comment or hack. Did you try that? -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using display:table-cell blows up in IE
Hrmmm -- you mentioned you don't know the width of the parent div;
but I assume you know the width of the centered div.
Is there a reason you're not using the following:
div id=centeredSome content.../div
#centered { width: 600px; margin: 0 auto; }
This will work regardless of the width of the parent element, or even
if there is no parent element.
I'm assuming you mean if I had continued to use the float method, as
opposed to this display:table stuff.
div id=features_wrap
div id=features
div/div
div/div
div/div
/div
/div
The reason I had issues with the whole setup was that I can't say how
many plain div's will be within that #features div, hence I couldn't
put a width on the #features, and couldn't center that via a margin: 0
auto. #features_wrap has to be 100% width.
-Jack
--
John Haas
Web/Multimedia Designer
[man][ape] design
w: http://www.manapedesign.com
e: [EMAIL PROTECTED]
p: 215.868.2661
630 N. 17th St. #1
Philadelphia, PA 19130
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using display:table-cell blows up in IE
Apparently the IE fix is to apply text-align:center where you have
display:table and display:inline-block where you have
display:table-row. Obviously, behind a conditional comment or hack.
Did you try that?
Yes, the hack I have in my CSS now is::
body.home #features_table {
display:table;
margin:0 auto;
}
body.home #features {
padding: 0;
margin: 0 auto;
display:table-row;
height:17.35em;
}
body.home #features div {
display:table-cell;
font-size: .86em;
padding: 12px;
width:110px;
height:18em;
text-align:left;
}
/* IE/Mac \*//*/
body.home #features_table {
display: block;
margin: 1em 0;
text-align: center;
}
body.home #features {
display: inline-block;
width: 1px;
white-space: nowrap;
}
/**/
-Jack
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
John Haas
Web/Multimedia Designer
[man][ape] design
w: http://www.manapedesign.com
e: [EMAIL PROTECTED]
p: 215.868.2661
630 N. 17th St. #1
Philadelphia, PA 19130
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using display:table-cell blows up in IE
On 1/22/06, John Haas [EMAIL PROTECTED] wrote:
/* IE/Mac \*//*/
body.home #features_table {
display: block;
margin: 1em 0;
text-align: center;
}
body.home #features {
display: inline-block;
width: 1px;
white-space: nowrap;
}
/**/
But this only applies to IE Mac, if I'm not mistaken. I think you
meant to have:
* html body.home #feature_table {
* html body.home #features {
at least, if you wanted it to apply to IE Win as well.
And come to think of it, I'm pretty sure you want to apply
display:inline-block to #features div, not #features. Or maybe
that was to apply display:inline to #features #div.
Let me know if you get it to work.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using display:table-cell blows up in IE
And come to think of it, I'm pretty sure you want to apply
display:inline-block to #features div, not #features.
I tried that as well, it didn't work either.
Well, here's what I have now, still not working, as you can see in IE.
http://stg.participate.net
body.home #features_wrap {
margin:0;
padding: 0;
background-color:#00;
width:100%;
text-align:center;
}
body.home #features_table {
display:table;
margin:0 auto;
}
body.home #features {
padding: 0;
margin: 0 auto;
display:table-row;
height:17.35em;
}
body.home #features div {
display:table-cell;
font-size: .86em;
padding: 12px;
width:110px;
height:18em;
text-align:left;
}
* html body.home #features_table {
display: block;
margin: 1em 0;
text-align: center;
}
* html body.home #features {
display: inline-block;
width: 1px;
white-space: nowrap;
}
Christian Montoya wrote:
On 1/22/06, John Haas [EMAIL PROTECTED] wrote:
/* IE/Mac \*//*/
body.home #features_table {
display: block;
margin: 1em 0;
text-align: center;
}
body.home #features {
display: inline-block;
width: 1px;
white-space: nowrap;
}
/**/
But this only applies to IE Mac, if I'm not mistaken. I think you
meant to have:
* html body.home #feature_table {
* html body.home #features {
at least, if you wanted it to apply to IE Win as well.
And come to think of it, I'm pretty sure you want to apply
display:inline-block to #features div, not #features. Or maybe
that was to apply display:inline to #features #div.
Let me know if you get it to work.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
John Haas
Web/Multimedia Designer
[man][ape] design
w: http://www.manapedesign.com
e: [EMAIL PROTECTED]
p: 215.868.2661
630 N. 17th St. #1
Philadelphia, PA 19130
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
