Why does the JQuery Slider choose an input box?

Question

I've set up a new osclass.org site.

The jQuery Slider (on the left) works perfect - but the right textbox under these slider does not work in some browsers (chrome, firefox). If I click in this input -> input left is marked.

I've installed Firebug - but I can't find the error. Thanks very much for a hint!

Answer 1

You should not really embed a div within a label:

<label> Preis (in Euro)
     <div class="ui-slider-box">
       <div id="price-range" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a></div>
       <input type="text" id="priceMin" name="sPriceMin" value="" size="7" maxlength="7" class="min">
       <input type="text" id="priceMax" name="sPriceMax" value="" size="10" maxlength="10" class="max">
     </div>
</label>

You should have the label by itself above the div:

<label> Preis (in Euro)</label>
     <div class="ui-slider-box">
       <div id="price-range" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a></div>
       <input type="text" id="priceMin" name="sPriceMin" value="" size="7" maxlength="7" class="min">
       <input type="text" id="priceMax" name="sPriceMax" value="" size="10" maxlength="10" class="max">
     </div>