Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > question with display:table-cell

Reply
Thread Tools

question with display:table-cell

 
 
richard
Guest
Posts: n/a
 
      01-03-2010
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>
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      01-03-2010
In article <(E-Mail Removed)>,
richard <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
freemont
Guest
Posts: n/a
 
      01-03-2010
On Sun, 03 Jan 2010 12:44:56 -0700, RtS writ:

> 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© <-·´¯`·.¸¸.·´¯
 
Reply With Quote
 
Gus Richter
Guest
Posts: n/a
 
      01-03-2010
In article <(E-Mail Removed)>,
richard <(E-Mail Removed)> 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>

<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

 
Reply With Quote
 
Gus Richter
Guest
Posts: n/a
 
      01-03-2010
On 1/3/2010 3:21 PM, dorayme wrote:
> In article<(E-Mail Removed)>,
> richard<(E-Mail Removed)> 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.
>


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.

--
Gus

 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      01-03-2010
On Sun, 3 Jan 2010 12:44:56 -0700, richard 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.
>
>
>
>
> <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>


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.
 
Reply With Quote
 
Gus Richter
Guest
Posts: n/a
 
      01-03-2010
On 1/3/2010 2:44 PM, richard 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?


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

 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      01-03-2010
On Sun, 3 Jan 2010 12:44:56 -0700, richard 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.
>
>
>
>
> <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>


well the changes worked in ff3.5, not in IE7.
 
Reply With Quote
 
Roy A.
Guest
Posts: n/a
 
      01-04-2010
On 3 Jan, 23:54, richard <(E-Mail Removed)> wrote:
> On Sun, 3 Jan 2010 12:44:56 -0700, richard 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.

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

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


IE7 don't support display: table, table-row etc.

http://www.quirksmode.org/css/display.html
 
Reply With Quote
 
Roy A.
Guest
Posts: n/a
 
      01-04-2010
On 3 Jan, 22:49, Gus Richter <(E-Mail Removed)> wrote:
> 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




 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
question row filter (more of sql query question) =?Utf-8?B?YW5kcmV3MDA3?= ASP .Net 2 10-06-2005 01:07 PM
Quick Question - Newby Question =?Utf-8?B?UnlhbiBTbWl0aA==?= ASP .Net 4 02-16-2005 11:59 AM
Question on Transcender Question :-) eddiec MCSE 6 05-20-2004 06:59 AM
Question re: features of the 831 router (also a 924 question) Wayne Cisco 0 03-02-2004 07:57 PM
Syntax Question - Novice Question sean ASP .Net 1 10-20-2003 12:18 PM



Advertisments