4 replies [Last post]
thus-sung
Offline
newbie
Last seen: 12 years 26 weeks ago
Joined: 2008-06-02
Posts: 3
Points: 0

I'm having a problem with my CSS footer. I want it to be below the content, and stay below the content even if the content lengthens. I'd rather it stay with the text rather than stay fixed at the bottom of the page, but my problem is that I can't get the footer to move no matter what I try.

Hopefully you guys will be able to help me.

The page is here: http://www.cawthratechnology.com/laura/testing2.htm
CSS is here: http://www.cawthratechnology.com/laura/css/test2.css

I've googled my little heart out, but nothing I've tried has worked. I took out all the code from stuff I was trying.

The page's code:

Untitled Document

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam consectetuer, neque congue egestas porttitor, tellus nulla dapibus nulla, vitae scelerisque metus lectus nec purus. Nulla suscipit sem vitae purus. Nunc ipsum. Curabitur lacus nulla, fermentum nec, iaculis et, consequat eget, lectus. Suspendisse pede pede, rutrum ut, laoreet quis, tempus sit amet, libero. Suspendisse dignissim malesuada sem. Duis arcu neque, adipiscing vitae, hendrerit id, semper sed, nisi. Duis blandit, erat ac volutpat pharetra, ipsum nisi iaculis tortor, sit amet bibendum leo est non nibh. Vestibulum tempus, tortor quis cursus posuere, lorem turpis sagittis diam, quis posuere ante arcu in nulla. Nulla facilisi. Etiam ante.

Dnec neque lacus, consequat sed, fringilla vitae, porta eu, dolor. Suspendisse potenti. Proin cursus augue ut magna. Vivamus pulvinar tellus at elit. Sed bibendum. Cras tincidunt tortor a tellus. Vivamus vitae leo. Suspendisse diam tellus, elementum eget, sodales ac, vulputate at, lectus. Suspendisse potenti. Duis elementum. Morbi consequat sem ut enim. Aenean gravida. Vivamus quis neque. In eros leo, venenatis in, egestas sed, sodales et, sapien. Morbi consequat, augue eget dignissim lacinia, lorem odio commodo lorem, eget tincidunt elit leo sit amet justo. Suspendisse dolor felis, tempus id, blandit in, faucibus ac, nunc. Sed arcu risus, posuere et, molestie in, fringilla quis, quam. Morbi eleifend felis laoreet lacus. Integer sed justo nec ligula dignissim porta. Donec id massa pellentesque est vestibulum iaculis.

Vivamus sit amet tellus vel massa pharetra sodales. Morbi vitae lacus. Vivamus quam massa, scelerisque sed, elementum dictum, aliquam malesuada, arcu. Aenean cursus imperdiet dui. Duis vitae augue. Aenean varius nisl ut tortor. Nam consectetuer ipsum vitae risus. Aliquam dictum consequat sapien. Aenean sollicitudin. Aenean leo libero, feugiat ac, tempus id, dapibus non, est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam dolor elit, tempor vel, blandit et, mollis in, dui. Aliquam consequat. In sagittis. Sed feugiat orci et felis ultricies eleifend. Nunc dictum feugiat felis. Nam ac ante. Nulla et dui a libero ultrices ultricies.

Curabitur tempus orci ut erat. Duis dignissim diam eu erat. Mauris mattis sem. Morbi mattis imperdiet orci. Phasellus porta massa eget nulla. Aenean sit amet risus. Sed facilisis, massa quis imperdiet facilisis, risus velit aliquam velit, eget tristique enim nisl quis est. Aliquam ut enim quis arcu euismod aliquet. Donec mollis pellentesque nunc. Donec aliquet, mi a accumsan cursus, dui mauris congue massa, vitae ultricies tortor sem a orci. Fusce vitae mauris id nisl convallis pharetra. Nam magna lacus, luctus ut, luctus eget, mollis in, sem. Sed arcu. Aenean posuere eros nec massa.

