Fixing Checkbox Width Problem in IE

I just reviewed my code today and found my code about how to fix the checkbox width incompatibility with IE. In IE, you will find that the checkbox has extra maring / padding on its left and right side making incompatibilities with other browsers.

In Firefox, everything is just fine. There is not extra margin / padding on both side.

To fix this, we need to put extra div on the checkbox and set the width / height of that div.

This would be your HMTL:

<div class="d-c1">
	<input class="c1" type="checkbox" name="chk1" id="chk1" />
</div>

This is the cross borwser CSS. We simply put dimensions on the div tag.

.tsw-mrw .d-c1 {
	float: left;
	width: 15px;
	height: 13px;
}

Then add a conditional CSS for IE.

.d-c1 input {
	width: 13px;
	height: 13px;
}

The 13px width and height will be needed only for IE.

<!--&#91;if IE&#93;>
<link href="/daito/public/css/account_form_ie.css" media="all" rel="stylesheet" type="text/css" />
<!&#91;endif&#93;-->