Georg, Thanks so much - this is just what I needed!
-Ann --- Gunlaug Sørtun <[EMAIL PROTECTED]> wrote: > 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/ > ______________________________________________________________________ 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/
