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

I recent­ly came up against a sit­u­a­tion where I want­ed to add rows to a table via javascript.

Not a prob­lem with jQuery, EXCEPT that my table rows were being added with ‘style=“display:block“‘.

What’s wrong with that, you ask? Well, in Fire­fox the row was being append­ed to the table but it looked all scrunched into the first cell like so:

borkedtablerow

OK, fine. Let’s give it a dis­play prop­er­ty 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 dis­play of “block.”

The solu­tion turns out to be to set the dis­play val­ue to an emp­ty string. Then, each brows­er will give the row its default val­ue and every­one is hap­py.

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 hic­cup, and I think the solu­tion may be help­ful to oth­ers.

The basic set­up is this:

Lim­it­ed space means no room for labels in a login form. So instead we used a pre­set val­ue in the input ele­ments, 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 descrip­tive text is to use the onfo­cus event like so:

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

Con­tin­ue read­ing “Prob­lem with input focus on Safari”