display: block; compatibility?

[knowram]

I found a great tutorial on making a scrollable checklist at c82.net which works great on ever browser but Safari. In Safari clicking on the text will not select the check box. I am not sure but I am thinking it might have something to do with display: block compatibility with checkboxes in Safari but I am not sure. Here is the code from c82.net/article.php?ID=25.

[code]
<style>
.checklist {
    border: 1px solid #ccc;
    list-style: none;
    height: 20em;
    overflow: auto;
    width: 16em;
}

.checklist, .checklist li { margin: 0; padding: 0; }

.checklist label {
    display: block;
    padding-left: 25px;
    text-indent: -25px;
}

.checklist label:hover { background: #777; color: #fff; }

</style>

<form action="#" method="get">
    <ul class="checklist">
        <li><label for="o1"><input id="o1" name="o1" type="checkbox" /> Aenean malesuada ante eget tellus</label></li>
        <li><label for="o2"><input id="o2" name="o2" type="checkbox" /> In posuere augue id velit</label></li>
        <li><label for="o3"><input id="o3" name="o3" type="checkbox" /> Nullam a dui ac augue adipiscing sodales</label></li>
        <li><label for="o4"><input id="o4" name="o4" type="checkbox" /> Vivamus consectetuer ante eget urna</label></li>
        <li><label for="o5"><input id="o5" name="o5" type="checkbox" /> Aliquam id felis cursus purus tristique condimentum</label></li>
        <li><label for="o6"><input id="o6" name="o6" type="checkbox" /> Suspendisse posuere lectus vitae velit consequat volutpat</label></li>
        <li><label for="o7"><input id="o7" name="o7" type="checkbox" /> Fusce condimentum nulla et tortor.</label></li>
        <li><label for="o8"><input id="o8" name="o8" type="checkbox" /> Proin consequat faucibus mi</label></li>
        <li><label for="o9"><input id="o9" name="o9" type="checkbox" /> Etiam a lectus quis massa viverra laoreet</label></li>
        <li><label for="o10"><input id="o10" name="o10" type="checkbox" /> Pellentesque gravida lorem vel odio</label></li>
    </ul>
</form>

[/code]

It would be great if a work around is out there.
thanks for any help.

[michaellunsford]

apparently safari doesn't properly support the label tag (the display:block doesn't have anything to do with it). The only workaround I found was using javascript's onclick.

<label for "o1" onclick="var obj=document.getElementById('o1');obj.checked=eval(! obj.checked);">