...

View Full Version : Cannot get table cells to be the same height. - html5/css3



effpeetee
09-06-2010, 10:42 AM
This is an experimen (http://www.exitfegs.co.uk/Table1.htm)t to try to understand css display:table-cell etc.
The original code I have downloaded from the web and modified it to my required dimensions.
The table cells will not be the same height/length and I cannot find why.

I appreciate that it is still not finished, but the original site had equal cell lengths so I must have done something wrong.

I never was any good at tables when only html tables very available.
Any help would be much appreciated. I have been working on this forn several days and I am beginning to get war weary.

Rescue urgently required.

Frank:thumbsup:

SB65
09-06-2010, 12:08 PM
Hello Frank

It's the float settings on your table-cell divs that are causing the problem. Remove the floats and those three divs have the same height. You might need to change the order of your html to get the divs ordered correctly.

Doctor_Varney
09-06-2010, 12:12 PM
Hey Frank. Ain't Firebug great for checkin' out someone's code!? :)

First thing that occurs to me is, if you're displaying divs as 'table' then why float?

To me (and 'tis just my own humble reasoning) the whole point of a table is to build a matrix - a grid - whose columns and rows must have equal height, by it's very definition!

Wheras, tables are linear and logical, floating is what I call an 'abstract behaviour' because it requires to transcend the 2 dimensions in order to do what would normally have been expressed as a linear structure.

Also, I presume 'display:table' creates a flow condition which precipitates the building of a matrix - therefore, floating (out of flow) must become unecessary... indeed, the antithesis of 'table'.

I have no idea what I'm talking about because I have never used this new property but those are the immediate thoughts which pop into my head.

No, I was never any good at tables either. That was more to do with it's attributes being inseparable from the markup. Everything is made easier with CSS - not just tables... except layout, which is always a challenge - even with the old methods.

Dr. V

Lerura
09-06-2010, 01:07 PM
In order to it make work properly you have to nest the divs as if they were ordinary table tags:

<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
becomes

<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell"></div>
<div style="display:table-cell"></div>
</div>
</div>
doing so, the divs automatically floats and "height"s just as if they were the related table element.

It is actually an alternative set of table elements.
so omitting e.g.<div style="display:table-row"> is just like omitting <tr> in the standard set. - It won't work

And they can't be combined:
e.g.
a <td> cannot go inside a <div style="display:table-row"> and vice versa.

The only noticable difference is that "table-cell"s by default is styled like a div (e.g. content is vertical top and no padding).
And AFAIK there is no equivalents to "rowspan" and "colspan"

effpeetee
09-06-2010, 01:35 PM
Thanks for your help although I was taught not to use tables this wise, so I know almost nothing about them.

The code that I used was largely downloaded from a url that did work. All that I did was to alter the widths to suite my purpose. Since then, it does not work properly.

Frank

Lerura
09-06-2010, 02:15 PM
As i see it, using "table" display is only suitable when you wanna float a group of divs and have them to have the same height.

effpeetee
09-06-2010, 02:30 PM
Precisely. That is why I want to use them with html5 and css3. I just cannot find an article that makes it clear to me. W3 states that if any stage is omitted, the css will automatically insert it.

Ah well press on. Thank you all for your help. I am determined to get their if it is the last thing I do. (the way I feel at the moment, It may very well be so!)

Frank

Perseverance pays.

Lerura
09-06-2010, 03:00 PM
W3 states that if any stage is omitted, the css will automatically insert it.

testing it, I found that it is so, at least in my version above.

effpeetee
09-06-2010, 03:25 PM
testing it, I found that it is so, at least in my version above.
What version above? I'd like to see it.

This is the original version. (http://www.exitfegs.co.uk/atable.htm)

Frank

Doctor_Varney
09-06-2010, 05:16 PM
I am determined to get their if it is the last thing I do. (the way I feel at the moment, It may very well be so!)

Frank

Perseverance pays.

Yes, Frank. I know exactly how you feel (and you know how I get sometimes!) Stick at it, mate! You're a gentleman, a scholar and an innovator. :)

Dr. V

Doctor_Varney
09-06-2010, 05:22 PM
So, were we right? The floating was not needed, yes?

Lerura's post seemed to be the brightest light at the end of the dark tunnel. So, what you're saying is, that each div takes on the function of a seperate element of the old HTML table...? If so, it makes perfect sense, though doesn't seem so different to the way I've been using divs just lately in one of my own experiments. It opens a box of questions for me. But that's cool. Cheers!

Dr. V

effpeetee
09-06-2010, 05:26 PM
Yes, Frank. I know exactly how you feel (and you know how I get sometimes!)
Keeps me out of mischief.

Frank

SB65
09-06-2010, 05:26 PM
What version above? I'd like to see it.

This is the original version. (http://www.exitfegs.co.uk/atable.htm)


In that version none of the "table-cell" divs are floated, and additionally there is a wrapper div which has display:table. As per earlier post if you remove the float from #navcol, #sidecol and #main then then your original code isn't far off - certainly the columns are of equal length.

effpeetee
09-06-2010, 08:09 PM
In that version none of the "table-cell" divs are floated, and additionally there is a wrapper div which has display:table. As per earlier post if you remove the float from #navcol, #sidecol and #main then then your original code isn't far off - certainly the columns are of equal length.
I think we are getting there. This incorporates your suggestions. Thanks to you all for putting up with me. I have a bit of a bee in my bonnet over this project. I want to get it right before my next birthday.
I was born 14th September, 1925

It's here to view. (http://www.exitfegs.co.uk/table1.htm) I still need to add the rounded corners but I know how to do that.

Frank

Lerura
09-07-2010, 06:26 AM
What version above? I'd like to see it.

Oh sorry! by " version above" I meant the div version from my first post:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell"></div>
<div style="display:table-cell"></div>
</div>
</div>
I styled it with colors and filled the "cells", and omitting <div style="display:table-row"> made no difference to the output, confirming that omitted stages are automatically inserted by CSS.
At least in this simple version

effpeetee
09-07-2010, 09:46 AM
This is the latest version. (http://www.exitfegs.co.uk/table1.html) Slowly getting there.

Frank

effpeetee
09-07-2010, 04:37 PM
This is the latest version. (http://www.exitfegs.co.uk/table1.html) Slowly getting there." Seems OK now. Just the usual tidying up to do. Now to put rounded corners back on to the cells. (I hope!)

Frank

effpeetee
09-08-2010, 03:51 PM
I have been adding the CSS3 rounded corners to thia site. Interestingly, they only show up withj Google 'Chrome' and not with Firefox Latest.

I would appreciate any confirmation, feedback etc.
The Sources program in my signature (http://www.exitfegs.co.uk/Sources.html) at the bottom of this post.

Frank

Lerura
09-08-2010, 08:26 PM
Maybe this page can help:
border-radius and -moz-border-radius < CSS | The Art of Web: (http://www.the-art-of-web.com/css/border-radius/)

effpeetee
09-09-2010, 09:25 AM
Thanks, it is useful but not in this particular case. The rounded border worked when used with standard div. It doesn't work when used with a Div/table cell and with other than Chrome.

Did you find it as I said above?

Frank.

SB65
09-09-2010, 09:42 AM
Frank, yes, you're right, I get rounded corners with Chrome 6 (and Opera 10) but not with FF3.6.9. I think FF3 does not support the css property border-radius. However, it does support -moz-border-radius - so if you add that to your css you'll get rounded corners in FF too. Works fine in Firebug.

effpeetee
09-09-2010, 01:24 PM
SB65,

I tried it out but I still cannot get it to work with FFox 3.6.9.

Still OK with Chrome.

Frank

Lerura
09-09-2010, 01:57 PM
You have
div#navcol {display:table-cell;

padding: 16px;
width: 30%;
background-color: #ff0;
color:#000;
text-align:left;
border:2px solid black;
border-radius:15px;
moz-border-radius:15px;
}
div#main {display:table-cell;

padding:16px;
width:30%;
background-color: #ff0;
color:#000;
text-align:left;
border:2px solid #000;
border-radius:15px;
moz-border-radius:15px;
margin:0 auto;
}
div#sidecol {display:table-cell;

padding: 16px;
width: 30%;
background-color: #ff0;
color:#000;
text-align:left;
border:2px solid #000;
border-radius:15px;
moz-border-radius:15px;
}

it should be
-moz-border-radius:15px;

effpeetee
09-09-2010, 02:28 PM
Thanks very much. I have very poor sight and missed the hyphen in the previous post.
The only thing that I need to do is to get the join at the bottom of the columns to be the same as the join at the top of the collumns.
It is black at the top and white at the bottom.
I have made the background color of all the divs black in a desperate attempt to correct this but with out success.

Any ideas welcome. I've probably left something out again.

Frank - the old codger.

SB65
09-09-2010, 02:42 PM
Hi Frank

Your column divs are all contained within the #header div - which has a height of 60px. Take the height off #header and that div (with its black background) will extend to the bottom of your columns and give you the effect you want.

effpeetee
09-09-2010, 03:15 PM
Hi Frank

Your column divs are all contained within the #header div - which has a height of 60px. Take the height off #header and that div (with its black background) will extend to the bottom of your columns and give you the effect you want.
Bless you all. It is now as I like it. Using the new HTML5 and CSS3. It degrades well with most other browsers. (http://www.exitfegs.co.uk/Sources.html)

Forward looking Frank.:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum