I have a strange problem that I'm hoping someone can help me with.
I want a footer at the bottom of my simple HTML page to span the entire
width of the page. I'm not using floats, columns or any other such complex
things. Here is the ridiculously simple markup I'm using:
<body>
<div id="footer">A Simple Footer Test</div>
</body>
And the style sheet markup that goes with this is:
body {
margin: 0;
padding: 0;
}
#footer {
background: #933;
color: #FFF;
position: absolute;
bottom: 0px;
width: 100%;
}
Here's the problem. This shows up in IE just fine (the footer area spans the
entire document width). In Mozilla 1.5, the browser I use most often, the
DIV appears off the page a little (the horizontal scroll bar shows up, even
though it ideally shouldn't). When I make some changes to the #footer CSS
style, it shows up just fine in Mozilla (no scroll bar and it spans the
entire width) but is broken in IE (the footer does not span the entire
document width). Here is that altered code:
#footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
What is going on here? Mozilla gets the latter code snippet right, and that
seems like the better way of doing it (I'm "pinning", so to speak, the sides
of the DIV to a certain location). But IE breaks on that code. Ironically,
I'll be displaying this HTML in IE all the time (I'm writing an application
using the CHtmlView class in MFC), so the first snippet is fine. I just want
to know if I'm going about this the wrong way and why Mozilla (which seems
to be *way* more standards compliant than IE) gets it "wrong".
Any ideas?
Jonah
