Facing IE8 and Firefox Alignment issue of the text of a checkbox

Question

I am using the checkbox in the following manner. The screen shot in Firefox enter image description here

And the sceen shot in IE8 is here

enter image description here

Here is the code

<div>
   <div>Testing :</div>
   <div><input type="checkbox" value="1"/> One</div>
   <div><input type="checkbox" value="2"/> Two</div>
   <div><input type="checkbox" value="3"/> Three</div>
</div>

How to align the text at the center vertical in both the browsers?

Dipak · Accepted Answer · 2012-10-25T06:13:13.200

1

Write this in your CSS -

input[type="checkbox"]{
    vertical-align: middle;
}

Working Demo

Inline CSS trick works on WIN XP. Try -

<div><input type="checkbox" value="1" style="vertical-align: middle;" /> One</div>

edited Oct 25 '12 at 06:13

answered Oct 25 '12 at 06:00

Dipak

11,930
1
30
31

Its not working. Even in the demo it doesn't look like it is center vertical – coderslay Oct 25 '12 at 06:09
I am on a windows xp and checking it on IE8 and firefox and it is not at the middle :( – coderslay Oct 25 '12 at 06:13
I tried that also... still it is the same as in the screen shot even in the demo – coderslay Oct 25 '12 at 06:17
1

@Coder_sLaY Here is your solution - http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers – Dipak Oct 25 '12 at 06:28

score 0 · Answer 2 · answered Oct 25 '12 at 06:24

0

Try using with different css :

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->

write your own css for checkbox in this file for ie 8

answered Oct 25 '12 at 06:24

rusly

1,504
6
28
62

Facing IE8 and Firefox Alignment issue of the text of a checkbox

2 Answers2