Three IE Form CSS Problems & Solutions
I was recently writing some CSS for a form, and ran into a few IE problems/bugs which I’ve either not found documented elsewhere, or at least not found my solutions mentioned, so I figured it would be beneficial to post them here.
Checkbox/Radio Margins
I’m not entirely sure if this should be considered a bug, or if it’s just simply the way IE likes to render these elements, but as you may well know, both of these elements appear to have a three or four pixel margin around them, but it can’t be removed with margin: 0;. There are a few suggestions around for fixing this, but I didn’t find any using negative margins, which as it happens, work perfectly, like so:
input.checkbox,
input.radio { margin: -4px -3px -3px -4px; }
This problem exists in both IE6 and IE7, and this solution works in both.
Considerations
Remeber that reducing the margins removes the clickable white-space around the element, potentially reducing usability.
Legend Left Margin/Padding
Again, bug or feature, who knows? But by default you get a seven pixel gap on the left hand side of legend element text (in addition to the fieldset left padding), which can’t be removed by setting the margin or padding to zero. However, negative margins to the rescue again and we can fix that:
legend { margin-left: -7px; }
This problem exists in both IE6 and IE7, and this solution works in both.
Fieldset border-top: 0; and Legend display: none;
This is a fairly specific problem that most people probably never run into, but I had a couple of fieldsets which I wanted to hide the legends for and ran into a problem. When you have a fieldset with borders, but no top border, and the legend set to display none you still get a top border. Make the legend visible and no problem, the border goes away. The only way I found to fix this was by setting the border colour to the same as the fieldsets background colour, which is in no way ideal.
This problem exists in both IE6 and IE7, and this solution works in both.