Here's my site - you can see the text goes well beyond the height for the #wrapper:
http://publisher.tidbitsweekly.net/index.php
I've set my min-height to 600px and set the height to auto, etc. but nothing I try has any effect of IE or on FireFox. Here's my css, reverted back to its original state since my changes didn't work:
body {
margin: 0px;
padding: 0px;
text-align: center;
background-color:#CCCCCC;
}
#wrapper {
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
padding: 0px;
width: 700px;
height:600px;
position:relative;
}
.header {
margin: 0px;
padding: 0px;
}
.mainBody {
margin:0px;
padding:0px;
width:475px;
border: 0px solid #000000;
position:absolute;
left:220px;
top:200px;
}
.mainTitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
font-style: italic;
font-weight: bold;
height:50px;
color: #0000FF;
}
.ofYourArea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #ffffff;
margin: 0px;
border: 0px;
padding: 0;
text-align: left;
position:absolute;
left:160px;
top:115px;
}
.forAdvertisingCall {
margin: 0px;
border: 0px;
padding: 0;
text-align: left;
position:absolute;
left:500px;
top:130px;
}
.advertisingPhoneNumber {
margin: 0px;
border: 0px;
width: 182px;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: italic;
font-weight: bold;
position:absolute;
left:500px;
top: 145px;
}
.nav {
width:190px;
padding: 3px;
height:200px;
position:absolute;
}
.links {
background-color: #fffbfc;
width: 174px;
border: 1px ridge #CCCCCC;
height: 20px;
font-family: Helvetica, sans-serif;
font-size: 13px;
text-align: center;
padding-top: 4px;
font-weight: bold;
margin-bottom: 3px;
}
.links:hover {
background-color: #FFFFFF;
width: 174px;
border: 1px ridge #CCCCCC;
height: 20px;
font-family: Helvetica, sans-serif;
font-size: 13px;
text-align: center;
padding-top: 4px;
font-weight: bold;
margin-bottom: 3px;
background-image: url(images/mouseover_button.jpg);
background-repeat: repeat-y;
}
.footer {
background-color: #64768f;
height: 50px;
width: 700px;
bottom: 0;
position:absolute;
text-align: center;
}
a.footerLinks {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
text-decoration: underline;
padding-top:30px;
}
Any help with getting my page to have a minimum of 600px but also stretch when necessary would be really appreciated!
Thanks!
