Internet Explorer 8 and Checkbox CSS Problem

I was also once having some problems with IE8. So, I declared a different doctype and it worked!!

Currently, you are suing xhtml transitional.

Try this:(ok, edited)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

read more about doctypes and how can they fix sites here:
A list apart-Fix your site with right doctype

CSS - difficulty with custom check boxes between IE and Firefox

Old browsers unfortunately aren't able to style radio buttons. What you should do is to use a plugin like http://fronteed.com/iCheck/ which automatically creates div based checkboxes that you can style on your own and clicking on those sync with the actual checkboxes.

Checkbox does not display in IE (only)

Worked fine for me with IE9 and above, as expected. Do you really need the conflicting doctype and head declarations? XML version is declaring UTF-8 and meta tag "charset=windows-1252" We try not to confuse browsers if we can help it.

CSS troubleshooting for Internet Explorer 8

Actually, as crazy as it sounds, IE8 is technically right. Chrome is non-standard here in favour of keeping to expected behaviour.

table-layout:fixed means to fix the table layout regardless of content, including changes to said content. This allows for faster rendering of tables.

Unfortunately this means there's no easy way to ensure equal-width columns while having the number of columns be variable by the toggles.

You will need to remove table-layout:fixed and have JavaScript calculate the appropriate width percentage on load, and whenever the number of columns changes.

Internet Explorer 'input:checked + label:before' styling is not rendered

As opposed to modifying the :before pseudo element on checked I simply used the :after pseudo element for the active state and flick between opacities to hide and show them accordingly.

Thanks for anybody who helped.

Valid CSS not working in Internet Explorer 11

I've fought this before, and if I remember correctly, IE hides the :before pseudo element along with the checkbox, or just doesn't support :before on checkboxes.

The best I have done is here: http://jsfiddle.net/rally25rs/MRa2H/

The 3rd (black colored) checkbox works in IE but the other 2 don't.
It works by using the sibling selector to decide which icon to show.

.works-in-ie input[type="checkbox"]:checked ~ .checked{    display: inline-block;}.works-in-ie input[type="checkbox"]:checked ~ .unchecked{    display: none;}.works-in-ie input[type="checkbox"] ~ .checked{    display: none;}.works-in-ie input[type="checkbox"] ~ .unchecked{    display: inline-block;}
.works-in-ie input[type="checkbox"] {    display: none;}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/><div class="works-in-ie"><label><input type="checkbox"/><i class="fa fa-arrow-down unchecked"></i><i class="fa fa-arrow-up checked"></i> Click Me</label></div>

Filter Opacity not Working for Checkbox (IE8)

Make sure you include all the relevant opacity properties:

/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";

/* IE 5-7 */
filter: alpha(opacity=20);

/* Netscape Based Browsers (Mozilla */
-moz-opacity: 0.2;

/* For early Safari's (1.x) */
-khtml-opacity: 0.2;

/* Official CSS property */
opacity: 0.2;

I don't know which browser's you support but that should provide you support for most of the versions of the mainstream browsers in use today.

Also, I ran into this problem myself in some code. Make sure the checkbox in question does not have a z-index above the parent that has the opacity. I found that, contrary to the official specification, Chrome and Firefox will make all elements within a parent opaque if the parent is opaque. IE actually implements it correctly, where it not only takes into consideration the parent the element is in but also the z-index of the element in releation to the parent.

Example 1:

<!-- Markup -->
<div id="parent" class="transparent">
    <div id="child"></div>
</div>

/* CSS */
.transparent {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    opacity: 0.2;
}

In this case both the parent and child elements will have the opacity properties applied to them.

Example 2:

<!-- Markup -->
<div id="parent" class="transparent">
    <div id="child"></div>
</div>

/* CSS */
#parent {
    position: relative;
    z-index: 0;
}

#child {
    position: relative;
    z-index: 1;
}

.transparent {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    opacity: 0.2;
}

In this example, the child element has a z-index larger than the parent. In essence, if you were able to rotate the markup 90 degrees around the x-axis, you would see two separate layer on the z-axis. In the above example, I've found that Chrome and Firefox render both elements opaque even though the elements reside on two different layers. In IE they do not (per the official specification). Here is the official specification on the opacity property. Below is the relevant snippet:

Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts. The rules in this paragraph do not apply to SVG elements, since SVG has its own rendering model ([SVG11], Chapter 3).

I know this may be a little more than you were looking for, but I saw you had positioning within your CSS and I've been bitten by this problem before so I thought I would share.

Best of luck and happy coding!

Internet Explorer 8 and Checkbox CSS Problem