IE table cell overlap when input overflow:visible

[jackysee]

When putting element inside table, IE would strangely overlapping table cells.

See example: http://jsbin.com/uxuzo3/12

[jonathantneal]

I can think of two ways to correct this.

1. with css expressions as seen @ https://github.com/jonathantneal/normalize.css/blob/master/normalize.css#L312
2. with attribute selectors like [type=button] etc. (which means losing IE6 support or using the _ hack and letting IE6 get the bug.)

[jackysee]

this happens in IE7 also, u may need to use star hack

On Thu, Jun 23, 2011 at 3:50 PM, jonathantneal <
reply@reply.github.com>wrote:

I can think of two ways to correct this.

1. with css expressions as seen @
   https://github.com/jonathantneal/normalize.css/blob/master/normalize.css#L312
2. with attribute selectors like [type=button] etc. (which means losing IE6
   support or using the _ hack and letting IE6 get the bug.)

Reply to this email directly or view it on GitHub:
#18 (comment)

Best Regards,
Jacky See

[jonathantneal]

No need. In my normalize.css I let the attribute selectors do the work, which IE7 supports. I use the css expressions exclusively to work around the lack of attribute selector support in IE6.

[jackysee]

That's right. I miss the codes after the line.

On Thu, Jun 23, 2011 at 4:03 PM, jonathantneal <
reply@reply.github.com>wrote:

No need. In my normalize.css I let the attribute selectors do the work,
which IE7 supports. I use the css expressions exclusively to work around
the lack of attribute selector support in IE6.

Reply to this email directly or view it on GitHub:
#18 (comment)

Best Regards,
Jacky See

[jonathantneal]

Unless and until a better solution comes around, necolas should probably move the visibility property into the attribute selector css rule block so IE7 will look good though IE6 will still suffer.

[necolas]

Could also use something like this as a compromise for IE6

button, input {overflow:visible}
table button, table input {overflow:auto;}

But that's kind of ugly and I'm not keen on increasing the specificity of selectors (even if it's for a property that is unlikely to be changed again).

[necolas]

Done lots of tests. Might have to use the code above because all other 'solutions' result in whitespace issues in IE6/7 when within a table. I'd also rather have IE6/7 behaving in the same way.

[7fe]

@necolas yeah I agree, consistence is definitely most important, so I would go with the IE6 and IE7 combo.

For those looking for a cross browser no javasrcipt solution, I have just been wrapping the elements in label elements.
Then you can style the label elements to your heart's content.

<label><input type=submit></label>

More info here : http://stackoverflow.com/questions/5806260/html-invisible-submit-input-pitfalls-and-advantages