Quisque posuere ipsum et dui. Praesent dui. Phasellus auctor nibh eu orci. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tincidunt eros vitae eros. Maecenas ac sem. Mauris sit amet diam dictum lectus ultrices pellentesque. Nam elementum aliquam erat. Aliquam diam nisi, posuere et, commodo quis, pharetra at, est. Aliquam elementum, nisl sed laoreet commodo, nibh turpis vestibulum elit, in aliquet justo purus non augue. Praesent scelerisque consequat quam. Aenean placerat posuere ipsum.

My CSS is here:

body {font-family:verdana; font-size: 10pt; color: #000000;}
th {font-weight: bold; font-family: verdana; font-size: 10pt; color: #000000;}
td {font-family: verdana; font-size: 10pt; color: #000000;}
h1 {text-align: center; font-size: 10pt;}
small {font-size: 8pt;}

body {
background: #EFECCA;}

A:link {font-weight: bold; color:#000000;}
A:visited {font-weight: bold; color:#000000;}
A:active {font-weight: bold; color:#000000;}
A:hover {font-weight: bold; color:#000000;}

#bodytext {
position: absolute;
top: 220px;
left: 200px;
width: 590px;
z-index: 0;
padding: 10px;
padding-bottom: 122px;
border: none;
background: url(http://www.cawthratechnology.com/laura/media/images/bg.gif) repeat-y;}

#headerimage {
position: absolute;
width: 788px;
height: 225px;
left: 101px;
padding: 10px;
z-index: 0;
border: none;
background-color: #efecca;
background: url(http://www.cawthratechnology.com/laura/media/images/header.jpg);}

#footerimage {
position: absolute;
bottom: 0;
left: 101px;
width: 788px;
height: 122px;
z-index: 0;
background: #EFECCA url(http://www.cawthratechnology.com/laura/media/images/footer.jpg) no-repeat top left;}

I'm currently using Firefox, but I haven't seen a change in any of the other browsers I viewed it in.

All the code has been validated.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Your problem appears to be

Your problem appears to be caused by the use of Absolute Positioning for your major elements. This is a common mistake by those starting out with CSS, and I myself did that kind of thing until I learned differently.

Once you've absolutely positioned an element, other elements behave as if they have no knowledge of those AP elements, which is how they are supposed to act with AP. So once you've committed to AP for a few major elements you are stuck with AP for everything, but then your layout will fall apart for different screen resolutions.

The layout on your page doesn't need AP in any way, and can be done by just coding the elements in order and adjusting their margins and widths. Then the elements will behave as if they know about each other and your footer, last in the source, will natually show on the bottom.

Also, I believe your DTD is incomplete and will leave IE in "quirks" mode where it doesn't even try to follow standards. You should also be using a STRICT doctype for a new page.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thus-sung
Offline
newbie
Last seen: 12 years 26 weeks ago
Joined: 2008-06-02
Posts: 3
Points: 0

So the elements don't need a

So the elements don't need a defined position at all?

I also tried setting the position to relative for the footer, and there was no change.

I'll try removing the AP as soon as I get a chance.

Thank you for your suggestion.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

thus-sung wrote:So the

thus-sung wrote:
So the elements don't need a defined position at all?

Your browser will postion them according to the flow of your code. First elements first, next elements next, and so on down the page.

Good designs generally use this natural built-in flow as much as possible. Where a signficant element needs to be positioned out of the natural flow it's best done with floats, as most browsers have many fewer bugs for floats.

Just occasionally, AP can be darned handy for positioning a minor element for effect.

Generally for positioning, use the natural flow as much as possible, then adjust margins, padding, and heights and widths for various effects, then use floats, and as a last report use relative or absolute positioning. Don't use fixed positioning unless you know for certain only a vanishingly small portion of your visits will be from IE6, which simply doesn't understand it.

Floats are tricky enough, RP and AP are much more tricky still.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thus-sung
Offline
newbie
Last seen: 12 years 26 weeks ago
Joined: 2008-06-02
Posts: 3
Points: 0

It's working now! Thank

It's working now! Thank you.

I think I'll just need to get everything in the right spot, but I should be able to do that on my own.

Thanks again, I really appreciate it.