browser compatibility issue

Question

hi all, 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....

Answer 1

<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>

Answer 2

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.

Answer 3

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