19 replies [Last post]
Mugu
Offline
Regular
Minnesota
Last seen: 17 years 14 weeks ago
Minnesota
Timezone: GMT-6
Joined: 2005-07-01
Posts: 11
Points: 0

Hello, I'm new here and I'm also quite new to CSS

Just have a question about footer... I've been looking around this forum and many other places about footers, seem none to be my solution. The problem is that I can't get the footer to stick at the bottom, when I reize the viewport, the footer overlays the contents. I've been trying to solve this for 2 days, so please help!

Here's are the CSS codes:

body {
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	color: #666666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: justify;
}
html, body, #container {
	max-height: 100%;
	min-height: 100%;
	width: 100%;
	height: 100%;
}
html>body, html>body #container {
	height: auto;
}

#container {
	position:absolute;
	left:0px;
	top:0px;
}

h1 {
	font: Arial;
	font-size: 14px;
	color: #5b7ea9;
	border-bottom: 1px dotted #5b7ea9;
}

#logo {
	position:absolute;
	left:0px;
	top:0px;
	width:276px;
	height:85px;
}

#banner-spacer {
	position:absolute;
	background-image: url(images/banner_spacer.gif);
	left:276px;
	top:0px;
	width:1000px;
	height:85px;
}

#links-leftspacer {
	position:absolute;
	left:0px;
	top:85px;
	width:15px;
	height:25px;
}

#home {
	position:absolute;
	left:15px;
	top:85px;
	width:55px;
	height:25px;
}

#about {
	position:absolute;
	left:70px;
	top:85px;
	width:74px;
	height:25px;
}

#faq {
	position:absolute;
	left:144px;
	top:85px;
	width:45px;
	height:25px;
}

#contact {
	position:absolute;
	left:189px;
	top:85px;
	width:87px;
	height:25px;
}

#links-rightspacer {
	position:absolute;
	left:276px;
	top:85px;
	width:253px;
	height:25px;
}

#search {
	position:absolute;
	left:529px;
	top:85px;
	width:61px;
	height:25px;
}
#searchbox {
	position:absolute;
}
#search-empty input.box {
	border: solid 1px #666666;
	width: 150px;
}
#search-empty input.btn {
	border: solid 1px #666666;
}
#search-empty {
	position:absolute;
	background-image: url(images/search_empty.gif);
	background-repeat: repeat-x;
	left:590px;
	top:85px;
	width:686px;
	height:25px;
}

#statesdd {
	position:absolute;
	margin-left: 15px;
	margin-top: 4px;
}
#states-ddbox select {
	border: solid 1px #666666;
	width: 150px;
}
#states-ddbox {
	position:absolute;
	background-image: url(images/states_ddbox.gif);
	background-repeat: no-repeat;
	left:0px;
	top:110px;
	width:183px;
	height:39px;
}

#catdd {
	position:absolute;
	margin-left: 15px;
	margin-top: 4px;
}

#cat-ddbox select {
	border: solid 1px #666666;
	width: 150px;
}
#cat-ddbox {
	position:absolute;
	background-image: url(images/cat_ddbox.gif);
	background-repeat: no-repeat;
	left:183px;
	top:110px;
	width:178px;
	height:39px;
}

#dd-spacer {
	position:absolute;
	background-image: url(images/dd_spacer.gif);
	left:361px;
	top:110px;
	width:915px;
	height:39px;
}

#content {
	position: absolute;
	width: 600px;
	left: 15px;
	top: 150px;
	height: auto;
}

#adspace {
	position: absolute;
	margin-left: 10px;
	top: 150px;
	left: 615px; 
	width: 100%;
	height: auto;
}	

#bottom {
	position: absolute;
	bottom: 0;
	background-image: url(images/states_leftspacer.gif);
	background-repeat: repeat-x;
	width:1276px;
}
#bottom td {
	padding: 5px 5px 5px 5px;
	text-align: left;
	width: 50px;
	font: Arial;
	font-size: 11px;
}
#bottom li {
	list-style: none;
}
#bottom a:link, #bottom a:visited {
	text-decoration: none;
	color: #ffe117;
}
#bottom a:hover {
	text-decoration: underline;
	color: #ffb007;
}

