Hi I am trying to get my pages expand to fit content automatically using CSS and am having trouble doing so. The main issue can ... is a link that overlaps the footer. Below is my CSS...
@charset \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"UTF-8\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\";
/* CSS Document */
html, body, h1, h2, h3, p, ul { margin: 0; padding: 0; height: auto; }
body { font:76% Arial, Sans-Serif; line-height: 1.8em; background: #00326A; color: #FFF; height: auto; }
.medium { font-size: 16px; line-height: 22px; }
.large { font-size: 20px; line-height: 26px; }
*{ margin: 0; padding: 0; }*
body, body.m { font:76% Arial, Sans-Serif; line-height: 1.8em; }
body.l { font:100% Arial, Sans-Serif; line-height: 1.8em; }
body.xl { font:120% Arial, Sans-Serif; line-height: 1.8em; }
body.xxl { font:140% Arial, Sans-Serif; line-height: 1.8em; }
a {color: #003366; text-decoration: none;}
a:visited {color: #003366; text-decoration: none;}
a:active {color: #003366; text-decoration: bold;}
a:hover {color: #003366; text-decoration: underline;}
h2 { margin: 0 0 10px; padding: 10px 0 3px; }
h3 { padding-left: 10px; color: #003366; background: #FFFFFF url(images/bg.jpg) repeat-x; font-size: 1em; height: 24px; line-height: 24px; }
ul { padding: 0; margin: 0 0 10px;}
li { list-style-type: none;}
p { margin: 5px 0 10px 0; }
img { border: none; }
#header {
background: url(logo.png) no-repeat;
height: 215px;
}
/* -----------------EVENTS--BEGINS-------------------*/
#event
{
background:#FFFFFF;
color:#333333;
}
.event-image img
{
padding:3px;
border:1px solid #333333;
}
.date
{
color:#333333;
font-weight:bold;
}
.event-content
{
}
#event-register
{
float:right;
}
#event-register a:link, a:active, a:visited
{
color:#194ACF;
}
/* -----------------EVENTS- ENDS--------------------*/
/* -----------------TEXT RESIZER--------------------*/
.resizer { border: 1px solid #cecece; float: right; list-style: none; margin: 0 0 10px 10px; padding: 3px; }
.resizer li { float: left; line-height: 26px; margin-right: 5px; }
.resizer .small { font-size: 12px; line-height: 26px; }
.resizer .large { margin-right: 0; }
.resizer .small a, .medium .resizer .medium a, .large .resizer .large a { color: #000; text-decoration: none; }
.medium .resizer .small a, .large .resizer .small a { color: #1D4C9F; text-decoration: underline; }
/* -----------------TEXT RESIZER--------------------*/
/* -----------------FONT SIZE SWITCH--------------------*/
#accessibility
{
position:relative;
top:-70px;
float:right;
}
ul.fontsize, ul.switcher {
margin-right:20px;
display:block;
}
ul.fontsize li, ul.switcher li {
float:left;
margin-right:10px;
background:#701927;
color:#FFFFFF;
padding: 2px;
text-align:center;
}
ul.fontsize li a, ul.switcher li a{
color: #FFFFFF;
}
/* -----------------FONT SIZE SWITCH--------------------*/
/* -----------------------ALERT-----------------------*/
.alert {
font-size:12px;
font-weight:bold;
line-height:12px;
color:#FF0000;
}
/* -----------------------------------*/
hr {
border: 0;
width: 100%;
}
hr.hr2 {
color: #333333;
background-color: #333333;
height: 1px;
}
#header h1 {
font-size: 30px;
font-weight: 100;
letter-spacing: -1px;
padding: 22px 0 5px 10px;
}
#header h1 a {
color: #fff;
text-decoration: none;
}
#header h1 a:hover {
color: #000;
text-decoration: none;
}
#header h2 {
color: #eee;
font-size: 19px;
font-weight: 100;
padding: 15px 0 0 11px;
letter-spacing: -1px;
line-height: 12px;
}
#right { margin-bottom: 10px; float: right; width: 745px; padding: 0 10px 10px 5px; margin-top: 10px;text-align:justify;}
#right h2 {
color: #6587E0;
font-size:22px;
font-weight:100;
letter-spacing:2px;
line-height: 20px;
}
#wrap { padding: 10px 10px 3px 10px; width: 1037; margin:0px auto; position:relative; background: #fff;}
#left { float: left; width: 180px; background: #003366; margin-bottom: 10px; margin-top: 10px;}
#left ul {padding: 5px 5px 10px 10px; margin: 0;}
#rightnav { float: right; width: 180px; background: #003366; margin-bottom: 10px; margin-top: 10px;}
#rightnav ul {padding: 5px 10px 10px 10px; margin: 0;}
/* -----------------CONTENT---------------------*/
.content td {
font-size:12px;
font-weight:normal;
line-height:12px;
}
.postcomment
{
padding:10px 0 10px 0;
color: #6C1926;
font-weight:bold;
cursor:pointer;
}
.black-heading
{
font-size:18px;
padding:10px 0 20px 15px;
color: #000000;
font-weight:bold;
}
.red-heading
{
font-size:17px;
padding:10px 0 20px 15px;
color: #FF0000;
font-weight:bold;
}
.blue-heading
{
font-size:14px;
padding:10px 0 10px 0;
color: #003366;
font-weight:bold;
}
#commentbox
{
padding:10px 0 10px 0;
}
#blog-posts
{
padding:5px 5px 5px 0;
}
#blog
{
margin-bottom: 10px; float: left; width: 550px; padding: 0 10px 10px 5px; margin-top: 10px;text-align:justify;
}
#blog a {
color: #FFFFFF;
}
.cat-title
{
border-bottom:1px dotted #003366;
padding:10px 0 5px 0;
}
#blog h2
{
color: #003366; font-size:18px;font-weight:bold;
}
.blog-title
{
float:left;
color: #333333; font-size:15px;font-weight:bold;
padding-right:20px;
}
#blogcomments
{
margin-top:10px;
padding-left:20px;
}
#blogposts
{
margin-bottom: 10px; float: left; width: 510px; padding: 0 10px 10px 5px; margin-top: 10px;text-align:justify;
}
#blogcomments h4
{
color: #333333; font-size:13px;font-weight:bold;
}
/* --------------------------------------------------*/
#footer { font-size: 11px; text-align: center; border-top: 1px solid #ccc; padding: 10px 5px; }
/* ---------------INPUT FIELDS AND BUTTON-------------*/
.input_field
{
BACKGROUND-COLOR:#FFFFFF;
COLOR:#AD9C52;
font-family: Tahoma, Verdana, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
border-top:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
border-right:1px solid #bbbbbb;
border-bottom:1px solid #bbbbbb;
padding:3px;
}
.input_field:hover{
background-color:#FFFFEF;
padding:3px;
}
.input_field:focus{
background-color:#FFFFEF;
padding:3px;
}
.submit_button {
font:bold 95% Tahoma, Verdana, Helvetica, sans-serif;
font-size:12px;
cursor:pointer;
FONT-WEIGHT: Bold;
COLOR: #FFFFFF;
padding:3px;
padding-left:8px;
padding-right:8px;
background-color:#6587E0;
border:0px;
}
/* ------------------------------------*/
/* ----------------- PAGINATION LINKS -------------------*/
.paginate {
background:#FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
-moz-border-radius: 12px;
border-radius:12px;
-webkit-border-radius: 12px;
behavior: url(border-radius.htc);
}
a.paginate {
background:#FFF;
border: 1px solid #003366;
padding: 2px 6px 2px 6px;
text-decoration: none;
color: #003366;
-moz-border-radius: 12px;
border-radius:12px;
-webkit-border-radius: 12px;
behavior: url(border-radius.htc);
}
.paginate a:hover {
background-color: #003366;
color: #FFF;
text-decoration: underline;
-moz-border-radius: 12px;
border-radius:12px;
-webkit-border-radius: 12px;
behavior: url(border-radius.htc);
}
select.paginate {
background:#FFF;
border: 1px solid #003366;
padding: 2px 6px 2px 6px;
text-decoration: none;
color: #003366;
-moz-border-radius: 12px;
border-radius:12px;
-webkit-border-radius: 12px;
behavior: url(border-radius.htc);
}
a.pcurrent {
border: 1px solid #003366;
font: bold 12px Arial,Helvetica,sans-serif;
padding: 2px 6px 2px 6px;
cursor: default;
background:#003366;
color: #FFF;
text-decoration: none;
-moz-border-radius: 12px;
border-radius:12px;
-webkit-border-radius: 12px;
behavior: url(border-radius.htc);
}
span.inactive {
background:#FFF;
border: 1px solid #999;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 2px 6px 2px 6px;
color: #999;
cursor: default;
-moz-border-radius: 12px;
border-radius:12px;
-webkit-border-radius: 12px;
behavior: url(border-radius.htc);
} [edited by: alt131 at 12:04 am (utc) on May 17, 2011]
[edit reason] Thread Tidy [/edit]
