IE problem with radio buttons

  • Profile Image
    Asked on April 27, 2011 at 05:54 AM


    The form here shows radio buttons hidden to give the effect of buttons.

    Both the following CSS remove the radio buttons from view

    visibility: hidden;

    However, in IE only one cannot make use of the images as buttons as the above CSS elements disable the radio function.

    Without using the full source code is there a way to perhaps use conditional commenting for IE (I don't mind if the buttons can be viewed in IE as long as they work)

    Are there any ideas around this theme I could try in the CSS (I notice the html icon < turns into a weird ampasand thing in custom CSS area) 

    <!--[if IE 6]>

    Thanks for your kind help

    Regards Mark


  • Profile Image
    Answered on April 27, 2011 at 12:58 PM

    Hello Mark,

    Unfortunately you cannot make an IE CSS hack as the if conditions should be outside the <script> tags.

    My better solution is this:

    1. Remove display property inside #id_2 .form-radio id and class.

    #id_2 .form-radio {
    margin-left: 22px;
    display: none;

    2. Add these to your CSS injection:

    label { display: block; cursor: pointer; line-height: 20px; padding-bottom: 9px;  }
    .form-radio-item input { position: absolute; left: -9999px; }

    3. Unfortunately you will need to add a javascript for the IE bug in fixing images inside labels for it to be clickable.  Add this script if you have an external web page:

       window.onload = function(){
      if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows")>-1)
        var a = document.getElementsByTagName("label");
        for(var i=0,j=a.length;i<j;i++){
          if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG")
            a[i].childNodes.item(0).forid = a[i].htmlFor;
            a[i].childNodes.item(0).onclick = function(){
              var e = document.getElementById(this.forid);
                case "radio": e.checked|=1;break;
                case "checkbox": e.checked=!e.checked;break;
                case "text": case "password": case "textarea": e.focus(); break;

    In IE, without the script, you can only click the text label for your contents to show up.

    This is how the script will work with everything above:

    Hope this helps.

  • Profile Image
    Answered on April 28, 2011 at 06:34 AM


    You are a true genius. Expect a large paper bag of cash to land on your desk most shortly.

    Most graeful

    Thanks, Mark

  • Profile Image
    Answered on April 28, 2011 at 09:07 AM

    Hello Mark,

    I'm happy to know that my solution suits you. :)

    If you have other concerns or inquiries, just let us know.

    Thanks and warm regards,