IE td height expansion issue with jeditable

jrivera

Good morning,
I had to do some tinkering with Jeditable and Datatables to get some of the input fields to be dropdowns rather than textboxes.
Functionality wise, everything is working fine. Display wise, Firefox and Safari open the jeditable fields to the height of the cell just fine; IE extends the height of the cell with empty space for apparently no reason causing it to jump around while editing.
I haven't really modified the sample CSS files and this doesn't occur in the examples on the site.
Here's a screenshot of what happens FF vs IE @ http://www.gsgnyc.com/images/ffvie.png

I've already tried all sorts of combinations of removing references to height or setting margins/paddings to 0 and it's driving me mad.

Any input would be appreciated.
Thanks

jrivera

So I saw that there's a "compatibility view" in IE8 which is checked on by default. When I disabled it, it works fine (which makes me wonder what the definition of compatibility is). I don't think we can dictate to the client to use IE8 with compatibility view off. But it's one step closer in understanding that it's the way IE is interpreting CSS.

allan

Sounds like you need a CSS rule specifically for IE6/7 to keep it in order. When in 'compatibility mode' IE8 will use the IE7 rendering engine... You could even use Conditional-CSS to target old IE versions: http://conditional-css.com/ :-)

Allan