Question

I have a form, and visually I’d like to make all radio buttons appear one per line like:

[]Yes
[]No

rather than their default of displaying like:

[]Yes []No

Here is the CSS I’m using to accomplish that (I’ve omitted the extraneous parts):

input.radio
{
    display:block;   
}

label.choice
{
    display: block;
    margin:-1em 0 0 25px;
}

and the corresponding HTML:

<ul>
        <li>
            <input name="yn1" id="y1" class="radio" type="radio" value="yes"  />
            <label class="choice">Yes</label>

            <input name="yn1" id="n1" class="radio" type="radio" value="no"  />
            <label class="choice">No</label>

        </li>
</ul>

My target browsers are (IE7+, FF3+) and it works fine on all of the above like that.

But then I have this other feature, I want to highlight the background of the currently selected form question. All my form questions are list items, so this seems simple enough, add some CSS to set the background color on mouseover/mouseout.

Here’s the CSS and JQuery for the highlight:

.highlighted {
    background-color: yellow;
}

$("li").mouseover(function () { 
    $(this).addClass('highlighted'); 
});

$("li").mouseleave(function () { 
    $(this).removeClass('highlighted'); 
});

This also works fine on all my target browsers.

BUT… When I combine those two pieces together at the same time, it explodes under IE7, and the radio buttons disappear when the highlight appears, making the form completely unusable.

Help! Is this possible? How could I fix this so both of these features work at the same time?

Answer 1

This was the problem:

label.choice{
    margin:-1em 0 0 25px;
}

IE7 doesn’t like the negative -1em margin.
To achieve your desired layout, remove display:block and wrap each input/label pair in a div instead. Also, you can use css to do the hover seeing as you’re not supporting IE6 (win!)

Demo: http://jsfiddle.net/mjcookson/KtUvp/9/

html

<ul>
     <li>
          <div class="form-item">
              <input name="yn1" id="y1" class="radio" type="radio" value="yes" />
              <label class="choice">Yes</label>
           </div>
           <div class="form-item">
               <input name="yn1" id="n1" class="radio" type="radio" value="no" />
               <label class="choice">No</label>
           </div>
     </li>
</ul>

css

input.radio{
}

label.choice{
  margin-left:25px 
}
.form-item{width:300px}
ul li:hover{background:yellow}