Sent by Bruce L Giles on 27 February 2006 00:12
At 9:37 PM +0100 02/26/2006, Gunlaug Sørtun wrote:
>Bruce L Giles wrote:
>
>> Is this actually a CSS bug in IE 6 Win, or have I improperly
>> specified something in the CSS? I have managed to hack the CSS to
>> make it work, as on this second page:
>>
>> <http://www.blueflashsoft.com/csstest/bugdemo2.html>
>
>It is indeed a genuine IE/win bug, in that IE needs 'Layout'[1] on an
>element before 'position: relative' takes proper effect as an anchor for
>'position: absolute'.
Thanks for the reference! I hadn't heard of the whole "layout" concept before.
>Adding...
>
>#innercontainer {height: 100%;}
>
>...will fix the positioning-problem, but will also move the 3px-bug from
>the text-paragraphs in #maincontent over to #innercontainer, seen as a
>3px wide brown divide between that and the #navmenu. Thus not a perfect
>"fix" without further hacking of IE/win.
Yes, I see what you mean. I am somewhat familiar with the 3px bug,
but this is the first time I've had a problem with it.
>You may create a more visually pleasing result by deleting...
>
>#innercontainer {
>position: relative; /* Provide context for sidebar positioning */
>}
>
>...and change the #sidebar positions to something like...
>
>#sidebar {
>top: 84px;
>right: 29px;
>}
>
>...where the values relates to body instead. This will only work if the
>final header has fixed dimensions - is an image.
Yes, thanks very much for the tip! My header does have fixed
dimensions, so that turned out to be the best solution for me. Even
with this one, the content of the sidebar is placed one pixel too far
to the left in IE 6 Win, although it renders correctly in every other
browser I've tried. But when I remove the temporary background color,
you really don't notice the difference, and the one-pixel shift
doesn't obscure any other content or borders, so I can live with that.
>I would usually create such 3-column layouts without relying on
>'position: absolute' for any major parts. Easier to make them work
>across browser-land then.
>Many alternatives around, see the css-d wiki for some.
This one began life as a table-based layout, and I've been tasked
with converting it to a no-table CSS-based design. It's been
particularly tricky because of the thick brown "border" which
surrounds two sides of the content area and has to merge seamlessly
with the header, plus the internal 1-pixel-bordered main content and
sidebar areas, which must both be the same height. I experimented
with several floated designs, but eventually gave up on the floats,
because I needed additional floats (for a different purpose) in the
main content area, and a "clear: all" below the floats in the main
content area was causing the rest of the main content to drop below
the bottom edge of the nav menus.
I've looked at a lot of 3-column layout examples, but I hadn't tried
the css-d wiki yet, so I'll do that now and see if they offer any
better solutions.
--
Bruce L. Giles, Oak Ridge, TN USA -- [EMAIL-REMOVED]>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/