CheckBox & Radio Alignment issues

Not only different browsers, different fonts, different text size will also behave differently.

Reset Form checkbox & Radio

Because different browser parsing is not the same, some are the default margin, some are the default padding, there are ie6,7 and padding even if set to 0, the occupied space is still relatively large, so there must be reset, so that can solve a lot of unnecessary trouble.

The following are solutions for 14px Arial fonts:

1. CSS Code

. Form{Font:14px/18px Arial, Helvetica, Sans-serif; }. Form input,. Form Label{vertical-align:Middle; }. Form Label{Margin-right:6px; }. Form_checkbox,. Form_radio{margin:0 3px 0 0;/*spacing to the right text*/padding:0;width:13px;Height:13px;/*IE7 IE6 set different values according to the different font-size*/*vertical-align:1px;}

2. HTML code

<formname= "Form1"Method= "POST"Action=""class= "form">  <P>    <inputtype= "checkbox"name= "Checkbox4"ID= "Checkbox4"class= "Form_checkbox">    <label for= "Checkbox4">Checkbox4</label>    <inputtype= "checkbox"name= "Checkbox5"ID= "Checkbox5"class= "Form_checkbox">    <label for= "Checkbox5">Checkbox5</label>    <inputtype= "checkbox"name= "Checkbox6"ID= "Checkbox6"class= "Form_checkbox">    <label for= "Checkbox6">Checkbox6</label>  </P>  <P>    <inputtype= "Radio"name= "Radio"ID= "Radio4"value= "Radio4"class= "Form_radio">    <label for= "Radio4">Radio4</label>    <inputtype= "Radio"name= "Radio"ID= "Radio5"value= "Radio5"class= "Form_radio">    <label for= "Radio5">Radio5</label>    <inputtype= "Radio"name= "Radio"ID= "Radio6"value= "Radio6"class= "Form_radio">    <label for= "Radio6">Radio6</label>  </P></form>

3.

CheckBox & Radio Alignment issues