[support] IE bug zen

[jp.stacey at torchbox.com]

Hi,

> the content always sinks down below the navigation:

I've always found the mixture of

     #sidebar-left { float: left; width: some-width-or-other; }
     #main { margin-left: width-of-sidebar-left; }

very brittle, and prone to doing this exact thing on IEx. I had the
same problems in an attempt to modify (I think it was) the pushbutton
theme. In the end I completely junked it and started afresh (not least
because whichever one it was used tables for layout: when is this,
2001?)

IE could be getting confused by some sort of float-clearing element in
the main column, or by an anomalous width. I see that the #squeeze
element is wider than the #main element in the CSS (640px vs 634px,
line 30/49 in layout.css). This could be pushing the #main element out
to 640px and causing it to drop below the sidebar. Try making sure no
elements in #main are wider than #main itself.

In general, I think the most robust way to do this sort of thing is to
float *all* elements in #container either to the left or right, and
set a width and overflow on #container  so that it surrounds the  
height of the floating elements properly, something like:

     #container { width: 760px; overflow: hidden; }
     #main, #left-sidebar { float: left; }
     #main { width: 600px; }
     #left-sidebar { width: 140px; padding-left: something-less-than-20px; }

You do then have to be aware of IE's double-margin-on-floats bug, and
only ever use padding instead.

Cheers,
J-P


----------------------------------------------------------------
This message was sent using IMP, the Internet Messaging Program.