Question

I want to build a HTML form with semantic and lightweight markup. Each (label, input) is nested inside a li node, child of an ul, child of the form. As far as the CSS is concerned, any ul inside a form should be laid out as a table, list items should be laid out as table rows and both labels and inputs as table cells.

Here’s a demo

I’ve tried the above demo in Chrome 17.0.963.79, Opera 11.61, Safari 5.0.2, Firefox 8.0 and even IE 8.0.7601.17514 and it looks the way I want it to.

However, it seems that IE 9.0.8112.15421 gets some computation wrong: the elements take up the space I want them to, the dev tools show no undesired margin or padding, yet apparently the form containing the li (never the li itself, nor the ul! — see the demo) gets the width of the label added to it twice, resulting in some unaccounted-for space, resulting in a horizontal scrollbar being added to that ancestor. Why is that happening? How could it be fixed?

Answer 1

I added a float:right to form li input and got a result in IE9 that was similar to Chrome.