Here's the HTML:

<div id="container"> 
  <div id="logo"><img src="images/logo.gif" width="276" height="85" alt=""> </div>
  <div id="banner-spacer"></div>
  <div id="links-leftspacer"> <img src="images/links_leftspacer.gif" width="15" height="25" alt=""> 
  </div>
  <div id="home"> <a href="#"
			onmouseover="changeImages('home', 'images/home-over.gif'); return true;"
			onmouseout="changeImages('home', 'images/home.gif'); return true;"
			onmousedown="changeImages('home', 'images/home-over.gif'); return true;"
			onmouseup="changeImages('home', 'images/home-over.gif'); return true;"> 
    <img name="home" src="images/home.gif" width="55" height="25" border="0" alt=""></a> 
  </div>
  <div id="about"> <a href="#"
			onmouseover="changeImages('about', 'images/about-over.gif'); return true;"
			onmouseout="changeImages('about', 'images/about.gif'); return true;"
			onmousedown="changeImages('about', 'images/about-over.gif'); return true;"
			onmouseup="changeImages('about', 'images/about-over.gif'); return true;"> 
    <img name="about" src="images/about.gif" width="74" height="25" border="0" alt=""></a> 
  </div>
  <div id="faq"> <a href="#"
			onmouseover="changeImages('faq', 'images/faq-over.gif'); return true;"
			onmouseout="changeImages('faq', 'images/faq.gif'); return true;"
			onmousedown="changeImages('faq', 'images/faq-over.gif'); return true;"
			onmouseup="changeImages('faq', 'images/faq-over.gif'); return true;"> 
    <img name="faq" src="images/faq.gif" width="45" height="25" border="0" alt=""></a> 
  </div>
  <div id="contact"> <a href="#"
			onmouseover="changeImages('contact', 'images/contact-over.gif'); return true;"
			onmouseout="changeImages('contact', 'images/contact.gif'); return true;"
			onmousedown="changeImages('contact', 'images/contact-over.gif'); return true;"
			onmouseup="changeImages('contact', 'images/contact-over.gif'); return true;"> 
    <img name="contact" src="images/contact.gif" width="87" height="25" border="0" alt=""></a> 
  </div>
  <div id="links-rightspacer"> <img src="images/links_rightspacer.gif" width="253" height="25" alt=""> 
  </div>
  <div id="search"> <img src="images/search.gif" width="61" height="25" alt=""> 
  </div>
  <div id="search-empty"> 
    <form name="searchbox" method="post" action="">
      <input type="text" name="searchinput" class="box">
      <input type="submit" name="searchbutton" value="Go" class="btn">
    </form>
  </div>
  <div id="states-ddbox"> 
    <div id="statesdd"> 
      <form name="stateslist" method="post" action="">
        <select name="state">
          <option>Select A State</option>
          <option>Alaska</option>
        </select>
      </form>
    </div>
  </div>
  <div id="cat-ddbox"> 
    <div id="catdd"> 
      <form name="catlist" method="post" action="">
        <select name="topic">
          <option >Select A Topic</option>
          <option>State Laws & Statues</option>
        </select>
      </form>
    </div>
  </div>
  <div id="dd-spacer"> </div>
  <div id="content"> 
    <h1><img src="images/bluearrow.gif" width="10" height="10"> NEWS</h1>
    dfasdf 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, 
      consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce 
      aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. 
      Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan 
      aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. 
      Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae 
      lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec 
      sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, 
      ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet 
      posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, 
      augue. Nullam nunc.</p>
    <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin 
      non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus 
      at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum 
      tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum 
      ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla 
      ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per 
      conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit 
      ac, rutrum ac, lectus.</p>
    <p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi 
      egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum 
      purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, 
      accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum 
      aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet 
      elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class 
      aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
      hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum 
      nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget 
      purus.</p>
    <p>Sed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. 
      Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum 
      faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus at, pharetra 
      ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh 
      dapibus justo. Nulla sapien lorem, tincidunt sit amet, lobortis laoreet, 
      feugiat a, leo. Etiam id mauris in libero molestie dictum. Cras nisl diam, 
      dapibus ut, sollicitudin sed, auctor nec, orci. Nam eleifend, dui in dapibus 
      congue, mi diam luctus velit, eu imperdiet pede elit nec lorem. Proin laoreet, 
      eros a dictum faucibus, nunc wisi rhoncus nunc, at rhoncus lectus tellus 
      vitae urna. Curabitur a turpis at ligula lobortis cursus.</p>
    <p>Donec convallis est id augue. Integer elit. Cras mi. Nulla ac tellus eget 
      wisi facilisis egestas. Pellentesque ac lacus a quam pulvinar ornare. In 
      congue fermentum risus. Pellentesque vitae ligula quis justo vehicula varius. 
      Donec feugiat mi eu urna. Donec erat massa, posuere ac, adipiscing in, lobortis 
      ac, nisl. Donec malesuada turpis sed arcu. Curabitur lacus. Donec eu elit.</p>
  </div>
  <div id="adpsace"></div>
  <div id="bottom"> 
    <table>
      <tr> 
        <td><ul>
            <li><a href="#">Alabama</a></li>
            <li><a href="#">Alaska</a></li>
            <li><a href="#">Arizona</a></li>
            <li><a href="#">Arkansas</a></li>
            <li><a href="#">California</a></li>
            <li><a href="#">Colorado</a></li>
          </ul></td>
        <td><ul>
            <li><a href="#">Connecticut</a></li>
            <li><a href="#">Deleware</a></li>
            <li><a href="#">Florida</a></li>
            <li><a href="#">Georgia</a></li>
            <li><a href="#">Hawaii</a></li>
            <li><a href="#">Idaho</a></li>
          </ul></td>
        <td><ul>
            <li><a href="#">Illinois</a></li>
            <li><a href="#">Indiana</a></li>
            <li><a href="#">Iowa</a></li>
            <li><a href="#">Kansas</a></li>
            <li><a href="#">Kentucky</a></li>
            <li><a href="#">Louisiana</a></li>
          </ul></td>
        <td><ul>
            <li><a href="#">Maine</a></li>
            <li><a href="#">Maryland</a></li>
            <li><a href="#">Massachusetts</a></li>
            <li><a href="#">Michigan</a></li>
            <li><a href="#">Minnesota</a></li>
            <li><a href="#">Mississippi</a></li>
          </ul></td>
      </tr>
    </table>
  </div>
