question with display:table-cell
richard
Specially with IE. In FF the container and contents are shown as desired,
but breaks upon window narrowing. IE shows a broken box. At least in my
editor it does anyways. Is there something I'm missing with the use of
table-cell?
No url. You copy and paste into your own editor.
<body>
<div id="container" style="display:table-cell; border:solid 2px #f00;">
<div id="box1" style="display:table-cell; float:left; width:100px;
padding:10px; border:solid 2px #ff0;">
hello
</div>
<div id="box2" style="display:table-cell; float:left; width:100px;
padding:10px; border:solid 2px #00f;">
goodbye
</div>
</div>
</body>
dorayme
richard <mem...@newsguy.com> wrote:
> Playing around with this I come to find out it has a problem with breakage.
> Specially with IE. In FF the container and contents are shown as desired,
> but breaks upon window narrowing. IE shows a broken box. At least in my
> editor it does anyways. Is there something I'm missing with the use of
> table-cell?
>
> No url. You copy and paste into your own editor.
>
YES SIR! THREE BAGS FULL, SIR!
>
>
> <body>
>
> <div id="container" style="display:table-cell; border:solid 2px #f00;">
> <div id="box1" style="display:table-cell; float:left; width:100px;
> padding:10px; border:solid 2px #ff0;">
> hello
> </div>
>
> <div id="box2" style="display:table-cell; float:left; width:100px;
> padding:10px; border:solid 2px #00f;">
> goodbye
> </div>
>
> </div>
> </body>
What induces you to declare display as table-cell but then float. Why
would you display the containing div as a *cell*. Am I going mad or is
it you?
This looks more sensible to my crazy brain:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>One Way</title>
</head>
<body>
<div id="container" style="display:table; border:solid 2px #f00;">
<div id="box1" style="display:table-cell; width:400px;
padding:10px; border:solid 2px #ff0;">
Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur
eleifend convallis, diam augue blandit magna. Cras vel eros. Vivamus sed
odio et orci tincidunt ornare. Duis dui lectus, commodo ut, gravida id,
ultricies quis, tellus. Vestibulum blandit nibh eget turpis. Quisque
mollis, lacus consectetur eleifend convallis, diam augue blandit magna.
Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis dui
lectus, commodo ut, gravida id, ultricies quis, tellus. Vestibulum
blandit nibh eget turpis. Quisque mollis, lacus consectetur eleifend
convallis, diam augue blandit magna.
</div>
<div id="box2" style="display:table-cell; width:200px;
padding:10px; border:solid 2px #00f;">
Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur
eleifend convallis, diam augue blandit magna.
</div>
</div>
</body>
</html>
As for IE, you cannot expect IE to respect display: table-cell and many
other such things. Use a real table and be done.
--
dorayme
freemont
> No url. You copy and paste into your own editor.
Sure. You just sit tight and we'll get right to that.
--
"Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> freemont© <-·´¯`·.¸¸.·´¯
Gus Richter
> Playing around with this I come to find out it has a problem with breakage.
> Specially with IE. In FF the container and contents are shown as desired,
> but breaks upon window narrowing. IE shows a broken box. At least in my
> editor it does anyways. Is there something I'm missing with the use of
> table-cell?
>
> No url. You copy and paste into your own editor.
>
YES SIR! THREE BAGS FULL, SIR! > > > <body>
>
> <div id="container" style="display:table-cell; border:solid 2px #f00;">
> <div id="box1" style="display:table-cell; float:left; width:100px;
> padding:10px; border:solid 2px #ff0;">
> hello
> </div>
>
> <div id="box2" style="display:table-cell; float:left; width:100px;
> padding:10px; border:solid 2px #00f;">
> goodbye
> </div>
>
> </div>
> </body>
What induces you to declare display as table-cell but then float. Why
would you display the containing div as a *cell*. Am I going mad or is
it you?
This looks more sensible to my crazy brain:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>One Way</title>
</head>
<body>
<div id="container" style="display:table; border:solid 2px #f00;">
<div id="box1" style="display:table-cell; width:400px;
padding:10px; border:solid 2px #ff0;">
Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur
eleifend convallis, diam augue blandit magna. Cras vel eros. Vivamus sed
odio et orci tincidunt ornare. Duis dui lectus, commodo ut, gravida id,
ultricies quis, tellus. Vestibulum blandit nibh eget turpis. Quisque
mollis, lacus consectetur eleifend convallis, diam augue blandit magna.
Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis dui
lectus, commodo ut, gravida id, ultricies quis, tellus. Vestibulum
blandit nibh eget turpis. Quisque mollis, lacus consectetur eleifend
convallis, diam augue blandit magna.
</div>
<div id="box2" style="display:table-cell; width:200px;
padding:10px; border:solid 2px #00f;">
Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur
eleifend convallis, diam augue blandit magna.
</div>
</div>
<div id="container" style="display:table-cell; border:solid 2px #f00;">
<div id="box1" style="display:table-cell; float:left; width:100px;
padding:10px; border:solid 2px #ff0;">
hello
</div>
<div id="box2" style="display:table-cell; float:left; width:100px;
position:relative;left:30px; /* <---- my addition to his stuff */
padding:10px; border:solid 2px #00f;">
goodbye
</div>
</div>
</body>
</html>
As for IE, you cannot expect IE to respect display: table-cell and many
other such things. Use a real table and be done.
--
dorayme
===================
Sorry about the "Edit Message as New", but I wanted your markup
unaltered but with his original, plus my addition - all included. I hope
it works in your (broken?) news reader.
You correctly pointed out that the floats were superfluous in his
example, however, note that with my addition I demonstrate its usage if
the float were to be repositioned anywhere from its only two normal
float states (left and right).
This also gives the answer/corrects another thread in CIWAS (My VALID
page:....) wherein GTalbot states "Float and position should never go
together" and Ben C responds with "Why not?" - GTalbot has not answered
so far.
--
Gus
Gus Richter
Here's my text from the other article which you may not see properly
after your sig and which responded to the OP rather than to you. Please
run the example as I provided.
~~~~~~~~~~
richard
As a follow up, I changed container 'table-cell' to 'block' and removed the
floats. Behaves just like a regular table now.
When the window is narrowed, everything crunches together like it's
supposed to and nothing breaks.
Gus Richter
> Playing around with this I come to find out it has a problem with breakage.
> Specially with IE. In FF the container and contents are shown as desired,
> but breaks upon window narrowing. IE shows a broken box. At least in my
> editor it does anyways. Is there something I'm missing with the use of
> table-cell?
Which flavor of IE are you speaking? For FF, I'm going with the latest
> No url. You copy and paste into your own editor.
Me, personally, I'm OK with a small demo C&P, but I'm also interested in
which "editor" you are referring?
BTW, what you're missing regarding the use of table-cell could be that
your IE does not support it.
<http://lmgtfy.com/?q=browser+standards+support>
--
Gus
richard
well the changes worked in ff3.5, not in IE7.
Roy A.
Roy A.
> On 1/3/2010 3:21 PM, dorayme wrote:
[...]
> Here's my text from the other article which you may not see properly
> after your sig and which responded to the OP rather than to you. Please
> run the example as I provided.
> ~~~~~~~~~~
>
> Sorry about the "Edit Message as New", but I wanted your markup
> unaltered but with his original, plus my addition - all included. I hope
> it works in your (broken?) news reader.
>
> You correctly pointed out that the floats were superfluous in his
> example, however, note that with my addition I demonstrate its usage if
> the float were to be repositioned anywhere from its only two normal
> float states (left and right).
>
> This also gives the answer/corrects another thread in CIWAS (My VALID
> page:....) wherein GTalbot states "Float and position should never go
> together" and Ben C responds with "Why not?" - GTalbot has not answered
> so far.
If the answer is that an float is superfluous with e.g. position:
relative, then the answer/correction is wrong. If you want an element
to act like a floated element, but need to change the position up,
down, left or right; then you need both eg. 'float: left' and
'position: relative' .
"It [the float property] may be set for any element, but only applies
to elements that generate boxes that are not absolutely positioned."
http://www.w3.org/TR/CSS2/visuren.html#propdef-float
Gus Richter
"IF" ?? Darn it all, I read it over and over and can't see how you
could come up with an "IF" and reverse my position! Had you read it
properly you would have noted that an example of my position was also
provided. Nothing wrong with anything else you said.
--
Gus
Andy Dingley
> Playing around with this
You'd do so much better if you tried to _learn_ something, rather than
playing around randomly.
In general though, display: table-cell et al. are best ignored. They
were originally intended for use with XML+CSS, not HTML+CSS.
For tables from HTML, use <table>
For tables from XML, use XSLT to HTML, then <table>
For HTML use they don't work well - mostly because the most useful
elements to apply them to are the <table> family anyway, where they're
already implicit. You need three levels of nesting (table, row, cell)
to get anywhere useful with table rendering in HTML so you can't do it
with simple two-level lists like <ul>. As you have to mark up with
_something_, then it's either three levels of meaningless <div>, or
just using <table> anyway.
Then there's always the potential problems of browser support.