I am looking to create a vertical list of checkboxes with labels, following the layout below:
My options [x] Checkbox 1
[ ] Checkbox 2
[ ] Checkbox 3
[ ] Checkbox 4
I have implemented the method suggested in this StackOverflow answer by @Magnar, which works well in Chrome and Firefox but causes the checkboxes to display horizontally in IE when wrapped in labels.
Here is my HTML:
<div id="options">
<label>My options</label>
<ul>
<li><label><input type="checkbox">Checkbox 1</label></li>
<li><label><input type="checkbox">Checkbox 2</label></li>
<li><label><input type="checkbox">Checkbox 3</label></li>
<li><label><input type="checkbox">Checkbox 4</label></li>
</ul>
</div>
And here is my CSS:
#options label {
float: left;
}
#options ul {
margin: 0;
list-style: none;
float: left;
}
If anyone can assist me in making this layout work properly in IE as well, I would greatly appreciate it. Additionally, any insights into why it functions differently in IE compared to other browsers would be helpful!