While my code works perfectly in Firefox and Safari, I am facing issues getting it to function properly in Internet Explorer. The overlay does not appear at all in IE. Can anyone assist me with troubleshooting this for IE?
http://pastebin.com/Kv4MbYyc
I had to use pastebin because the code tag formatting was not cooperating.
HTML:
<div class="image"> <img src="Picture.jpg"/>
<itext><span>Text at top</span></itext>
<stext><span>Text at bottom</span></stext>
</div>
CSS:
.image {
position: relative;
width: 100%;
}
itext span {
position: absolute;
Top: 20;
left: 0.5em;
width: 95%;
font: bold 45px/75px Helvetica, Sans-Serif;
color: #fff;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.6);
text-align: center;
}
stext span {
position: absolute;
Bottom: 0;
left: 0.5em;
width: 95%;
font: 20px/30px Helvetica, Sans-Serif;
padding:10px 20px;
color: #FFFFFF;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
text-align: Left;
}