Bottom Footer (AGAIN)

[wrathyimp]

Hi all,

I have searched the web, and tried all possible solutions, but it seems difficult for me to set it for IE, firefox, is smooth as cream, but the culprit is IE. the following are my CSS:

.footerT {  
    position:fixed;
    clear:both;
    background-color: #FFFFFF;  
    width: 795px;
    margin-right: 16px; 
    border-top-color: Gray;
    border-top-width: 1px;
    border-top-style:solid; 
    bottom: 0px; 
}

The page HTML:

<table>
/*Header*/
<tr>
<td></td>
</tr>
/*Content holder*/
<tr>
<td></td>
</tr>
/*Footer*/
<tr>
<td>
<table  class="footerT">
        <tr>
             <td style=" height: 21px;" align="center" >
                   Copyright 2009.
             </td>
        </tr>
        <tr>
             <td align="center" style=" height: 21px;"  >
                    Terms of usage
             </td>
        </tr>
</table>
</td>
</tr>
</table>

So all CSS gurus... help me....

[MJ Pieterse]

i would suggest that you add another style, comment it out and state that only if it's IE should it read the comment, and in that comment have your footer display correctly in IE.

[wrathyimp]

I have tried the position:absolute; it positions the footer, but doesnt scroll, and its not working for Firefox, it stays in broswer size, and when changing the browser size, it doesnt goes to bottom, nor does it scrolls.

[MJ Pieterse]

i'm not going to even try this, i have the same problem in one of my pages, but what i did, was just lock it to my screen. so it's always on top of all content, but at the bottom of the screen. i can help you with that, if you want to do that

[wrathyimp]

Yes, this is what i need, to lock it on the scree, but on the bottom of the browser window.

[MJ Pieterse]

this works for me in IE, Chrome and FF

Your HTML would be

<div class="topdiv"></div>
    <div class="containdiv"></div>
<div class="botdiv"></div>

Your CSS would be

.topdiv {
	yourstyle:whatever;
}
.containdiv {
	yourstyle:whatever;
}
.botdiv {
	height:180px; /*your footer height*/
	position:fixed;
	vertical-align:bottom;
	display:block;
	width:100%;
	left:0;
	bottom:0;
}

[wrathyimp]

It didnt work...

[kvprajapati]

I am sorry to ask you. What kind of problem are you facing?

[Rajdip Ghosh]

width:100%;
	background:url(images/footer_bg.gif) 0 0 repeat-x; */ Footer picture*/
	height:83px; (footer height )
	position:absolute;
	margin:0 auto;
	border:0%;

Try it ......

[kvprajapati]

width:100%;
background:url(images/footer_bg.gif) 0 0 repeat-x; */ Footer picture*/
height:83px; (footer height )
position:absolute;
margin:0 auto;
border:0%;

Try it ......

Are you joking? What is in this code to try?

[MidiMagic]

You can't put something at the bottom of the browser window and have it work on all computers.

There is no reliable way to address the bottom of the browser window, for the following reasons:

1. The Internet is not intended to work that way. A page always starts at the top of the screen, and expands down. It is not like programming an application. You can't have anything defined as "one screen".

2. Different computers have different screen resolutions, so you can't use a set size.

3. Users can do things that change the size and aspect ratio of the browser window, including adding toolbars to the head area (e.g. Google Toolbar), and restoring down the browser window.

4. Different resolutions have somewhat different aspect ratios. And don't forget the new widescreen monitors with 16:9 aspect ratio. The bottom of the screen is a lot higher on the page with those.

5. The IE and FF DOMs are different in what methods they provide to access the screen in JS. W3C does not provide a standard way to do it, and no other browsers provide any methods for this.

Anyone who tries to make a page exactly fill the browser window is wasting his time.

.