question with display:table-cell

R

richard

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.




<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>
 
D

dorayme

richard said:
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.
Click to expand...
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>
Click to expand...

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.
 
G

Gus Richter

richard said:
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.
Click to expand...
YES SIR! THREE BAGS FULL said:
<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>
Click to expand...

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.
 
G

Gus Richter

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.
Click to expand...

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.
 
R

richard

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.




<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>
Click to expand...

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.
 
G

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?
Click to expand...

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.
Click to expand...

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>
 
R

richard

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.




<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>
Click to expand...

well the changes worked in ff3.5, not in IE7.
 
R

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.
Click to expand...

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
 
G

Gus Richter

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.
Click to expand...

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
Click to expand...

"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.
 
A

Andy Dingley

Playing around with this
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Having trouble centering contents of td ? 3
Help with Visual Lightbox: Scripts 2
Need help , Having problem with Drag n Drop... 1
Need help , Having problem with Drag n Drop ? 9
Working on mobile css menu with plenty of frustration! 2
Show text on-click with transition 2
Help with code 0
Trouble with css 4

Members online

No members online now.
Total: 29 (members: 0, guests: 29)
Robots: 165

Forum statistics

Threads
473,776
Messages
2,569,603
Members
45,189
Latest member
CryptoTaxSoftware

Latest Threads

Top