</div>

Thanks for any help!

Mugu

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 22 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Footer is driving me crazy!

Hi

I haven't been through your code in detail - nor do I have a specific answer to your question (sorry!) but, can I suggest that you get rid of all the position:absolutes in your layout as they can prove very problematic and result in your page "breaking".

Postion: absolute always seems like a good idea at first, but it'll come back to bite you!

Try to do without - if you have problems positioning stuff in the natural flow of the page then come back and we'll try to help.

Edit: Blimey that was a bit bossy! Must mean I'm hungry! Not really my place to tell you what to do - but it will make your life easier in the end.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Mugu
Offline
Regular
Minnesota
Last seen: 17 years 14 weeks ago
Minnesota
Timezone: GMT-6
Joined: 2005-07-01
Posts: 11
Points: 0

Footer is driving me crazy!

I removed all the absolutes, changed them to relatives. It was completely messed up. Now a question, if I don't set the position to absolute, do I align things by setting the margins or just top, left, right? Thanks for helping

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 22 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Footer is driving me crazy!

Yeah it would mess it up initially!

Can you tell us what sort of layout you're after i.e. Centred box with header, two columns and a footer etc.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Mugu
Offline
Regular
Minnesota
Last seen: 17 years 14 weeks ago
Minnesota
Timezone: GMT-6
Joined: 2005-07-01
Posts: 11
Points: 0

Footer is driving me crazy!

The css were actually generated by ImageReady and I did a lot of modifications to it. Basically the layout has just the top column with all the banner - nav to it, and then two columns right below it which are Content and adspace. And finally the footer.

