Ann Adamcik wrote:
> I've tried positioning the inner div absolutely, specifying all 4
> edges. This works in FF, but not Opera or IE. I then tried
> specifying just the left and bottom edges, with margins for the top
> and right sides. The top margin doesn't work, and the right margin
> doesn't work on IE.
>
> Can anyone suggest a cross-browser method to accomplish this?
>
> http://indigopear.com/vanduuren/index.html
Info: Firefox, Opera and Safari can absolute-position elements relative
to all 4 edges of a positioned parent, but IE/win can _only_ handle two
edges. That's one reason AP won't work cross-browser.
It will work if you _don't_ position #content at all (leave it in the
flow), and set _margins_ to keep it in place (top, left, right).
You must then use javascript to "plug in" the correct height for
#contentPanel so it corresponds to available height in window.
You already have 2 javascript-solutions that affect
positioning/height on screen, so you'll just need another one.
The basic CSS may then look like this (which I have tested) :
body {
margin: 0 /* not 'auto' */;
padding: 12px;
position: relative;
text-align: center; /* ie 5 */
}
#main {
position: relative;
background: url("images/bg.jpg") no-repeat bottom left;
margin: 0 auto;
text-align: left;
max-width: 1000px;
min-width: 530px;
border: solid 1px #fff;
}
#content {
border-top: 1px solid #bdcadf;
border-right: 1px solid #d5d7db;
border-left: 1px solid #d5d7db;
border-bottom: 1px solid #d8d8d8;
padding-bottom: 2px;
margin: 36px 91px 0 91px;
}
#contentPanel {
border: 1px solid #bababa;
background: url("images/content_bg.gif") repeat-x bottom left;
overflow: auto;
height: 500px /* must be redefined with js */;
}
...that 'height: 500px;' will work on windows no less than 775px high -
cross-browser. That's the available height until javascript positioning
starts pulling #main off screen. Scroll-bar, 'overflow: auto;', needed
if you want content to be accessed.
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
