No replies
jambox
Offline
newbie
UK
Last seen: 12 years 4 weeks ago
UK
Joined: 2009-10-23
Posts: 1
Points: 2

Hi All

I'm updating my local choir website with a modified CSS layout

The initial 2 pages "Home" and "Director" proved no problem but on the "Events" page I inserted a table into the "content" div it wrecked the layout!

The "footer" div became detached and positioned itself above the table,also the table cells were too large

In the HTML flow the "wrapper" div contains the "content" div and the "footer div. However in Firefox "Events" page Firebug shows the footer in the "Contents" div

I can't fathom out how to correct this

View this at
http://www.ptcmk2.pershoretownchoir.org.uk/events.html

CSS:
/* css based on jello mold min-demo from positioniseverything.net */
/* Basic page layout including Header and Footer */
body {
margin: 0;
padding: 0 350px 0 350px;
text-align:center;
font-family: "trebuchet ms", "MS Sans Serif", georgia, times, "times new roman";
color: blue;
line-height:1.2em;
background-image: url(bg/burnt.gif);
}
#sizer {
margin: 0 auto;
/* padding:0; */
width: 100%;/* controls liquidity 0 fixed 100% full liquidity */
text-align: left;
max-width: 100px; /* 950 - 700 = 250 */
}
#expander {
margin: 0 -350px 20px -350px;
min-width: 700px;
position: relative;
background: white;
min-height: 1px;
}
#wrapper {
width: 100%; /* helps IE get the child percentages right. */
margin:0 0 50px 0;
min-height: 400px;
}
/* #sidebar {
width:10%;
float:left;
display:inline;
margin-left;:3%;
} */

#content {
width: 80%; /* was62%*/
margin-right: 10%; /* was8%*/
text-align: left; font-size:75%;
float: right;
display: inline; /* IEwin doubled margin bug fix */
}
/* http://positioniseverything.net/easyclearing.html */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#banner {
height:100px;
background-image:url(bg/BannerBg1500x100.gif);
}
#banner img {
display:block; margin: 0 auto 10px;
}
#banner h1 { display:none;
}
/* Style the top nav bar */
/* Set dimension & bg colour of navbar div*/
#navbar {
height: 30px;
width: 100%;
border-bottom: solid #000 1px;
background-color: #584158;
text-align:center;
}
/* Declare margin, padding to over-ride deault settings. whitespacenowrap keeps list all on one line*/
#navbar ul {
margin: 0 ;
padding: 0;
font: normal 77% Verdana, Helvetica, sans-serif;
line-height: 30px;
white-space: nowrap;
}
#navbar li { list-style-type: none;
display: inline;
}
#navbar li a {
text-decoration: none;
display: inline;
}
#navbar li a:link, #navbar li a:visited {
padding: 6px 7px;
margin:0 ;
background-color: transparent;
border-right: solid 1px #634C63;
color:#33CCFF;
}
#navbar li a:hover { color: #000; background-color: #D3FFBF;
}
#home #navbar-home a,
#events #navbar-events a,
#rep #navbar-rep a,
#md #navbar-md a,
#links #navbar-links a,
#archive #navbar-archive a,
#members #navbar-members a,
#joinus #navbar-joinus a,
#listen #navbar-listen a {
cursor:default; background-color:#c39ec3;
color: #fff;
}
#footer {
background-color: #725A72;
border-top: 1px solid #333;
overflow:auto;
/* position:relative; */
}
#footer .left {
width:300px; color:#E17100;
float:left;
margin-left: 0.5em;
text-align:left;
}
#footer .right {
width:300px; color:#725A72;
float:right;
margin-right: 0.5em ;
text-align:right;
}
#footer p {
font-style: oblique;
font-size:xx-small;
font-family: "trebuchet ms", verdana, sans-serif;
margin:0.6em 0;
}
/*=======================================================================*/

#content img.home {
margin:2em 0;
}
#content h2.main {
margin-top:1.5em; color: #594259;
}
.dropcap {
float:left;
font-size:4.2em; line-height:0.7em;
color: #594259; padding-top:2px;
margin-right:2px;
font-family: Georgia, Helvetica, Verdana;
}
#content p {
margin:3em 3em 0 3em;
}
p.airam {
font-size: 1.2em; font-style: oblique;
color:#582158;
font-family: verdana;text-align:center;
}
#content .md_img {
margin:1.0em 1.0em 0.5em 0 ;
float:left;
width:250px; height:308px; border:0;
}

HTML:Events

Pershore Town Choir Events

Events 2009

 
Venue
Notes

Wed 5th August
Heathlands Care Home Pershore

Concert

Closed event

Full Choir

HTML: Table_events
.schedule {
font: small Verdana, sans-serif; color: #333;
background-color: transparent;
padding:0 ;
/* position:relative;*/
width: 55%;
}
.schedule th,
.schedule td {
border-bottom: 1px solid #ADADAD;
border-left: 1px solid #ADADAD;
border-right: 1px solid #ADADAD;t
ext-align: left;
}
.schedule td#col1 {
width: 30%
}
.schedule td#col2 {
width: 30%
}
schedule td#col3 {
width:18%
} /* */
.schedule thead th {
vertical-align: bottom; font: bold 1.4em Georgia, serif;
/*background: #F2F1E2;*/
padding: 0.25em 1.5em 0.25em 0.5em;
border: 1px solid black;
border-width: 1px 0;}

.schedule tbody th,
.schedule tbody td {
vertical-align: top; padding: 0.5em 0.5em 0.25em 0em;
}
.schedule tbody th {
white-space:nowrap; color:#8c003d;
padding-top:0.5em;padding-left:0.5em;
border-right: 1px solid black; width:5em;
font: oblique bold ;
}

.schedule tbody td {width: 5em;}
/*.schedule tbody td p.notescol {padding:0 0 0 0;} */
.schedule tbody h4 {font: 1.2em Georgia, Times, serif; color: #333;
margin:0 0 0.6em 0.5em;}
.schedule tbody p {margin:0; padding:0;color: #666;}

HTML: Events