Desperately Need Help with CSS Footer

I desperately need help with positioning the footer to the bottom of a site that I am developing, of course it works in Safari and IE, but does not in Firefox or Opera, I need help very very badly, thanks in advance!
CSS_____
 
 
 
* { margin: 0; padding: 0px; }
 
 
body,html {
margin: 0;
padding: 0px;
background: #fde428;
height: 100%;
}
 
#container, #main {
margin: 0 auto;
width: 960px;
background-color: #FFF;
min-height: 100%;
height: auto !important;
margin: 0 auto;
}
 
 
p {margin: 0; padding: 0px; }
 
 
/* LABELS AND FORMS */
 
label {font-weight: bold }
 
input#name {
width: 20em;
border: 1px solid #755a3c;
font: 10pt Arial, 'Trebuchet MS', Sans-Serif;
color: #755a3c;
}
 
textarea {
width: 20em;
height: 12em;
border: 1px solid #755a3c;
font: 10pt Arial, 'Trebuchet MS', Sans-Serif;
color: #755a3c;
}
 
 
input.button {
width: 6em;
font: bold 12pt Arial, Sans-serif;
color: #fff;      
background: #b50000;
padding: 2px 3px;
border: 1px solid #2E2E2E;
}
 
input#other {width:18em }
 
 
/* LABELS AND FORMS */
 
 
/* BACKGROUND */
 
.background {
background: #425c64 url('/images/bg.gif') repeat-x;
}
 
/* BACKGROUND */
 
 
/* HEADER */
 
#header {
background: url(/images/header.jpg) no-repeat;
height: 125px;
}
 
/* LOGO */
.logolink {
background-image: url('/images/logo.gif');
background-repeat: no-repeat;
height: 236px;
width: 115px;
}
 
.logolink a { float: left;  }
 
#swap {background-image: url(/images/logo.gif);  width: 236px;  height: 115px;  }
 
.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */
/* LOGO */
 
 
/* HEADER */
 
/* NAV */
 
#nav {
background: url(/images/nav_bg.gif) repeat-x;
height: 38px;
}
 
.images {
position: left;
}
 
.images a { float: left; }
 
#swap01 {background-image: url(/images/nav_products_on.gif);  width: 74px;  height: 38px; }
#swap02 { background-image: url(/images/nav_service_on.gif); width: 74px;  height: 38px; }
#swap03 { background-image: url(/images/nav_safety_on.gif); width: 56px;  height: 38px; }
#swap04 {background-image: url(/images/nav_contact_on.gif);  width: 92px;  height: 38px; }
#swap05 { background-image: url(/images/nav_catalog_on.gif); width: 122px;  height: 38px; }
#swap06 { background-image: url(/images/nav_landscape_on.gif); width: 160px;  height: 38px; }
 
.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */
 
 
#nav .end {
float: right;
background: url(/images/nav_kid.jpg) no-repeat;
width: 365px;
height: 38px;
}
 
/* NAV */
 
/* MAINGRAPHIC */
 
#maingraphic {
background: url(/images/maingraphic.jpg) no-repeat;
height: 186px;
}
 
#maingraphic p {
padding: 76px 308px 0px 40px;
font: bold italic 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #FFF;
}
 
/* MAINGRAPHIC */
 
 
/* MAIN */
 
#main {
font: 10pt 'Trebuchet MS', Arial, Sans-serif;
height: auto;
padding-bottom: 9em;
}
 
#main .leftside {
float: left;
margin: 15px;
width: 242px;
}
 
#main .leftside h1 {
background: url(/images/left_contact.gif) no-repeat;
height: 37px;
}
 
#main .leftside h2 {
background: url(/images/left_vendors.gif) no-repeat;
height: 37px;
}
 
#main .leftside p {
margin: 4px 0px 10px 0px;
padding: 10px;
background-color: #f1ebdf;
color: #a59662;
}
 
#main .vendors {
background: #f1ebdf url(/images/vendors.gif) no-repeat;
height: 93px;
}
 
 
#main .content {
float: right;
padding: 20px;
color: #86878b;
line-height: 19px;
width: 630px;
}
 
