Gappy table problems

[FDYocum]

I am having problems with a Web site that I've designed and I am
grinding my teeth in frustration.

The pages are built around a table with four cells. The first cell is
spanned two rows and is for the sidebar navigation, The second cell is
the main content and the third (in the second row) for the page footer.

I cannot figure out why on some pages a gap opens up on the side of
image at the top of the navigational side bar. It appears to happen on
pages that have a small amount of content, but displays more or less
consistently correct on pages which are long. It does not always display
with the gap only sometimes but in almost every browser that I have found.

Here is the web address for the site

http://www.morewithless.org/index.html

Here is the main css file

http://www.morewithless.org/css/aprimary.css

[Brian]

FDYocum wrote:

The pages are built around a table with four cells.
This layout looks pretty simple, something that could probably be done
with css instead of table layout.

http://www.allmyfaqs.com/faq.pl?Tableless_layouts

Go all the way and do HTML 4 strict with css for presentation.
I cannot figure out why on some pages a gap opens up on the side of
image at the top of the navigational side bar.
I'd imagine it's border-collapse. Default value is "separate." You want
them to collapse. Thus, for you main layout table -- if you're going to
keep it -- you want this:

border-collapse: collapse;

http://www.w3.org/TR/CSS21/tables.ht...order-collapse
Here is the web address for the site
http://www.morewithless.org/index.html
From the validator:

# A level 3 heading is missing!
* A level 4 heading is missing!
o A level 5 heading is missing!

You ought to fix that.
Here is the main css file
http://www.morewithless.org/css/aprimary.css

You've got lots of stuff at the beginning that is entirely unneccessary.

HR, MENU, PRE { display: block }
LI { display: list-item }
HEAD { display: none }
TABLE { display: table }
TR { display: table-row }
COL { display: table-column }
COLGROUP { display: table-column-group }
TD, TH { display: table-cell }
CAPTION { display: table-caption }

You've just explicitly asked for the default. Remove all this stuff.
(I've snipped most of it. It's all the "display" stuff.) The only thing
that you've changed is Img display: block. That is not the default, so
keep that.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Brian]

FDYocum wrote:

The pages are built around a table with four cells.
This layout looks pretty simple, something that could probably be done
with css instead of table layout.

http://www.allmyfaqs.com/faq.pl?Tableless_layouts

Go all the way and do HTML 4 strict with css for presentation.
I cannot figure out why on some pages a gap opens up on the side of
image at the top of the navigational side bar.
I'd imagine it's border-collapse. Default value is "separate." You want
them to collapse. Thus, for you main layout table -- if you're going to
keep it -- you want this:

border-collapse: collapse;

http://www.w3.org/TR/CSS21/tables.ht...order-collapse
Here is the web address for the site
http://www.morewithless.org/index.html
From the validator:

# A level 3 heading is missing!
* A level 4 heading is missing!
o A level 5 heading is missing!

You ought to fix that.
Here is the main css file
http://www.morewithless.org/css/aprimary.css

You've got lots of stuff at the beginning that is entirely unneccessary.

HR, MENU, PRE { display: block }
LI { display: list-item }
HEAD { display: none }
TABLE { display: table }
TR { display: table-row }
COL { display: table-column }
COLGROUP { display: table-column-group }
TD, TH { display: table-cell }
CAPTION { display: table-caption }

You've just explicitly asked for the default. Remove all this stuff.
(I've snipped most of it. It's all the "display" stuff.) The only thing
that you've changed is Img display: block. That is not the default, so
keep that.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Brian]

FDYocum wrote:

I cannot figure out why on some pages a gap opens up on the side of
image at the top of the navigational side bar. It appears to happen on

BTW, I like the background image, but may I make a suggestion? Have the
faded version continue to show through on a:active and a:hover/a:focus.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Brian]

FDYocum wrote:

I cannot figure out why on some pages a gap opens up on the side of
image at the top of the navigational side bar. It appears to happen on

BTW, I like the background image, but may I make a suggestion? Have the
faded version continue to show through on a:active and a:hover/a:focus.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Alan J. Flavell]

On Fri, 23 Apr 2004, Brian wrote:

This layout looks pretty simple, something that could probably be
done with css instead of table layout.
I reckon so too...
From the validator:
"The" validator?
# A level 3 heading is missing!
* A level 4 heading is missing!
o A level 5 heading is missing!
Nothing "invalid" about that, though. Might or might not be poor
practice, depending on content, but it's no business of a validator
(per se) to report such issues. It would be a nice thing to have in a
checker/linter though. Sorry if this seems pedantic, but there's a
principle at stake...

