title: JQuery/CSS - Segmented Control
body: <p>I found a great post over <a href="https://stackoverflow.com/questions/6702985/segmented-control-in-javascript">Segmented Control in Javascript</a> that mentioned a great solution to creating a segmented control, the fiddle is here: <a href="http://jsfiddle.net/LdZk8/1/" rel="nofollow noreferrer">http://jsfiddle.net/LdZk8/1/</a></p>
  
  <p>The jquery is quite short which is great:</p>
  
  <pre><code>$("ul.buttonGroup").click(function (event) {
      $("li", this)
      .removeClass("selected")
      .filter(event.target)
      .addClass("selected");
  });
  </code></pre>
  
  <p>My problem is this is working great in safari and chrome but it isn't rendering properly in firefox.  Just view the fiddle in firefox and hit run and you will see.</p>
  
  <p>Does anyone know how I can correct this? I believe it's CSS related and maybe the webkit elements are being ignoring, but I'm not sure how to fix this for FF.</p>
  
  <p>Thanks!</p>