CSS Tables - Mystery Space

[Andrea]

My first attempt - and an issue I cannot figure out:

 

http://www.aandbwebdesign.com/builder/

 

Why is there this huge space above the content and navigation??? I have my standard * {margin: 0; padding: 0;} in the css, and other than that, have not even really begun to add margins and padding. So what causes this space? (And it's NOT showing in IE lt 8...

 

And of course ignore the colors and stuff - they are just to show me where what is.

[Wickham]

This worked in Firefox for the left column:-

#navigation { background: green; vertical-align:top;

display: table-cell;

width: 200px;

border: 1px solid red;

}

#navigation ul { background: olive; }

 

I added background colors and you can see that the #navigation does extend the full height but the ul tag inside was centering to the middle vertically.

 

I can't get the layout to work at all in IE7, even after deleting the conditional comment. (Note: the comment should be

Edited November 5, 2009 by Wickham

[Andrea]

Thanks - IE7 (and 6) would not work WITHOUT the conditional comments, they don't recognize the display table. The conditional css just floats the divisions for everything less than IE 8 instead of displaying them as table cells (since they can't).

 

Didn't realize about the vertical align - back to the book.

[virtual]

If you delete the display: table-cell on both navigation and content divs your space disappears, but on Firefox Mac the content then displays underneath the navigation, I didn't test on a PC.

Edited November 5, 2009 by virtual

[Andrea]

I recently read "Everything you know about CSS is wrong!" which is all about divs DISPLAYING as table cells, so I thought I'd use this project (finally have one after many many months (ok - more like 3 years or so..)) to try it out. It does require a conditional stylesheet for IE7 and older, but I think I can live with that.

[virtual]

Can you post a link to that article please. There's an awful lot I don't know about CSS, I'd like to find out how little I think I know is already wrong...!!!

 

P.S. Maybe I need another lifetime...?

Edited November 6, 2009 by virtual

[Andrea]

It's not an article, it's a sitepoint book.

[lm]

Thelma if you want some brand new stuff, you can try CSS grids. No worries about positioning, just fill the "cells" of grid with content.

Edited November 6, 2009 by lm

[Andrea]

lm - I'll look into grids next time. This time, I want to play around with this.

 

P.S. Maybe I need another lifetime...?

It'll have to be in a future one for sure - none of the past ones included any computer usage.....

[Susie]

Was what you read written by Rachel Andrew? If so, was this it?

 

http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

 

I have no idea, but I wonder if the fact that you don't have display:table-row; anywhere is causing the issue. ??

[Susie]

Okay, I just played with it a little and was able to remove the space.

 

#row {

display:table-row;

}

 

#navigation {

display: table-cell;

vertical-align:top;

width: 200px;

border: 1px solid red;

}

 

#content {

display: table-cell;

vertical-align:top;

width: 570px;

background: #639d3b;

padding: 0 25px;

border: 1px solid yellow;

}

 

And then I added a new containing div called #row inside the #main div. It works for me in Firefox 3.5.4.

 

I got the idea from here:

 

http://www.sitepoint.com/blogs/2008/02/28/table-based-layout-is-the-next-big-thing/

 

A longstanding bug in Firefox makes it necessary to add a second containing

inside the "body"

and set it to display: table-row. Otherwise, the layout will often break when it initially loads.

[Andrea]

It is by Rachel Andrew and Kevin Yanks - but it's the book.

 

And according to it, if no table-row display is used, it's assumed, so not needed. It probably does just need the vertical-align top, as Wickham pointed out. Just haven't had time to re-read that chapter in its entirety.

[Susie]

Did you see my 2nd post? I added the table-row and it worked. I saw where it's supposed to be assumed, but maybe not in this instance? I don't know....

[Andrea]

No, I hadn't sen your second post - thanks. I'll try that when I get home.

 

It was fun exploring at first, but the way this is going, it's taking too much extra to make something work that's supposed to be simpler - not to mention the conditional stylesheet I'll have to build for IE <8. I might just go back to the old way and float something.