brettbrewer.com

Programming + Design

Home arrow News arrow Web Technology arrow vertically align a radio button in IE using CSS
vertically align a radio button in IE using CSS PDF Print E-mail
Written by Administrator   
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 gripe....radio 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 >

Search


Brett highly recommends...

Get Your War On: The Definitive Account of the War On Terror 2001-2008

My favorite comic is getting ready to be relased as a single volume. You can preorder now. If you hate the war and love to laugh, do yourself a favor and order this. You can also read all the GYWO comics online for free here.

BBS The Documentary

This is by far the most comprehensive and entertaining documentary I have ever seen regarding the early BBS system. If you're serious about knowing your internet history, or you just want some extra geek-cred, this is your new favorite documentary.

The Nada Chair "BackUp"

The best alternative I have found to overpriced ergonomic office chairs, especially for very low pain around the sacral joint. Works better than my Aeron chair ever did. Also, it comes in navy blue and black, in case you're not into the whole pregnant woman aesthetic (pictured).It's really not meant for sitting on the floor, it's really better for seats that offer poor back support, and works great at sporting events to make sitting in bleachers much more comfortable.

Antec Quiet PC Case

At just under $120 including a 500 Watt power supply, this "quiet pc" case has worked great for me for over 2 years. In fact I now own two great Antec cases/PSUs. For the money, it's hard to beat this combination.

Valid XHTML 1.0 Transitional

© 2008 www.brettbrewer.com

Spam bots check out this page.

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