#main .content h1 {
font-size: 18pt;
font-weight: bold;
color: #4fc2f0;
letter-spacing: -1px;
}
 
/* MAIN */
 
 
 
#content
{
padding-bottom: 9em;
}
 
#footer
{
position: relative;
margin-top: -100px;
height: 80px;
width:940px;
margin-left: auto;
margin-right:auto;
background-color: #8cc63e;
padding: 10px;
color: #FFF;
}
/* FOOTER */
 
#footer .asc {
font: 8pt 'Trebuchet MS', Arial, Sans-serif;
color: #FFF;
text-decoration: underline;
}
 
#footer .asc a {
font: 8pt 'Trebuchet MS', Arial, Sans-serif;
color: #dcffac;
text-decoration: underline;
}
 
#footer ul {
font: 8pt 'Trebuchet MS', Arial, Sans-serif;
display: inline;
}
 
#footer li {
display: inline;
padding: 10px;
}
 
#footer li a {
color: #dcffac;
}
 
 
 
 
and here is the HTML___________
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<title>Alternative Designs LLC</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<style type="text/css">
 
</style>
</head>
 
<body>
   
<div id="container">
 
<div id="header">
<b class="logolink">
<a href="#" id="swap" title="Alternative Designs LLC">
</a>
</b>
</div>
 
<div id="nav">
 
<div class="images">
<a href="#" id="swap01" class="rollover" title="Home"><img src="/images/nav_products_off.gif" border="0" alt="Home" width="74" height="38"></img></a>
<a href="#" id="swap02" class="rollover" title="Witt Liners News"><img src="/images/nav_service_off.gif" border="0" alt="Witt Liners News" width="74" height="38"></img></a>
<a href="#" id="swap03" class="rollover" title="Contact"><img src="/images/nav_safety_off.gif" border="0" alt="Contact" width="56" height="38"></a>
<a href="#" id="swap04" class="rollover" title="Home"><img src="/images/nav_contact_off.gif" border="0" alt="Home" width="104" height="92"></img></a>
<a href="#" id="swap05" class="rollover" title="Witt Liners News"><img src="/images/nav_catalog_off.gif" border="0" alt="Witt Liners News" width="122" height="38"></img></a>
<a href="#" id="swap06" class="rollover" title="Witt Liners News"><img src="/images/nav_landscape_off.gif" border="0" alt="Witt Liners News" width="160" height="38"></img></a>
</div>
 
 
<div class="end"></div>
 
</div>
 
<div id="maingraphic">
<p>
"Spontaneous play is the delicate dance of childhood that strengthens the mind and body, and
nourishes the soul."
 
"Play is our brain's favorite way of learning."
    <br />
    Diane Ackerman Contemporary American Author
    <br />
    <br />
    "The true object of all human life is play." G.K. Chesterton British Author 1874-1936</p>
</div>
 
<div id="main">
<div class="leftside">
<h1></h1>
<p>Alternative Designs
<br />
555 Unknown St.
<br />
Tulsa, OK 74111</p>
 
<h2></h2>
<p class="vendors">
</p>
 
</div>
 
<div class="content">
<h1>Welcome To Alternative Designs!</h1>
<br />
 <p>Nam lobortis. Curabitur facilisis tortor et justo. Phasellus et lorem. Cras urna
     ante, aliquam a, ultricies scelerisque, porta a, tellus. Cras mauris sapien,
     placerat non, molestie quis, imperdiet vestibulum, leo. Suspendisse vitae
     lectus. Aliquam nibh arcu, sagittis nec, ultrices eget, suscipit scelerisque,
     lorem. Nullam in dolor vestibulum sem vestibulum sagittis. Duis ut purus
     imperdiet nulla lobortis condimentum. In non dui eget elit iaculis accumsan. In
     hac habitasse platea dic<br />
 </p>
 
</div>
</div>  
 
</div>
 
 
 
<div id="footer">
 
<div class="asc">
<a target="_blank" href="http://aschosting.com">
Hosted by: Ambitious Web Hosting Company - Business Services</a><br>
<a target="_blank" href="http://ambitiousdesign.com">Site Created
by: Ambitious Design - A custom website design company</a><br>
</div>
 
