[RCD] css help needed

gnul nullchar at gmail.com
Mon Nov 30 21:29:21 CET 2009


On Mon, Nov 30, 2009 at 8:28 AM, Jean-Baptiste Hétier <me at 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/



More information about the Dev mailing list