I'm new to CSS and trying to create a responsive design for mobile IE. Currently, the page appears blank on IE but works fine on Google Chrome and other browsers :-)
Here are the code snippets I have used:
HTML:
<div class="main">
<div class="container>
<div class="marquee">
<marquee scrollamount="3" direction="right" dir="ltr>
<h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>
<img height="37" src="http://www.example.com/image.png">
</strong></h3>
</marquee>
</div>
<a class="button" id="btn1" href="http://example.com/site.html"></a>
</div>
</div>
CSS:
html {
height: 100%;
width: 100%;
}
body {
background-image: url("http://www.example.com/bg.gif");
background-repeat: no-repeat;
background-position: center center;
height: 100%;
margin: 0;
}
.marquee {
display: block;
position: absolute;
top: 43%;
width: 100%;
}
#btn1 {
background-image: url("http://www.example.com/enter.gif");
background-repeat: no-repeat;
background-position: center center;
bottom: 10px;
display: block;
height: 53px;
margin: 0 auto;
position: absolute;
width: 100%;
}
.button {
padding: 5px;
}
.container {
display: block;
height: 100%;
margin: 0 auto;
max-width: 960px;
position: relative;
}
.main {
height: 100%;
padding: 0 20px;
}
@media screen and (max-width:500px) {
#btn1{
background-size: 100% auto;
}
}
Thank you in advance