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.cs s 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_banner 2.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;
}