Member Avatar for Buffalo101

Hello,

I'm learning CSS and I've ran into a bit of a problem while trying to get a fixed footer to stick to the bottom of my page. I've searched the web and tried to adapt existing code to my page, getting everything inside a "wrapper" that's 100% height - the header height, then placing the header as seen here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ , but nothing works. I used all % for widths and heights to keep the site looking decent 800x600 through 1680x1050.. which is why I don't want to start over from a proven design - I prefer spending more time changing my own.

What do I do, what do I add, what can I change to have a footer? thank you..

http://www.mediafire.com/?4a440u4wuq1fbcd siteee.rar (please use firefox or opera, not IE - or you'll be horrified).

Any help is highly appreciated, thank you!

  • 2 Contributors
  • 6 Replies
  • 96 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Buffalo101

Recommended Answers

All 6 Replies

Member Avatar for almostbob 
.footer { bottom:0; top:auto; width:100% position:fixed; z-index:10; text-align:center; }

usually works
the element given class='footer' sticks in position at the bottom of the page at z-index 10 (above the default 0) other content slides under it as the page moves up or down

<div class='footer'> [copyright] [contactus] [hi mum] [spaghetti recipes][cat pictures] [nomz] </div>
Edited by almostbob because: n/a
Member Avatar for Buffalo101

Thank you for the reply, almostbob, but it works only partially. The actual text gets pushed behind the footer.

I could also use a footer that sits below the text, at the bottom of the page.

Member Avatar for almostbob

the text is supposed to be pushed behind the footer, the footer remains stationary and the page pushes behind it, If the text does not scroll up far enough ad a whitespace to the bottom of the text <p>%nbsp;</p>

Member Avatar for Buffalo101

Another problem: the footer text doesn't display properly in Firefox (OPERA is perfect). I can use padding-bottom to move it up, but it shows screwed in opera. Ideas?

http://i29.tinypic.com/s1hqao.jpg

Edited by Buffalo101 because: n/a
Member Avatar for Buffalo101

Okay, so I've tried using this but without any luck.

<!—[if lt Firefox]>
   <link rel="stylesheet" type="text/css" href="firefox.css" />
<![endif]—>

How can I use a specific .css depending on the browser and how can I remove some space between the footer-top and the writing?

Member Avatar for Buffalo101

Okay, so I've tried using this but without any luck.

<?php



<script type="text/javascript">
if ($navigator.appName == "Opera")
   <link rel="stylesheet" type="text/css" href="firefox.css" />
 else
   <link rel="stylesheet" type = "text/css" href= "stiluri.css"/>

?>

</script>

How can I use a specific .css depending on the browser and how can I remove some space between the footer-top and the writing?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.