browser compatibility issue

see code below..

 <div style="overflow:auto;width:250px;height:75px;border:1px solid #336699;padding-left:5px">
<label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'> PHP</label><br>
<label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'> LINUX</label><br>
<label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'> APACHE</label><br>
<label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'> MYSQL</label><br>
<label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'> POSTGRESQL</label><br>
<label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'>SQLITE</label><br> </div>

<script>
function highlight_div(checkbox_node)
{
    label_node = checkbox_node.parentNode;


    if (checkbox_node.checked)
    {
        label_node.style.backgroundColor='#0a246a';
        label_node.style.color='#fff';
    }
    else
    {
        label_node.style.backgroundColor='#fff';
        label_node.style.color='#000';
    }
}
</script>

it is listbox showing entries, where user can select multiple 开发者_高级运维entries..when he clicks an entry, the selected gets highlited by blue color for the entire row of the entry... this highlighting works only in IE , not IN MOZILLA...In mozilla, its gets highlited partially.. wats the workaround for this...

help please thanks in aadvance....

---

the different seems to be, that in firefox <label> is an inline element, while in i.e. it's a block element (block elements ar basically 100% width with linebreak after).

so the fix is to make labels block level elements via css:

label {
    display: block;
}

and get rid of <br>s, since you don't need them anymore, check here.

---

<div style="overflow:auto;width:250px;height:75px;border:1px solid #336699;padding-left:5px"><label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'> PHP</label><br><label style="{width:250px;}"><input type="checkbox" name="wow[]" onclick='highlight_div(this);'> LINUX</label><br></div> <script>function highlight_div(checkbox_node){  label_node = checkbox_node.parentNode;   if (checkbox_node.checked){label_node.style.backgroundColor='#0a246a'; label_node.style.color='#fff';} else    {label_node.style.backgroundColor='#fff';label_node.style.color='#000'; }}</script>

---

Why do you set curly brakets over style content? - <label style="{width:250px;}"> ? You should use <label style="width:250px;">