Thanks

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 22 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Footer is driving me crazy!

Ok - I'll give you my plan and a link to a few very good layout sites for you to find a (probably) better way!!

I'd have an overall container div that you can put everything else in and position on the page (centre for example).

Then in your container div you've got your header section followed by your two central content areas. There are a couple of ways of doing this, at the moment I'm floating one of the two central divs left and floating the other one right. Then finally you've got your footer div (make sure it clears both the previous floating sections to keep it at the bottom).

You don't need position:relative in fact it can cause problems. It should all sit together fairly nicely.

Here's a couple of layout sites (there's also a layout generator on this site to play with).

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
http://webhost.bridgew.edu/etribou/layouts/skidoo/index.html
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
http://css.maxdesign.com.au/

That last one goes to the CSS tutorials on floats and CSS menus which are great - if you follow the link at the bottom back to the presentations there's another tutorial in there about layouts.

Don't expect it to all work first time (if it does then I hate you!). See what you can come up with and come back with any problems.

Have fun!

Edit: again, just remembered - make sure you're using Firefox to check the site. Code for Firefox, check in Opera and fix for IE.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Footer is driving me crazy!

What HellsBells said; even if it is bossy sounding. Smile No newbie should ever use AP elements for layout. There are too many gotchas that you're not prepared to deal with. Now, that's bossy.

For a footer solution, see my footer demo.

Get your page rebuilt, then drop everything but the footer into the specified area. The footer goes into its slot.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mugu
Offline
Regular
Minnesota
Last seen: 17 years 14 weeks ago
Minnesota
Timezone: GMT-6
Joined: 2005-07-01
Posts: 11
Points: 0

Footer is driving me crazy!

I was able to make the footer stick in FireFox, IE, and Netscape by giving it a specific height at the wrapper/container, but it didn't work for Opera. So yeah, screw trying to solve it and ImageReady, I'll start all over better. Thanks for all the info and help, I greatly appreciated it Smile

mrruben5
mrruben5's picture
Offline
Regular
Last seen: 14 years 5 weeks ago
Joined: 2005-06-20
Posts: 49
Points: 0

Footer is driving me crazy!

What I always do with layouts, is make a container, in that a header, content-container and footer. In that content-containe I put my sidebars with float left and right. Then I just clear my footer and my layout is done.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 2 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Footer is driving me crazy!

Mugu wrote:
I was able to make the footer stick in FireFox, IE, and Netscape by giving it a specific hei...

Are you sure that's working in FF & Mozilla.

Try these two topics.
http://www.csscreator.com/css-forum/ftopic10331.html
http://www.csscreator.com/css-forum/ftopic9291.html

the first has a simple explanation. The second is a lot more detailed.

Mugu
Offline
Regular
Minnesota
Last seen: 17 years 14 weeks ago
Minnesota
Timezone: GMT-6
Joined: 2005-07-01
Posts: 11
Points: 0

Footer is driving me crazy!

Yeh... it kinda worked... but of course the content isn't expandable anymore... made me happy for like 5 seconds then I got hit with a migraine, lol

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 2 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Footer is driving me crazy!

Mugu wrote:
Yeh... it kinda worked... but of course the content isn't expandable anymore... made me happy for like 5 seconds then I got hit with a migraine, lol

:?

The technique used for the footer is expandable vertically. It has no bearing on the styles you use for horizontal aspect of your layout.

Mugu
Offline
Regular
Minnesota
Last seen: 17 years 14 weeks ago
Minnesota
Timezone: GMT-6
Joined: 2005-07-01
Posts: 11
Points: 0

Footer is driving me crazy!

This time, I took out the absolute positioning, add some of the codes you guys provided, and it seems to be working better even without defining a footer. Though, I ran into some new problems regarding IE, and screen resolutions:

First problem

Internet Explorer: There is a little space between the header. No space in FireFox, Netscape, and Opera. The very top blue part are two seperate images (logo and banner-spacer)

Second Problem

Netscape, FireFox, IE: It works fine until the screen is resize or at 800x600. The images start to move all over the places....