<ul>
<li> <br />
 <a href="#">XHTML</a></li>
<li><a href="#">CSS</a></li>
 
</ul>
</div>
 
 
 
</body>
 
</html>

Open in new window

ambitiousdesignAsked:
Who is Participating?
 
Doc_McAlisterConnect With a Mentor Commented:


The frame goes around *every* element.  Including the footer.

<body>
<div id="frame">

everything else, main, content, footer, etc.

</div>
</body>

With the frame around the footer you can set its width to 100% or to auto and it won't be to wide because its width is constrained by the frame.  Then you can set the "frames" background color to white.  child elements with their own color will go on top but that will keep your page background yellow from bleeding through.
0
 
Doc_McAlisterCommented:
Hrrrm .. can you attach a screenshot of what it is supposed to look like?  

Your overall css design there is fragile, imo, because you aren't using a frame div ... a div that exists only to contain the other divs.  The idea is that you set the page width and margins on the frame and let the contents just auto out to the frame's boundaries.

With a frame div you could float the footer to the left and because it is in the frame it won't run all the way to the left, but because its the last thing you write it will be below everything else.

0
 
Doc_McAlisterCommented:
To add a frame just define it:

#frame
{
    width: 940;
    margin-left: auto;
    margin-right: auto;
}

and add

<div id="frame">

</div>

around your page body.

Then float your footer to the left and adjust the top margin as needed.  Clean up your code by getting rid of width and margin left/right commands that are no longer needed in the framed body elements.

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
ambitiousdesignAuthor Commented:
I tried that but I thought I already had pretty much the purpose of a frame in my #container, #main Id's? I tried it nonetheless and it worked but it didn't expand to 100% with little text, I have achieved the 100% stretch across all browsers except in Opera and Safari the white of the main table doesn't stretch all the way down

here is the site you can check it out http://alternativedesignsllc.aschosting.com/reference.aspx

Here is the new CSS


/********************************************
   AUTHOR:          http://www.ambitiouswebdesign.com
   WEBSITE:               http://www.alternativedesignsllc.com/
   TEMPLATE NAME:       Alternative Designs LLC
   DATE:                Feb-05-2008
 *******************************************/
 
/********************************************
   HTML ELEMENTS
********************************************/

* { margin: 0; padding: 0px; }
 


body,html {
margin: 0;
padding: 0px;
background: #fde428;
height: 100%;
}

#frame
{
    width: 940;
   
    background-color: #FFF;
}

 
#container, #main
{
position: relative;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
width: 960px;
min-height: 100%;
height: auto !important;
background-color: #FFF;
}
 
 
p {margin: 0; padding: 0px; }
 
 
/* LABELS AND FORMS */
 
label {font-weight: bold }
 
input#name {
width: 20em;
border: 1px solid #755a3c;
font: 10pt Arial, 'Trebuchet MS', Sans-Serif;
color: #755a3c;
}
 
textarea {
width: 20em;
height: 12em;
border: 1px solid #755a3c;
font: 10pt Arial, 'Trebuchet MS', Sans-Serif;
color: #755a3c;
}
 
 
input.button {
width: 6em;
font: bold 12pt Arial, Sans-serif;
color: #fff;      
background: #b50000;
padding: 2px 3px;
border: 1px solid #2E2E2E;
}
 
input#other {width:18em }
 
 
/* LABELS AND FORMS */
 
 
/* BACKGROUND */
 
.background {
background: #425c64 url('/images/bg.gif') repeat-x;
}
 
/* BACKGROUND */
 
 
/* HEADER */
 
#header {
background: url(/images/header.jpg) no-repeat;
height: 125px;
}
 
/* LOGO */
.logolink {
background-image: url('/images/logo.gif');
background-repeat: no-repeat;
height: 236px;
width: 115px;
}
 
.logolink a { float: left;  }
 
#swap {background-image: url(/images/logo.gif);  width: 236px;  height: 115px;  }
 
.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */
/* LOGO */
 
 
/* HEADER */
 
