473,287 Members | 1,827 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

Gappy table problems

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
17 2631
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
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
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
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
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
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
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
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
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
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
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
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
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
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
> 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
> 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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

61
by: Toby Austin | last post by:
I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will...
7
by: Richard Lawrence | last post by:
Hi, Consider the following: #Content { margin:0px 210px 50px 200px; padding:10px; } If I use it with the following HTML:
10
by: john T | last post by:
Is there anyway to vertically center a html table using css in such a way it does not alter the html table. When I tryied it just screws up.
17
by: Jon Ole Hedne | last post by:
I have worked on this problem some hours now (read many-many...), and I can't solve it: In vba-code I create a table with Connection.Execute, and add some data to it. This table is saved in the...
3
by: Adriaan van Heerden | last post by:
hi, once again apologies if I'm covering old ground. I've looked through lots of previous posts and tried some code but nothing works as yet. However, the problem must be a very common one so...
4
by: deko | last post by:
I've heard it's best not to have any formatting specified for Table fields (except perhaps Currency), and instead set the formatting in the Form or Report. But what about Yes/No fields? When I...
18
by: TORQUE | last post by:
Hi, Im wondering if anyone can help me with a problem. I have a form with more than 50 unbound fields. Some of the fields will be blank from time to time. This seems to be where im having...
7
by: Serge Rielau | last post by:
Hi all, Following Ian's passionate postings on problems with ALTOBJ and the alter table wizard in the control center I'll try to explain how to use ALTOBJ with this thread. I'm not going to get...
3
by: Rahul B | last post by:
Hi, I have a user UCLDEV1 which is a part of staff and a group(db2schemagrp1) to which i have not given any permissions. The authorizations of that user are shown as db2 =get authorizations...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.