Question

In jQuery mobile, the radio buttons get a rounded corner style applied to them.

However, when I use the following code on my mobile website (http://m.fineandcountry.propertylogic.net/) :

<fieldset data-role="controlgroup" data-type="horizontal"> 
    <input type='radio' name='p_department' id='p_departmentL' value='RS' checked='checked' onclick='setBuying();'>
    <label for='p_departmentL'>Buying</label>
    <input type='radio' name='p_department' id='p_departmentR' value='RL' onclick='setRenting();'>
    <label for='p_departmentR'>Renting</label>      
</fieldset>

I get very inconsistent results – if I visit on iPad/iPhone (also Chrome on PC), the corners are all rounded:

Rounded Corners http://i.imm.io/epLF.jpeg

However if I then click “Search”, then click the logo at the top to return to the home page, I get the following (default behavior on Firefox on PC as well):

Is there a rogue piece of JS causing my site to do this? It’s been bugging me for a while and all I can find is issues with jQuery Mobile not rounding the corners.

Answer 1

This seems to be a issue with mootools.js and caption.js.I am not exactly sure about the root cause of this issue.But loading these two js files after you load jquery.mobile-1.0.min.js worked for me. I am not sure if this leads to any other issues.Can you try this and let me know if it works? In the mean while let me see if I can find what really caused the issue.