Programming + Design

vertically align a radio button in IE using CSS PDF Print E-mail
Written by Brett Brewer   
Monday, 25 February 2008

It's amazing. I've been doing CSS-based layout since about 2001 and I still discover new css browser bugs and annoyances daily. Here's a solution to my latest button layout in Internet Explorer. It seems that IE does not like to properly lay out a radio button on the text baseline when using font sizes of 12px or smaller no matter what you do. You can mess with the "vertical-align" attribute and adjust margins until you're blue in the face and you will never be able to align radio buttons with an 11pixel font using CSS unless you explicity set the size of your radio buttons. In IE, radio buttons seem to default to a visual display size of about 12x12 pixels, but they always seem to take up some extra layout space with some padding or margins that you can never get rid of. Fortunately there's an easy fix for this...simply specify a style for all your radio buttons with a specific width and height of 12px. Then you can lay out your buttons and they will align properly with an 11px font size. If you have trouble properly aligning your radio buttons with their labels in IE, just adjust the radio button dimensions to match the pixel size of your font and you should be good to go. The same should hold true if you are using relative font sizes.

Hate IE. Hate it real good. In fact, I'd like to encourage you to hate all modern browsers. Yes Firefox too. They are all STILL rife with CSS display bugs that continue to make it much harder than it should be to perform the formerly simple design task of drawing a box on a screen that can fit its contents. 

Last Updated ( Monday, 25 February 2008 )
< Prev   Next >


Who's Online

We have 1 guest online

© 2017
Joomla! is Free Software released under the GNU/GPL License.