Checkbox does not display in IE (only)

StackOverflow https://stackoverflow.com/questions/21151236

Question

I cannot get my checkbox to be displayed in Internet Explorer.
It works for all other web browsers, but only IE is failing to display it correctly.
Also it does work properly in my local machine folder, but it fails to display when it get opened from my folder in network (NAS) <- opened with IE.

Due to work related, it needs to be placed on the network. I have tested with Firefox 26.0 and IE 10.0.9

Here is my code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11 DTD/xhtml11.dtd"><html xsi:schemalocation="http://www.w3.org 1999/xhtml http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN">

<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=windows-1252"/>
<style>
input[type=checkbox] {  
display: none;  
}   
.checkbox label:before {  
border-radius: 1px;  
border: 1px solid black
}  
input[type=checkbox]:checked + label:before {  
content: "X";  
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
font-size: 22px;  
color: #000000;  
text-align: center;  
line-height:19px;
border: 1px solid black
}  
label {  
display: inline-block;  
cursor: pointer;  
position: relative;  
padding-left: 25px;  
margin-right: 15px;  
font-size: 16px;  
font-weight: bold;
}  
label:before {  
content: "";  
display: inline-block;  


width: 15px;  
height: 15px;  

margin-right: 10px;  
position: absolute;  
left: 0;  
bottombottom: 1px;  
background-color: #eee;  
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}      
</style>
</head>
<body>
<div class="checkbox"> <input type="checkbox" id="Field1" name="testINPUT" fieldname="Vote" mandatory="false" value="VoteYes" /> <label for="Field1">Yes</label></div>
<div class="checkbox"> <input type="checkbox" id="Field2" name="testINPUT" fieldname="Vote" mandatory="false" value="VoteNo" /> <label for="Field2">No</label> </div>

</body>
</html>
Was it helpful?

Solution 2

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.

OTHER TIPS

Found the issue why Checkbox wasn't showing up
Root of Cause was when the file was placed on the network and opened with IE, somehow it automatically change the Document Mode: to "Internet Explorer 7 standard", which wasn't happening when you got the file on your local folder.

So by adding this line in the code will make it force to run under Document Mode: Standards

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

For more details about the compatibility, you can find it in the following URL:

https://hsivonen.fi/doctype/#ie8

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top