Help with table cell size?

Hello,

I am fairly new to design and in particular CSS. I have a site with two
tables that I cannot seem to get sized correctly. When you view the link,
you'll notice that there is a tremendous amount of space inbetween the
cells, which is making the page entirely too long and/or wide. Can I style
these tables in a way that makes the text more compact. Any other advice
regarding the tables would be appreciated as well. Thanks in advance...

Here are the links:

Schedule Table: http://try2swim.guptonwebdesign.com/meets/schedule.htm

Practice time table:
http://try2swim.guptonwebdesign.com/practice/times.htm

Thanks....SCOTT


The table ID is #tablestyle (near the bottom)...here is the CSS I used:

/* CSS Document - global_style.css for TRY2swim */

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0 10% 0 10%;
padding: 0;
font-size: 14px;
background-image: url(images/droplets2.gif)
}

#mainTable {
margin: 10px auto;
border: 1px solid #000;
/*/*/line-height: 1.5em; /* */
}

#mainTable td {
padding: 20px;/*Pads each table cell in modern browsers*/
}

#maincontent {
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height: 1.5;
background-color: #ffffff;
border-left: 1px solid #000;
font-size: 100%;
font-size: 100%;
}

#maincontent h2, h3, h4, h5 {
font: Georgia, "Times New Roman", Times, serif;
text-align: center;
text-decoration: none;
}

#leftnavbar {
font:Verdana, Arial, Helvetica, sans-serif;
background-color: #df0000;
width: 20%;
font-size: 12px;
/*/*/font-size: 85%; /* */
}

#leftevents {
border-top-style: dotted;
}

#header {
background-image: url(images/try2swim_banner2.png) ;
background-repeat: no-repeat;
background-position: center;
background-color: #000000;
height: 110px;
}


#footer {
background-image: ;
background-color: #000000;
}

td {
font-family: Verdana, Arial, Helvetica, sans-serif;
vertical-align: top;
}

h1:first-child {margin-top: 0;}/*starts first heading in a TD flush top*/
h2:first-child {margin-top: 0;}/*starts first heading in a TD flush top*/
h1 { font-size: 160%; }
h2 { font-size: 140%; }


/* CSS Document Table Style Sheet*/
#tablestyle {
table-layout:fixed;
vertical-align: top;
text-align: center;
font: Arial, Helvetica, sans-serif;
font-size:80%;
margin: 0px;
padding: 0px;
border-spacing: 0;
}

gscott66 wrote:

[...] When you view the link,
you'll notice that there is a tremendous amount of space inbetween the
cells, which is making the page entirely too long and/or wide. [...]

You have #Maintable td { margin: 20px;}. This applies to *all* table

cells in Maintable. You can override that in #tablestyle with a
#tablestyle td { margin: 0; }. The margin you set in #tablestyle {} has no
effect on table cells, just the space around the table itself.
You also have a number of validation errors in your CSS. You use "font"
where you should use "font-family".

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jim Moe wrote:

[...] You have #Maintable td { margin: 20px;};}. This applies to *all*
table

cells in Maintable [...].

I will make the corrections and let you know...

Thanks for your time...

--
Scott



"Jim Moe" <jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> wrote

gscott66 wrote:

[...] When you view the link, you'll notice that there is a tremendous
amount of space inbetween the cells, which is making the page entirely
too long and/or wide. [...]
You have #Maintable td { margin: 20px;}. This applies to *all* table
cells in Maintable. You can override that in #tablestyle with a
#tablestyle td { margin: 0; }. The margin you set in #tablestyle {} has no
effect on table cells, just the space around the table itself.
You also have a number of validation errors in your CSS. You use "font"
where you should use "font-family".

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jim Moe wrote:

[...] You can override that in #tablestyle with a

#tablestyle td { margin: 0; }. [...]

Thanks Jim for the help,

Such a simple mistake, but a big one.

I'll validate the CSS as well...

I owe ya...

--
Scott




"Jim Moe" <jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> wrote

gscott66 wrote:

[...] When you view the link, you'll notice that there is a tremendous
amount of space inbetween the cells, which is making the page entirely
too long and/or wide. [...]
You have #Maintable td { margin: 20px;}. This applies to *all* table
cells in Maintable. You can override that in #tablestyle with a
#tablestyle td { margin: 0; }. The margin you set in #tablestyle {} has no
effect on table cells, just the space around the table itself.
You also have a number of validation errors in your CSS. You use "font"
where you should use "font-family".

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)