[jifty-devel] IE rendering problem for empty HTML elements

Agent Zhang agentzh at gmail.com
Sat Dec 2 06:45:25 EST 2006

Hi, there~

Over the past week I was wondering why my Jifty app's pages which were
displayed fine in Firefox had some weird bland regions around the
input fields while loaded by IE 6.

And I've also noticed that Wifty had the same problem in IE. (Please
look at the search bar in the upper-right corner of the jifty home
page in IE.)

Experiments have shown that IE *does* assign page room to many HTML
elements which have no content at all. For example, the following HTML

  <span class="preamble text  argument-keys" ></span>
  <label class="label text  argument-keys"
  <span class="error text  argument-keys" id="errors-J:A:F-keys-search"></span>
  <span class="warning text  argument-keys"
  <span class="canonicalization_note text  argument-keys"

all occupy significant (blank) space in my page, which makes my form
look terrible there. :(

So I ended up with some ugly CSS like this:

  table.search .preamble { display: none; }
  table.search .label { display: none; }
  table.search .warning { display: none; }
  table.search .canonicalization_note { display: none; }

But they're hard-coded. What if my form has a validation error after
the user submits it? Okay, I can always apply some evil JavaScript
hack to my templates but that's even more ugly...

What I really want is that Jifty::Web::Form::Field's render_XXX
methods generate "cleverer" HTML code. I've thought about suppressing
the empty element outputs completely while no content is found. But
the Jifty documentation has claimed that "even if there are none --
AJAX could fill it in". Oh well...

How about adding C<style="display: none;"> to the tags which are
actually empty? I'm not sure.

Suggestions or even fixes will be very very appreciated. :)


More information about the jifty-devel mailing list