Need help with tables

[Matt Stanley]

I am trying to build a page that scales to fit the browser window regardless
of size or resolution. The navigation on the top of the page is framed in
dark red/brown using CSS with a background color specified in a custom class
tag.

I only want those cells that are using this custom class to be 1 pixel wide.
In the code I did not specify the <td> width but instead inserted a
single-pixel, transparent GIF and specified the dimensions of that image as
1 pixel wide by 10 pixels tall. For some unknown reason, however, the cells
that act as dividers between the navigation boxes are 4 pixels wide.

Here's the URL to see what I mean:
http://myweb.cableone.net/mstanley/w...lbr/index.html

I know CSS would be a cleaner, more efficient way to position the elements
and control layout, but unfortunately I don't have the luxury of time to
master those concepts before the project is due. For now I'm going to have
to settle with using tables.

How can I get this to work as intended? Please advise.

TIA,

Stanman

[DU]

Matt Stanley wrote:

I am trying to build a page that scales to fit the browser window regardless
of size or resolution. The navigation on the top of the page is framed in
dark red/brown using CSS with a background color specified in a custom class
tag.

I only want those cells that are using this custom class to be 1 pixel wide.
In the code I did not specify the <td> width but instead inserted a
single-pixel, transparent GIF and specified the dimensions of that image as
1 pixel wide by 10 pixels tall. For some unknown reason, however, the cells
that act as dividers between the navigation boxes are 4 pixels wide.

Here's the URL to see what I mean:
http://myweb.cableone.net/mstanley/w...lbr/index.html

I know CSS would be a cleaner, more efficient way to position the elements
and control layout
Right there. You said it.

, but unfortunately I don't have the luxury of time to master those concepts before the project is due.
Even if you don't use CSS, it seems to me that you need to learn how to
use tables for non-tabular anyway. So why not learn what is the correct
way to design a webpage the way you want it.

For now I'm going to have to settle with using tables.

Are you actually saying that given a choice, you would choose an awkward
design done fast than a robust, small size and interoperable design
(with many more benefits) done with more time? If you chose the awkward
design done fast, aren't you promising yourself to redo the design
eventually? I think it's better to spend more time now and do the right
thing than to start all over later again.
How can I get this to work as intended? Please advise.

TIA,

Stanman

Why tables for layout is stupid:
problems defined, solutions offered
http://www.hotdesign.com/seybold/

How do I design my site for any size browser?
http://allmyfaqs.com/faq.pl?AnySizeDesign

CSS Layout Techniques
Look Ma, No Tables.
http://glish.com/css/

(W3C) Tableless layout HOWTO
http://www.w3.org/2002/03/csslayout-howto

Liquid Web Design: Build it right and it will work no matter what the
container.
http://www.digital-web.com/tutorials..._1999-10.shtml

DU

[Andrew Fedoniouk]

> 1 pixel wide by 10 pixels tall. For some unknown reason, however, the
cells

that act as dividers between the navigation boxes are 4 pixels wide.

Because sum of your percentable columns is not 100%.

Andrew Fedoniouk.
http://blocknote.net

[Harlan Messinger]

"Matt Stanley" <ma**@lebois.com> wrote in message
news:10*************@corp.supernews.com...

I am trying to build a page that scales to fit the browser window regardless of size or resolution. The navigation on the top of the page is framed in
dark red/brown using CSS with a background color specified in a custom class tag.

I only want those cells that are using this custom class to be 1 pixel wide. In the code I did not specify the <td> width but instead inserted a
single-pixel, transparent GIF and specified the dimensions of that image as 1 pixel wide by 10 pixels tall. For some unknown reason, however, the cells that act as dividers between the navigation boxes are 4 pixels wide.

Here's the URL to see what I mean:
http://myweb.cableone.net/mstanley/w...lbr/index.html

I know CSS would be a cleaner, more efficient way to position the elements
and control layout, but unfortunately I don't have the luxury of time to
master those concepts before the project is due. For now I'm going to have
to settle with using tables.

How can I get this to work as intended? Please advise.

All the cells in a column are the same width. In the same column as these
graphics, you have cells whose contents are &nbsp; which is wider than one
pixel. Therefore, all the cells in that column are wider than one pixel.
There's nothing you can do about it as long as those non-breaking spaces are
in that column.

What's not clear is why, even without restructuring your page to use CSS for
presentation, you felt that the nav bar should be but a few rows in a huge,
complicated table that encompasses the entire page. There's no reason,
especially given the straightforward top-to-bottom layout of your page, why
the banner, the nav bar, the content, and the footer shouldn't be
constructed as mutually independent blocks.

There's no reason to have seven consecutive rows of blank space. Even given
that you're going to use the outdated practice of using table rows for
vertical spacing, you could have a single row with its height set. You've
got some study ahead of you in efficient page layout techniques.

[Matt Stanley]

Thanks man... I appreciate the fact that you included those links instead of
just telling me I was choosing poor design. I've got some stuff to chew on,
now. :)

"DU" <dr*******@hotWIPETHISmail.com> wrote in message
news:c7**********@news.eusc.inter.net...

Matt Stanley wrote:

I am trying to build a page that scales to fit the browser window regardless of size or resolution. The navigation on the top of the page is framed in dark red/brown using CSS with a background color specified in a custom class tag.

I only want those cells that are using this custom class to be 1 pixel wide. In the code I did not specify the <td> width but instead inserted a
single-pixel, transparent GIF and specified the dimensions of that image as 1 pixel wide by 10 pixels tall. For some unknown reason, however, the cells that act as dividers between the navigation boxes are 4 pixels wide.

Here's the URL to see what I mean:
http://myweb.cableone.net/mstanley/w...lbr/index.html

I know CSS would be a cleaner, more efficient way to position the elements and control layout

Right there. You said it.

, but unfortunately I don't have the luxury of time to

master those concepts before the project is due.

Even if you don't use CSS, it seems to me that you need to learn how to
use tables for non-tabular anyway. So why not learn what is the correct
way to design a webpage the way you want it.

For now I'm going to have

to settle with using tables.

Are you actually saying that given a choice, you would choose an awkward
design done fast than a robust, small size and interoperable design
(with many more benefits) done with more time? If you chose the awkward
design done fast, aren't you promising yourself to redo the design
eventually? I think it's better to spend more time now and do the right
thing than to start all over later again.

How can I get this to work as intended? Please advise.

TIA,

Stanman

Why tables for layout is stupid:
problems defined, solutions offered
http://www.hotdesign.com/seybold/

How do I design my site for any size browser?
http://allmyfaqs.com/faq.pl?AnySizeDesign

CSS Layout Techniques
Look Ma, No Tables.
http://glish.com/css/

(W3C) Tableless layout HOWTO
http://www.w3.org/2002/03/csslayout-howto

Liquid Web Design: Build it right and it will work no matter what the
container.
http://www.digital-web.com/tutorials..._1999-10.shtml

DU