On Mon, Nov 30, 2009 at 8:28 AM, Jean-Baptiste Hétier me@djib.fr wrote:
I don't think that's the right idea: it doesn't seem to work if you put more elements in any column. You're basically just asking for every column to be at least 190px high.
I agree, it is best not to set a pre-defined fixed height for these floating "columns".
However, using two of the three CSS attributes provided by Eelko Berkenpies, the following JQuery snipit applies the height/min-height dynamically:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript"> //<![CDATA[ $(document).ready(function($) { var maxheight=0; $('#listmenu fieldset').each(function() { if ($(this).height() > maxheight) { maxheight = $(this).height(); } }); $('#listmenu fieldset').css("min-height",maxheight+"px"); $('#listmenu fieldset').height(maxheight); }); //]]> </script>
On my demo page, I added javascript, the title element for XHTML validation, and two additional CSS properties to the fieldset. I tested this page in IE6, FF3.0, FF3.5, Safari4, Opera9.6, Chrome3, and they looked nearly identical.
Demo: http://nullchar.net/rc20091130/listmenu.html
A problem with this method is text-zooming. JQuery does not update the fixed height columns after zoom (without some additional work). If the user reloads the page after zoom, it will be fine. Or if the user zooms before reaching that menu page, it will be fine.
-gnul _______________________________________________ List info: http://lists.roundcube.net/dev/