I have this simple web page, that I thought I had tested in every browser. Then I tried it in Internet Explorer, and it just showed a blank white page. I went through my CSS, looking for lines that IE didn't support, and found background = rgba(some stuff), but this is in a div not shown by IE. Does anybody have any ideas on what might be causing this? The webpage is at http://heather.sh/qr Below is my HTML.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function ifUIWebView() {
var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
var isChrome = navigator.userAgent.match('CriOS');
if (isChrome) {
var mobile_safari_div = document.getElementById('mobile_safari_div');
mobile_safari_div.innerHTML = mobile_safari_div.innerHTML + '<font size="3" color="black"><b>Chrome does not support contact card download. Please open this page (<a href="http://heather.sh/qr">http://heather.sh/qr</a>) in Mobile Safari.</b></font>';
}
else if (is_uiwebview) {
var mobile_safari_div = document.getElementById('mobile_safari_div');
mobile_safari_div.innerHTML = mobile_safari_div.innerHTML + '<font size="3" color="black"><b>This browser may not support contact card download. If it doesn\'t work, open this page (<a href="http://heather.sh/qr">http://heather.sh/qr</a>) in Mobile Safari.</b></font>';
}
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div id='topContainer'><img src="photo.jpg" style="visibility:hidden" width="100%"/>
<div id='container'>
<div id='download_button_div'>
<a href="/qr/download-contact/download.php"><img src="Download Contact.png" id='download_button'></img></a>
<div id='mobile_safari_div'></div>
</div>
<script>
ifUIWebView()
</script>
</div>
</div>
</body>
And here is my CSS:
html, body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#topContainer{
position: relative;
max-width:400px;
margin: auto;
}
#container{
width: 100%;
max-width: 400px;
height: 100%;
margin: auto;
background-size: 100%;
background-repeat: no-repeat;
background-image: url("photo.jpg");
position:absolute;
top:0px;
}
#download_button {
width: 100%;
}
#download_button_div {
width: 100%;
}
#mobile_safari_div {
background: rgba(255, 255, 255, 0.5);
font-family: 'helvetica';
text-align: center;
}
Any ideas on what part is incompatible with IE? As I say, I have tried going through and could only find the rgba thing, so any help appreciated. Thanks!