/* NAV */
 
#nav {
background: url(/images/nav_bg.gif) repeat-x;
height: 38px;
}
 
.images {
position: left;
}
 
.images a { float: left; }
 
#swap01 {background-image: url(/images/nav_products_on.gif);  width: 74px;  height: 38px; }
#swap02 { background-image: url(/images/nav_service_on.gif); width: 74px;  height: 38px; }
#swap03 { background-image: url(/images/nav_safety_on.gif); width: 56px;  height: 38px; }
#swap04 {background-image: url(/images/nav_contact_on.gif);  width: 92px;  height: 38px; }
#swap05 { background-image: url(/images/nav_catalog_on.gif); width: 122px;  height: 38px; }
#swap06 { background-image: url(/images/nav_landscape_on.gif); width: 160px;  height: 38px; }
 
.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */
 
 
#nav .end {
float: right;
background: url(/images/nav_kid.jpg) no-repeat;
width: 365px;
height: 38px;
}
 
/* NAV */
 
/* MAINGRAPHIC */
 
#maingraphic {
background: url(/images/maingraphic.jpg) no-repeat;
height: 186px;
}
 
#maingraphic p {
padding: 76px 308px 0px 40px;
font: bold italic 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #FFF;
}
 
/* MAINGRAPHIC */
 
 
/* MAIN */
 
#main {
font: 10pt 'Trebuchet MS', Arial, Sans-serif;
height: auto;
height: 100%;
}
 
#main .leftside {
float: left;
margin: 15px;
width: 242px;
}
 
#main .leftside h1 {
background: url(/images/left_contact.gif) no-repeat;
height: 37px;
}
 
#main .leftside h2 {
background: url(/images/left_vendors.gif) no-repeat;
height: 37px;
}
 
#main .leftside p {
margin: 4px 0px 10px 0px;
padding: 10px;
background-color: #f1ebdf;
color: #a59662;
}
 
#main .vendors {
background: #f1ebdf url(/images/vendors.gif) no-repeat;
height: 93px;
}
 
 
#main .content {
float: right;
padding: 20px 20px 0px 20px;
color: #86878b;
line-height: 19px;
width: 630px;
}
 
#main .content h1 {
font-size: 18pt;
font-weight: bold;
color: #4fc2f0;
letter-spacing: -1px;
}
 
/* MAIN */
 
 
 
#content
{
padding-bottom: 9em;
}
 
#footer
{
position: relative;
clear: both;
height: 80px;
width:940px;
margin-left: auto;
margin-right:auto;
background-color: #8cc63e;
padding: 10px;
color: #FFF;
}
/* FOOTER */
 
#footer .asc {
font: 8pt 'Trebuchet MS', Arial, Sans-serif;
color: #FFF;
text-decoration: underline;
}
 
#footer .asc a {
font: 8pt 'Trebuchet MS', Arial, Sans-serif;
color: #dcffac;
text-decoration: underline;
}
 
#footer ul {
font: 8pt 'Trebuchet MS', Arial, Sans-serif;
display: inline;
}
 
#footer li {
display: inline;
padding: 10px;
}
 
#footer li a {
color: #dcffac;
}

Maybe you know what I could do? Thanks a ton man!
0
 
Doc_McAlisterCommented:
Basically think of it this way.  Your page background is yellow.  So your working with a big yellow sheet of contruction paper.

Your frame background is white.  So you are putting a white piece of paper on top of the yellow.  The yellow sticks out on either side and below but you've centered it symetrically (or asymetrically if you choose to) and lined up its top edge with the top of the yellow paper.

On the white paper you are putting pictures and text etc ... and a strip of green paper on the bottom.

By corralling everything in the white frame you keep the yellow page out of the equation so there is nothing there for different browsers to squabble about.
0
 
Doc_McAlisterCommented:
Also, thanks for the link.  That is a nice design.
0
 
ambitiousdesignAuthor Commented:
tried it once more and it worked, thanks a ton man!
0
 
ambitiousdesignAuthor Commented:
tried it again and it worked! Thanks man!
0
All Courses

From novice to tech pro — start learning today.