twitter facebook dribbble email

IE breaks my radio

Careful! This post is looking a little old and could be inaccurate in many, many ways

Long form design is one of the most challenging aspects of my job, this is in part due to the restrictions of styling these elements, the most difficult being the select box.

This does not bother me so much as long as I am able to give balance to the form to make it usable and fit well within the design. This is not so easy as Internet Explorer does some odd things to Check boxes and Radio buttons.

The Problem

When placing a label or text next to a checkbox or radio button you hope that the text and the input element line up neatly, in my experience this does not happen in IE, instead the browser adds some mysterious padding to the element that cannot be removed by setting the padding or margin to zero.

The Solution

There are solutions where you can float the elements and use margins and padding’s to bring them in-line, or use conditional comments to control the IE output independently. However the method I have begun to use is to implement the following code:

By setting the height to 14px (this appears to be the default height of the element alone) and hiding any overflow the input element appears to line up with any other elements set alongside it. This also seems to do have the same effect on radio boxes but without messing with the output of the element in Firefox.

I can’t say I’ve tested this solution extensively so if anyone finds any problems using this solution I would love to know. However from what I can find out this appears to be one of the cleanest and most unobtrusive solutions.