On Mon, Nov 30, 2009 at 3:40 PM, A.L.E.C alec@alec.pl wrote:

You're guys a good webmasters. I'm working on messages list menu and got a few problems. I've prepared it in two versions, vertical and horizontal:

http://194.150.197.210/rc-dev/listmenu.html http://194.150.197.210/rc-dev/listmenu-v.html

1. I'm not sure which is better (vertical one is maybe too high?)
2. Save button in FF3 (3.0.15) hasn't got left,right,bottom border. It

becomes visible on mouse over. 3. If horizontal variant is better, how to make the height of all

<fieldset>'s to be the same (of course not in pixels, height:150px is working, but something like 100% of the menu div would be better)? 4. Not tested with IE.

-- Aleksander 'A.L.E.C' Machniak http://alec.pl gg:2275252 LAN Management System Developer http://lms.org.pl Roundcube Webmail Project Developer http://roundcube.net _______________________________________________ List info: http://lists.roundcube.net/dev/

1. I like horizontal. :)
2. I can't test / track it down here at the moment.
3. Something like this: http://berkenpies.nl/rc-mail.html ?
4. See #2

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/