Aligning check boxes vertically in IE using CSS

I just finished working on a project and while I was in the final testing phase, I realized that there were some check boxes in a form that were not displaying correctly in IE. I found a few answers on Google but, these did not fit to my CSS styling properties and I needed a quick fix without redoing a bunch of CSS.

So, I came up with a simple solution of adding a class to the check boxes.

Here is the my form. Just a list of the days of the week. I need them to display one below the other.

<form id=”stylized” name=”email_reminders” method=”post”>
<label for=”repeat_sunday”>Repeat:</label>
<input type=”checkbox” name=”repeat_sunday” value=”1″ />Sunday<br />

<label for=”repeat_monday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_monday” value=”2″ />Monday<br />

<label for=”repeat_tuesday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_tuesday” value=”3″ />Tuesday<br />

<label for=”repeat_wednesday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_wednesday” value=”4″ />Wednesday<br />

<label for=”repeat_thursday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_thursday” value=”5″ />Thursday<br />

<label for=”repeat_friday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_friday” value=”6″  />Friday<br />

<label for=”repeat_saturday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_saturday” value=”7″ />Saturday<br />

</form>

 

This was the orignal CSS styling for the form.

.my_form{
width:600px;
font-family:Arial, Helvetica, sans-serif;
}

#stylized{
}

#stylized label{
width:160px;
float:left;
}

#stylized input{
float:left;
}

The problem was caused by the addition of  float:left style to the input box. This made the check boxes display in all possible directions in IE. I could have got the result I needed by saying float:none for the input boxes. But, I  needed the float:left for all the other input fields to align properly. So, I added a class=”checkbox” on all the checkbox fields.

<input type=”checkbox” class=”checkbox” name=”repeat_sunday” value=”1″ />Sunday<br />

Then, I added a CSS style to the checkbox class like this:

#stylized input.checkbox{
float:none;
}

This makes sure that while all the input boxes are floating to the left like I wanted, the check boxes are not floating but are displayed one below the other.