Solution to “display:table-row” causing pain and suffering with IE

I recently came up against a situation where I wanted to add rows to a table via javascript.

Not a problem with jQuery, EXCEPT that my table rows were being added with 'style="display:block"'.

What's wrong with that, you ask? Well, in Firefox the row was being appended to the table but it looked all scrunched into the first cell like so:

borkedtablerow

OK, fine. Let's give it a display property of "table-row." That should work, right? Yes, it works here but not in IE. IE hates this, in fact. IE wants to get a display of "block."

The solution turns out to be to set the display value to an empty string. Then, each browser will give the row its default value and everyone is happy.

source: http://cormacscode.wordpress.com/2008/11/28/show-hide-table-row-in-firefox-versus-ie/

Problem with input focus on Safari

I had a javascript hiccup, and I think the solution may be helpful to others.

The basic setup is this:

Limited space means no room for labels in a login form. So instead we used a preset value in the input elements, like so:

  1.  
  2. <input value="Username" name="username" type="text" />
  3. <input value="Password" name="password" type="text" />
  4.  

Which looks like this:



The easy way to blank out the descriptive text is to use the onfocus event like so:

  1.  
  2. onfocus="this.value=''"
  3.  

Continue reading