Footer Problems in compliant browsers

I have got to be doing something wrong here.
I am attempting to make a tableless html page.
In IE the footer is right where I want it; just under the pictures however in a more compliant browser such as FF, NN, or OP the footer ends up underneath the text.

Can someone point me into the correct direction?

www.vonstorm.com/php

Thanks

 

You should be able to use something like in your css:

position: absolute;
bottom: 0px;

JD, will have a better answer I am sure...

 

Ironically enough, I just attempted to utilize that and now it works in compliant browsers but does not work in IE.

 

Add

clear:both;

to your .footer class

and add a bottom margin to your #dlb <div>

Mick

 

I have added that in there now however it didn't change anything....
Below is what I have for the footer

.footer {
	position: absolute;
	bottom: 10px;
	left:1%;
	clear:both;
	display:inline-block;
	border: 1px;
	border-style: dashed;
	height: 100px;
	width: 98%;
	background-color:#DFF4D9;
	}

Code (markup):

(just got an emergency call. I will be back on in about 40 minutes)

 

Ooops

Should have clarified the additions were to your original css file not after the changes NewComputer suggested.

Mick

 

Works like a charm.

What exactly did the clear:both; do?

Thank you for your help Arnica.

I am looking forward to the day that I can help others the way that everyone such as yourself in these forums has helped me.

 

No problem, glad to help.

clear:both

tells the browser to place the element below any 'floated' elements that precede it. In your case the #dlb <div> which is left floated. You could also have used clear:left which tells the browser to place the element below any left floats that precede it.

Mick

 

I have one more request that I cannot seem to figure out. I have tried a combination of things. I am sure this is not hard however no matter what I try it doesn't happen.

First:
I am trying to place the footer about 10px from the bottom in the exact spot where it is at.
I would like it at the bottom no matter what resolution the webpage is being viewed at.
(I have been able to accomplish this effect only in certain browsers. IE screws up.)

Second, if you look at the links to the left. The green gradient background that is behind everything. I would like that to extend to 10px above the footer no matter what resolution the screen is being looked at in, no matter what browser the screen is being viewed in.

Any ideas?

Here is the code that I have right now:

I have the margin of 10px there. I just cannot get it to stretch to the bottom. the height of 100% only works if there is something pushing it down. I want to keep the dog pictures where they are at.

Dog image background

#dlb { /* Dog Links Brown Background */

        float:left;
        background:#DAE0D2 url("bg-right.gif") repeat-y;
	/* margin: top, right, bottom, left  */
	margin:0px auto 10px auto;
	padding:0px auto 0px auto;
	width:160px; /* Adjust the width of the brown background behind the left hand side dog links */
	height:100%;
	border:1px; 
	border-top: 0px solid #dddddd; 
	border-right: 1px inset #000; 
	border-bottom: 1px inset #000; 
	border-left: 1px solid #bbbbbb;
	text-align:center; /* Centered for IE */
	padding-bottom:10px;
	}

Code (markup):

Footer

.footer {
	clear:both;
	position:relative;
	bottom:0px;
	border: 1px;
	border-style: dashed;
	height: 100px;
	width: 98%;
	/* margin: top, right, bottom, left  */
	margin: 0% 0% 0% 1%;
	background-color:#DFF4D9;
	}

Code (markup):