Home › Checkbox alignment in IE and Firefox

Checkbox alignment in IE and Firefox 

Displaying notes 1 - 3 of 3

James
Joined:
02/21/2009
Posts:
32

February 22, 2009 00:12:50    Last update: February 23, 2009 02:55:31
This note records my struggle to get a checkbox aligned with its label in Firefox and IE.

  1. Starting HTML code. Use default attributes. Both checkbox and label float to the left. 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<style type="text/css">
	input {
		display: block;
		float: left;
		clear: left;
	}

	label {
		display: block;
		float: left;
		clear: none;
	}
	</style>
</head>
<body>
	<form>
	<div style="width:350px">    
	<input type="checkbox" id="cb" /><label for="cb">Label text one</label><br/> 
	
	<input type="checkbox" id="cb2" />
	<label for="cb2">
	Label text two Label text twoLabel text twoLabel text twoLabel 
	text twoLabel text twoLabel text twoLabel text two
	</label><br/>
	
	<input type="checkbox" id="cb3" />
	<label for="cb3">
	Label text two Label text twoLabel text twoLabel text twoLabel 
	text twoLabel text twoLabel text twoLabel text two
	</label><br/>
	</div>
	</form>
</body>
</html>


    IE looked OK. Firefox is messed up. Long label shifted to the next line.

    IE 7:

    Firefox 3.0.6:


  2. Set width of label to that of the containing DIV: 
    <style type="text/css">
label {
    display: block;
    float: left;
    clear: none;
    width: 350px;
}
</style>


    Both IE and Firefox shift the label to the next line. That's reasonable because the DIV isn't wide enough to contain the label and the browser tried its best to render the label properly.

    IE 7 and Firefox 3.0.6:


  3. Set width of label to be less than the containing DIV: 
    <style type="text/css">
label {
    display: block;
    float: left;
    clear: none;
    width: 300px;
}
</style>


    Both IE and Firefox looked fine.

    IE 7 and Firefox 3.0.6:


  4. Set font size for label: 
    <style type="text/css">
label {
    display: block;
    float: left;
    clear: none;
    width: 300px;
    font-size: 12px;
}
</style>


    Neither IE nor Firefox aligned the label properly.

    IE 7:

    Firefox 3.0.6:


  5. Set the font-family to sans-serif: 
    <style type="text/css">
label {
    display: block;
    float: left;
    clear: none;
    width: 300px;
    font-size: 12px;
    font-family: sans-serif;
}
</style>


    Neither IE nor Firefox aligned the label properly.

    IE 7:

    Firefox 3.0.6:


  6. Set the height of the checkbox to that of the label font size: 
    <style type="text/css">
input {
    display: block;
    float: left;
    clear: left;
    height: 12px;
}

label {
    display: block;
    float: left;
    clear: none;
    width: 300px;
    font-size: 12px;
    font-family: sans-serif;
}
</style>


    IE looked fine but Firefox is messed up.

    IE 7:

    Firefox 3.0.6:


  7. Do not float the label; remove height for checkbox: 
    <style type="text/css">
input {
    display: block;
    float: left;
    clear: left;
}

label {
    display: block;
    clear: none;
    width: 300px;
    font-size: 12px;
    font-family: sans-serif;
    margin-left: 20px;
}
</style>


    Neither aligned the label properly.

    IE 7:

    Firefox 3.0.6:


  8. Add height back to checkbox: 
    <style type="text/css">
input {
    display: block;
    float: left;
    clear: left;
    height: 12px;
}

label {
    display: block;
    clear: none;
    width: 300px;
    font-size: 12px;
    font-family: sans-serif;
    margin-left: 20px;
}
</style>


    IE looked fine but Firefox is messed up.

    IE 7:

    Firefox 3.0.6:


  9. Set checkbox margin and padding to 0: 
    <style type="text/css">
input {
	display: block;
	float: left;
	clear: left;
	height: 12px;
	padding: 0;
	margin: 0;
}
</style>


    Both looked OK.

    IE 7:

    Firefox 3.0.6:



Conclusion: to properly align your checkbox with its label in both FF and IE, you have to set height of the checkbox to that of the label font size, and set padding and margin of the checkbox to 0. IE wouldn't behave unless height is set. FF needs both padding and margin set to 0.

[ Comment  | Tags  | Links  ]
3 comments  
James
Joined:
02/21/2009
Posts:
32

March 10, 2009 21:11:18    Last update: March 10, 2009 23:01:24
iretuotiowur,

The reason I used block to render the labels is to avoid long labels from flowing underneath the checkbox. I'm not sure I understand your proposed solution. As far as I know, text-indent only applies to the first line of a paragraph. And I just found that Firefox does not honor it for labels (IE indents the first line as usual).

For example, this page: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
    body {
        width: 350px;
	font-family: sans-serif;
	font-size: 12px;
	text-indent: 35px;
    }
</style>
</head>
<body>
<p>Paragraph.
A long paragraph. A long paragraph. A long paragraph. 
A long paragraph. A long paragraph. A long paragraph. 
A long paragraph.
</p>

<label>Label.
A long label. A long label. A long label. 
A long label. A long label. A long label. 
A long label.
</label>
</body>
</html>


renders like this in Firefox:

[ Comment  | Tags  | Links  ]
 
Dr. Xi
Joined:
04/09/2007
Posts:
507

March 10, 2009 23:42:59    Last update: March 10, 2009 23:44:56
It seems that dt, dd doesn't exactly line them up either. With this HTML page: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
    body {
        width: 350px;
        margin: auto;
    }

    label {
	font-family: sans-serif;
	font-size: 12px;
    }

    dt {
        float: left;
        clear: both;
    }

    dd {
        margin-left: 25px;
    }
    </style>
</head>
<body>
	<form>
        <dl>
	<dt><input type="checkbox" id="cb"/></dt>
        <dd><label for="cb">Label text one</label></dd>
	
	<dt><input type="checkbox" id="cb2"/></dt>
        <dd><label for="cb2">
	Label text two Label text twoLabel text twoLabel text twoLabel 
	text twoLabel text twoLabel text twoLabel text two
	</label></dd>
	
	<dt><input type="checkbox" id="cb3"/></dt>
	<dd><label for="cb3">
	Label text two Label text twoLabel text twoLabel text twoLabel 
	text twoLabel text twoLabel text twoLabel text two
	</label></dd>
        </dl>
	</form>
</body>
</html>


I got this for IE:


[ Comment  | Tags  | Links  ]
 

Related Notes