I am currently working on creating an overlay that is specifically designed to display in versions of Internet Explorer lower than 9, prompting users to upgrade their browsers. The overlay and message are functioning correctly, but I am facing an issue with preventing the elements on the page from remaining clickable. Below is the relevant HTML and CSS for this implementation.
HTML:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/blockIE.css")" />
<![endif]-->
</head>
<body>
<div class="blockIE"><div class="blockIEMessage"><img src="@Url.Content("~/Content/img/no-ie6.png")" alt='' style='float: left;'/><p><br /><strong>Sorry! This page doesn't support your browser. Your browser is out of date and insecure.</strong><br /><br />Please upgrade your browser to <a href="http://firefox.com">Mozilla Firefox</a> or <a href="http://www.google.com/chrome">Google Chrome</a></div></div>CSS:
html, body {
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.blockIE
{
display: block;
position: absolute;
background:transparent;
top: 0;
left: 0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);
zoom: 1;
width: 100%;
height: 100%;
z-index: 5000;
}
.blockIEMessage
{
background-color: white;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -100px;
width: 500px;
padding-right: 10px;
height: 200px;
position: absolute;
z-index: 6000;
font-size: 1.4em;
}