By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,880 Members | 1,817 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,880 IT Pros & Developers. It's quick & easy.

Gappy table problems

P: n/a
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

Jul 20 '05 #1
Share this Question
Share on Google+
17 Replies


P: n/a
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/
Jul 20 '05 #2

P: n/a
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/
Jul 20 '05 #3

P: n/a
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/
Jul 20 '05 #4

P: n/a
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/
Jul 20 '05 #5

P: n/a
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
Jul 20 '05 #6

P: n/a
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
Jul 20 '05 #7

P: n/a
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.


Jul 20 '05 #8

P: n/a
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.


Jul 20 '05 #9

P: n/a
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.


Jul 20 '05 #10

P: n/a
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.


Jul 20 '05 #11

P: n/a
Alan J. Flavell wrote:
On Fri, 23 Apr 2004, Brian wrote:
From the validator:
"The" validator?


lol Oh dear, I'm off my game tonight. That came from the w3c validator,
and I thought I'd pass it along to the op.
# A level 3 heading is missing!
* A level 4 heading is missing!
o A level 5 heading is missing!


Nothing "invalid" about that, though.


No, indeed.
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...
You're right. And now, I hang my head in shame.
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


I did mean to mention this to the op, but somehow forgot.

The embarassing things is that I wrote that post *before* consuming the
wine. But let's pretend it was after, and I'll blame the French for my
woeful post.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #12

P: n/a
Alan J. Flavell wrote:
On Fri, 23 Apr 2004, Brian wrote:
From the validator:
"The" validator?


lol Oh dear, I'm off my game tonight. That came from the w3c validator,
and I thought I'd pass it along to the op.
# A level 3 heading is missing!
* A level 4 heading is missing!
o A level 5 heading is missing!


Nothing "invalid" about that, though.


No, indeed.
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...
You're right. And now, I hang my head in shame.
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


I did mean to mention this to the op, but somehow forgot.

The embarassing things is that I wrote that post *before* consuming the
wine. But let's pretend it was after, and I'll blame the French for my
woeful post.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #13

P: n/a
How am I supposed to post my replies in a newsgroup?:
http://allmyfaqs.com/faq.pl?How_to_post
Brian wrote:
HR, MENU, PRE { display: block } LI { display:
list-item } TD, TH { display: table-cell } CAPTION
{ display: table-caption }

Remove all this stuff.

FDYocum wrote:
I've stuck with some form of table because I have to justify the
change in design to the rest of the organization...
You know your boundaries better than I. But as I said, your layout is so
simple, that a tableless layout would be a cinch. And I'd think that'd
really wow 'em in the office. Especially if you could demonstrate how
much less the page weighs, and how easy it would then be to make
presentation layouts *site-wide* by changing only the css. Often, this
involves some change to the html as well, but in your case, where the
layout is so simple.... well, I've made my point.
I based the stylesheet on the example on the w3 site.
Hmm. I think you're referring to a stylesheet that is meant to serve as
a default visual (graphical) browser stylesheet.
Being a new to css I was not sure whether one explicitly declare all
the elements or not. In css 'less is more'?


In *everything*, less is more. :-)
In css, there is no need to declare to a graphical browser the defaults
it already uses. So remove that extra stuff, make the file smaller, and
keep it simpler to maintain. Look at it this way. Take away the css
completely. No, really, I mean, take it away. Remove it. I'll wait. :-)
Now look at the page in a browser (or two). What don't you like? Your
css should be the minimum it takes to change that.

But all this is less important than what Alan Flavell pointed out -- the
things I should have mentioned but didn't.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #14

P: n/a
How am I supposed to post my replies in a newsgroup?:
http://allmyfaqs.com/faq.pl?How_to_post
Brian wrote:
HR, MENU, PRE { display: block } LI { display:
list-item } TD, TH { display: table-cell } CAPTION
{ display: table-caption }

Remove all this stuff.

FDYocum wrote:
I've stuck with some form of table because I have to justify the
change in design to the rest of the organization...
You know your boundaries better than I. But as I said, your layout is so
simple, that a tableless layout would be a cinch. And I'd think that'd
really wow 'em in the office. Especially if you could demonstrate how
much less the page weighs, and how easy it would then be to make
presentation layouts *site-wide* by changing only the css. Often, this
involves some change to the html as well, but in your case, where the
layout is so simple.... well, I've made my point.
I based the stylesheet on the example on the w3 site.
Hmm. I think you're referring to a stylesheet that is meant to serve as
a default visual (graphical) browser stylesheet.
Being a new to css I was not sure whether one explicitly declare all
the elements or not. In css 'less is more'?


In *everything*, less is more. :-)
In css, there is no need to declare to a graphical browser the defaults
it already uses. So remove that extra stuff, make the file smaller, and
keep it simpler to maintain. Look at it this way. Take away the css
completely. No, really, I mean, take it away. Remove it. I'll wait. :-)
Now look at the page in a browser (or two). What don't you like? Your
css should be the minimum it takes to change that.

But all this is less important than what Alan Flavell pointed out -- the
things I should have mentioned but didn't.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #15

P: n/a
> 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

FDYocum wrote:
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,
If you set a width, then it will not collapse. For that, you need
max-width. More importantly, when you set a width for text containers,
always always always use a unit that scales. I prefer em units, which
measure width according the font size chosen by the reader. That way, a
div of 40em will be roughly the same no matter what font size the user
has chosen. Respect the reader.
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?


You cannot help that. So set the max-width, and users of superior
browsers will get an excellent layout, while users of inferior browsers
will get a good layout. In both cases, they will get a *flexible*
layout, and that's what counts.

If the office-mates simply refuse to accept this, then at least don't
punish those who use better browsers. Use a technique to hide things as
necessary so you can do the right thing for the minority.

http://w3development.de/css/hide_css_from_browsers/

In this case, something like this:

div {
width: 30em; /* for MSIE-win */
}

html>body div {
width: auto; /* correct the width to be flexible */
max-width: 30em; /* set a max-width for better browsers */
}

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #16

P: n/a
> 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

FDYocum wrote:
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,
If you set a width, then it will not collapse. For that, you need
max-width. More importantly, when you set a width for text containers,
always always always use a unit that scales. I prefer em units, which
measure width according the font size chosen by the reader. That way, a
div of 40em will be roughly the same no matter what font size the user
has chosen. Respect the reader.
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?


You cannot help that. So set the max-width, and users of superior
browsers will get an excellent layout, while users of inferior browsers
will get a good layout. In both cases, they will get a *flexible*
layout, and that's what counts.

If the office-mates simply refuse to accept this, then at least don't
punish those who use better browsers. Use a technique to hide things as
necessary so you can do the right thing for the minority.

http://w3development.de/css/hide_css_from_browsers/

In this case, something like this:

div {
width: 30em; /* for MSIE-win */
}

html>body div {
width: auto; /* correct the width to be flexible */
max-width: 30em; /* set a max-width for better browsers */
}

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #17

P: n/a
Gappy table -- redux

The gaps were finally solved by commenting out widths in the formatting
for the lists in the navigational sidebar.

snip ---
#SideNav UL LI A {font-family: Verdana, Helvetica, Arial, sans-serif;
display : block;
/* width : 185px; */

snip ---
#SideNav UL UL LI A:link {color: #000;
/* width : 130px; */

I also changed much of the sizing to use em units. I want to tweak it a
little to loose some of the space between the list items in the sidebar.

Thanks all for your help.
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


Jul 20 '05 #18

This discussion thread is closed

Replies have been disabled for this discussion.