My first complaint about the site would be that it demands a wider
window than I gave it, instead of calmly adapting itself to what it
finds.

Browsers on the whole do an excellent job of fitting content into the
available display area, with perhaps a little help in terms of
percentage proportions. It seems so hard to persuade authors to let
go of something which they basically can't control, and concentrate on
exploiting the strong points of the web concept.

That body font size of 13px turns out not too bad on the laptop, but
would be a disaster on the office machine. 1.0em would be better for
both of them. And this sidebar height being specified as 769px seems
like it ought to be a big flashing warning sign, IMHO: this isn't
cartography.
You've got lots of stuff at the beginning that is entirely unneccessary.

That too, yes. But as you say, most of it does no harm. I'm more
concerned about the bits that do.

all the best

[Alan J. Flavell]

On Fri, 23 Apr 2004, Brian wrote:

This layout looks pretty simple, something that could probably be
done with css instead of table layout.
I reckon so too...
From the validator:
"The" validator?
# A level 3 heading is missing!
* A level 4 heading is missing!
o A level 5 heading is missing!
Nothing "invalid" about that, though. Might or might not be poor
practice, depending on content, but it's no business of a validator
(per se) to report such issues. It would be a nice thing to have in a
checker/linter though. Sorry if this seems pedantic, but there's a
principle at stake...

My first complaint about the site would be that it demands a wider
window than I gave it, instead of calmly adapting itself to what it
finds.

Browsers on the whole do an excellent job of fitting content into the
available display area, with perhaps a little help in terms of
percentage proportions. It seems so hard to persuade authors to let
go of something which they basically can't control, and concentrate on
exploiting the strong points of the web concept.

That body font size of 13px turns out not too bad on the laptop, but
would be a disaster on the office machine. 1.0em would be better for
both of them. And this sidebar height being specified as 769px seems
like it ought to be a big flashing warning sign, IMHO: this isn't
cartography.
You've got lots of stuff at the beginning that is entirely unneccessary.

That too, yes. But as you say, most of it does no harm. I'm more
concerned about the bits that do.

all the best

[FDYocum]

Thanks Brian, I've made the mistake of asking the question as I start my
weekend and don't easily have access to the site until Monday. I've
stuck with some form of table because I have to justify the change in
design to the rest of the organization...

I based the stylesheet on the example on the w3 site.
Being a new to css I was not sure whether one explicitly declare all the
elements or not. In css 'less is more'?

Brian wrote:

HR, MENU, PRE { display: block }
LI { display: list-item }
HEAD { display: none }
TABLE { display: table }
TR { display: table-row }
COL { display: table-column }
COLGROUP { display: table-column-group }
TD, TH { display: table-cell }
CAPTION { display: table-caption }

You've just explicitly asked for the default. Remove all this stuff.
(I've snipped most of it. It's all the "display" stuff.) The only thing
that you've changed is Img display: block. That is not the default, so
keep that.

[FDYocum]

Thanks Brian, I've made the mistake of asking the question as I start my
weekend and don't easily have access to the site until Monday. I've
stuck with some form of table because I have to justify the change in
design to the rest of the organization...

I based the stylesheet on the example on the w3 site.
Being a new to css I was not sure whether one explicitly declare all the
elements or not. In css 'less is more'?

Brian wrote:

HR, MENU, PRE { display: block }
LI { display: list-item }
HEAD { display: none }
TABLE { display: table }
TR { display: table-row }
COL { display: table-column }
COLGROUP { display: table-column-group }
TD, TH { display: table-cell }
CAPTION { display: table-caption }

You've just explicitly asked for the default. Remove all this stuff.
(I've snipped most of it. It's all the "display" stuff.) The only thing
that you've changed is Img display: block. That is not the default, so
keep that.

[FDYocum]

Thanks for checking the pages out Alan.

What I would like to have is semi-control, so that the text would
collapse if the window was smaller -- to fit into smaller screen sizes,
but not exceed a certain width to keep the text flow comfortably
readable. Using max and min tags would be most helpful, but these are
not implemented by the bulk of the browsers out there at the moment?

Alan J. Flavell wrote:

My first complaint about the site would be that it demands a wider
window than I gave it, instead of calmly adapting itself to what it
finds.