Now finally in Opera: It resizes itself, the content looks fine in all resolution but the "Ad space" drops below content:

And the codes:

body {
	font-family: Arial;
	font-size: 11px;
	font-color: #666666;
	background-color: #FFFFFF;
	text-align: justify;
}

html, body, #wrapper {
    min-height: 100%; /*Sets the min height to the
                        height of the viewport.*/
    width: 100%;
    height: 100%; /*Effectively, this is min height
                    for IE5+/Win, since IE wrongly expands
                    an element to enclose its content.
                    This mis-behavior screws up modern  
                    browsers*/
    margin: 0;
    padding: 0;
    }

html>body, html>body #wrapper {
    height: auto; /*this undoes the IE hack, hiding it
                    from IE using the child selector*/
    } 

#container {
	position:absolute;
	left:0px;
	top:0px;
}

#logo {
	float: left;
	width:276px;
	height:85px;
	margin: 0px 0px 0px 0px;
	padding: 0;
}

#banner-spacer {
	float: left;
	background-image: url(images/banner_spacer.gif);
	background-repeat: repeat-x;
	width:524px;
	height:85px;
	margin: 0px 0px 0px 0px;
	padding: 0;
}

#nav {
	clear: both;
	background-image: url(images/nav.gif);
	background-repeat: repeat-x;
	left:0px;
	margin: 0px 0px 0px 0px;
	width:800px;
	height:25px;
}

#states-ddbox {
	float: left;
	background-image: url(images/states_ddbox.gif);
	background-repeat: no-repeat;
	margin-left:0px;
	margin-top:auto;
	width:183px;
	height:39px;
}

#cat-ddbox {
	float: left;
	background-image: url(images/cat_ddbox.gif);
	background-repeat: no-repeat;
	margin-top:auto;
	width:178px;
	height:39px;
}

.ddbox {
	margin-top: 4px;
	margin-left: 10px;
}
select {
	border: 1px solid #000000;
	background-color: #FFFFFF;
	font: Arial;
	font-size: 11px;
	width: 150px;
}

#dd-spacer {
	float: left;
	background-image: url(images/dd_spacer.gif);
	background-repeat: no-repeat;
	margin-top:auto;
	width:auto;
	height:39px;
}

#content {
	float: left;
	margin-left: 10px;
	margin-top:auto;
	width:600px;
	height:auto;
}

h1 {
	font-family: Arial;
	font-size: 14px;
	color: #5b7ea9;
	border-bottom: 1px dotted #5b7ea9;
}

#adspace {
	float: left;
	margin-left: 30px;
	margin-top: auto;
	width: 200px;
}
#adspace img {
	border: 1px solid #000000;
	margin-bottom: 15px;
}
#ad {
	height: 250px;
	width: 120px;
	border: 1px solid #000000;
	text-align: center;
}

#states-leftspacer {
	clear:both;
	background-image: url(images/states_leftspacer.gif);
	background-repeat: repeat-x;
	margin-left:0px;
	margin-top:auto;
	width: auto;
	height:114px;
}

Thank you so much for helping! Smile

Mugu
Offline
Regular
Minnesota
Last seen: 17 years 14 weeks ago
Minnesota
Timezone: GMT-6
Joined: 2005-07-01
Posts: 11
Points: 0

Footer is driving me crazy!

Quote:
Mugu Post Posted: Tue Jul 05, 2005 10:32 am Post subject:
This time, I took out the absolute positioning, add some of the codes you guys provided, and it seems to be working better even without defining a footer.

Nevermind, I got myself so confused, I didn't get the footer working. I think I'm about to go insane...

Mugu
Offline
Regular
Minnesota
Last seen: 17 years 14 weeks ago
Minnesota
Timezone: GMT-6
Joined: 2005-07-01
Posts: 11
Points: 0

Footer is driving me crazy!

I was able to solve problem 2, but I still have problem with problem 1. So can anyone please help?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 2 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Footer is driving me crazy!

