It's been a while...
I have a slightly unusual design request from a client that's giving me
some grief in IE. In the nutshell, effectively what is required is a
fixed footer of fixed height that sits at the bottom of the viewport.
The content will be centered in another fixed width box and will scroll
when it is longer than the height of the box, and the bottom of this box
will sit directly above said footer. Initially I had achieved this to
good effect using position: fixed and the respective IE hacks (no
hardships there), but now I've been asked if they can have the scrollbar
for the main content sitting right next to that box inside the window.
This has given me a slight headache since I can get it working in
Firefox/Netscape/Opera but NOT in IE6. Something like...
html, body {
margin: 0;
padding: 0;
height: 100%;
border: 0;
}
#content {
width: 730px;
position: absolute;
bottom: 260px;
top: 10px;
left: 50%;
margin: 0 auto auto -365px;
text-align: center;
overflow: hidden;
}
/* hide from ie mac \*/
#content {
overflow: auto;
}/*end hide*/
...does the trick for most browsers, but of course IE6 doesn't like the
use of both position top and bottom without a height in this situation,
and using a height wont work (well, I can't make it work).
So, to reiterate, does anyone know of a way to have a fixed width box
horizontally centered but always a fixed distance from the bottom of the
viewport, whilst allowing the content to scroll using overflow. I hope
that all made sense. Any ideas?
TIA
Mark
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
