Label and tickbox alignment issue

[kurt.santo]

I struggle to align label and tickbox while having all tickboxes in same vertical line with FF, Netscape and Safari (works well with IE 6 and 7). The test page is under:http://www.jalp.co.uk/web/formTest.htmIt would be great if someone gave me a hint...Kurt

[Ingolme]

This is confusing. I don't see what's forcing to <input> element to the right in the first place.I'm not sure, but you could try the following CSS with your mark-up:

<style type="text/css">div.counties div div { line-height: 1.5em;}div.counties div div input { float: right;}</style>

[boen_robot]

Isolate what you have now as styles for IE6 and IE7 only (with conditional comments), and use display:table for the rest.To be more precise, give a class to the div surrounding all divs that have inputs. For example "checks", i.e.

<div id="checks"><div><label for="field1">field1</label>  <input type="checkbox" name="field1" id="field1" /></div><div><label for="field2">field2</label>  <input type="checkbox" name="field2" id="field2" /></div><div><label for="field3">field3</label>  <input type="checkbox" name="field3" id="field3" /></div><div><label for="field4">field4</label>  <input type="checkbox" name="field4" id="field4" /></div></div>

and then in CSS:

#checks {display:table;}#checks > div {display:table-row;}#checks > div > * {display:table-cell;}

This will also work for IE8.

[jeffman]

That created very strange checkboxes in FF. Then I took out this line

#checks > div > * {display:table-cell;}

and it looked the way I think Kurt wants it. Only, I've never used these particular display formats before, so I don't know what the consequences are, cross-browser or otherwise.

[kurt.santo]

That created very strange checkboxes in FF. Then I took out this line

#checks > div > * {display:table-cell;}

and it looked the way I think Kurt wants it. Only, I've never used these particular display formats before, so I don't know what the consequences are, cross-browser or otherwise.

Superb! Works well. But also had to leave "#checks > div > * {display:table-cell;}" out, did not do anything really. I would have thought it is necessary, but it works without. But this means that the table has no <td> as such, am I right? Could that be a problem?Kurt