for problem one, try adjusting the banner style in this order:
- font-size (set it to Innocent
- line-height: (set it to Innocent
- vertical-align of the images (set it to text-bottom)

small gaps under images in IE are often caused by IE aligning them with an imaginary text base-line. The text base line is slightly above the bottom of the element to leave room for letters with decenders (e.g. g,j,p,q,y).

using position:absolute on the main regions of your layout is (normally) a big no no. position:absolute degrades poorly whenever element height adjusts (like a user changing the browser font-size) and there are lower elements on the page.

For the footer problem, this is an example of the technique provided on my post above (click the links in the columns to vary their height). There are pretty detailed comments on the styles explaining what each dimension means and where they impact on the dimensions of other elements or their margins/padding.

Mugu
Offline
Regular
Minnesota
Last seen: 17 years 14 weeks ago
Minnesota
Timezone: GMT-6
Joined: 2005-07-01
Posts: 11
Points: 0

Back again...

Hi again, I started all over again and this time I get things work quite well after hacking the hey outta IE, still I have the footer problem. Oddly enough, IE is like the only browser that the footer works. while Opera seems to work.. . the footer sticks at the bottom for Opera, but the footer overlaps the text when I resize the screen or view at 800x600. FireFox and Netscape on the hand, the footer didn't work at all. It stays right below the content box and when resize or view at 800x600, the footer overlaps the content box. What I mean:

IE - works normally

Opera - when resize

Netscape & FireFox - The footer doesn't stick at the bottom. And footer overlaps content when resize

Here's the codes

body {
   font-family: Arial;
   font-size: 11px;
   font-color: #666666;
   background-color: #FFFFFF;
   text-align: justify;
   padding-bottom: 3em;
}

html, body, #container {
    min-height: 100%;
    width: 100%;
    height: 100%; 
    }

html>body, html>body #container {
    height: 100%;
    } 

#container {
	position: absolute;
	left:0px;
	top:0px;
}

#banner {
	margin-left:0;
	margin-top:0;
	width:276px;
	height:85px;
}

#banner-spacer {
	background-image: url(../images/banner_spacer.gif);
	margin-left:276px;
	margin-top:-85px;
	width:100%;
	height:85px;
}
/* \* IE HACK */
* html #banner-spacer {
    margin-top: -88px;
    }
/* */ 

#links-leftspacer {
	marginleft:0px;
	top:85px;
	width:15px;
	height:25px;
}
/* \* IE Hack */
* html #links-leftspacer {
    margin-top: -3px;
    }
/* */ 

#home {
	margin-left:15px;
	margin-top:-25px;
	width:55px;
	height:25px;
}
/* \* IE Hack */
* html #home {
    margin-top: -28px;
    }
/* */ 

#about {
	margin-left:70px;
	margin-top:-25px;
	width:74px;
	height:25px;
}
/* \* IE Hack */
* html #about {
    margin-top: -28px;
    }
/* */ 

#faq {
	margin-left:144px;
	margin-top: -25px;
	width:45px;
	height:25px;
}
/* \* IE Hack */
* html #faq {
    margin-top: -28px;
    }
/* */ 

#contact {
	margin-left:189px;
	margin-top:-25px;
	width:87px;
	height:25px;
}
/* \* IE Hack */
* html #contact {
    margin-top: -28px;
    }
/* */ 

#links-rightspacer {
	margin-left:276px;
	margin-top:-25px;
	width:253px;
	height:25px;
}
/* \* IE Hack */
* html #links-rightspacer {
    margin-top: -28px;
    }
/* */ 

#search {
	margin-left:529px;
	margin-top:-25px;
	width:61px;
	height:25px;
}
/* \* IE Hack */
* html #search {
    margin-top: -28px;
    }
/* */ 

#searchbg {
	background-image: url(../images/searchbg.gif);
	background-repeat: repeat-x;
	margin-left:590px;
	margin-top:-25px;
	width:100%;
	height:25px;
}
/* \* IE Hack */
* html #searchbg {
    margin-top: -28px;
    }
/* */ 

#states-ddbox {
	background-image: url(../images/states_ddbox.gif);
	background-repeat: no-repeat;
	left:0px;
	top:110px;
	width:183px;
	height:39px;
}

#cat-ddbox {
	background-image: url(../images/cat_ddbox.gif);
	background-repeat: no-repeat;
	margin-left:183px;
	margin-top:-39px;
	width:178px;
	height:39px;
}

#dd-spacer {
	background-image: url(../images/dd_spacer.gif);
	background-repeat: repeat-x;
	margin-left:361px;
	margin-top:-39px;
	width:100%;
	height:39px;
}

#content {
	background-color: #FFFFFF;
	margin-left:5px;
	margin-right: 15px;
	margin-top:auto;
	margin-bottom: 3em;
	width: 40%;
}
#content p {
	margin-left: 10px;
}
#content a:link, #content a:visited {
	color: #226ab4;
	text-decoration: none;
}
#content a:hover {
	color: #226ab4;
	text-decoration: underline;
}

#adspace {
   margin-left: 550px;
   margin-top: -510px;
   width: 5%;
   margin-bottom: 25px;
}
/* \* IE Hack */
* html #adspace {
    margin-top: -550px;
    }
/* */ 
html>#adspace {
	margin-top: -700px;
}

#adspace img {
   border: 1px solid #000000;
   margin-bottom: 15px;
}
#ad {
   height: 250px;
   width: 120px;
   border: 1px solid #000000;
   text-align: center;
}

#footer {
	position:absolute;
	bottom: 0;
	left: 0;
	background-image: url(../images/footer.gif);
	background-repeat: repeat-x;
	width:100%;
	height:114px;
}
#footer td {
	padding-top: 10px;
	padding-left: 10px;
	text-align: left;
	font-family: Arial;
	font-size: 11px;
	vertical-align:top;
	width: 80px;
}
#footer a:link, #footer a:visited {
	text-decoration: none;
	color: #ffe117;
}
#footer a:hover {
	text-decoration: underline;
	color: #ffb007;
}

Thanks so much for helping! Especially Chris_s Smile

Mugu
Offline
Regular
Minnesota
Last seen: 17 years 14 weeks ago
Minnesota
Timezone: GMT-6
Joined: 2005-07-01
Posts: 11
Points: 0

Footer is driving me crazy!

And I have also tried all the links you guys provided, still I have the footer problem Crying

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 2 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Footer is driving me crazy!

The CSS you have posted doesn't look anything like the solution I have shown in the above link.

(1) #container and #footer are still positioned absolutely.

(2) height:100% grabs the height from the parent element or display context. In compliant browsers (not IE), height means the element is fixed at that particular height. So when you set #container to 100% it is set to only be the height of the viewport. Any content that doesn't fit within that space, will overflow #container. The bottom edge of #container won't move. So the overflowing content will appear below your footer. IE treats height as min-height.

As per the thread in the first link above, all you need is

html -
<body>
<div id='container'>
  <div id='content'>
  some content ...
  </div><!-- content -->
</div><!-- container -->
<div id='footer'>
  <!-- some footer content -->
</div>
</body>

css -
html, body, #container {height:100%;}
html, body {margin:0; padding:0;}

/* these three values should be the same magnitude */
#container { margin-bottom: -50px;}
#content { padding-bottom: 50px; }
#footer {height: 50px; }

Since CSS layouts are scaleable, all you need to do is to drop your page html in between the <div id='content'></div> tags. And to drop you footer html into the <div id='footer></div> tags.

You may find it easier if you deconstruct your page and build it up slowly from the outer layout in. Which would mean starting with something like the CSS and HTML above, confirming that it works then slowly add each of the other aspects of your page.

Mugu
Offline
Regular
Minnesota
Last seen: 17 years 14 weeks ago
Minnesota
Timezone: GMT-6
Joined: 2005-07-01
Posts: 11
Points: 0

Footer is driving me crazy!

woof! I got the footer working in FireFox, Netscape, and Opera, thanks to your codes chris! Thank you so much!!! Now I just have to fix IE a bit Wink

Edit: I also fixed up IE after I posted this, hahahah *happy dance* Laughing out loud