IE CSS Overlay Help

The code below works like a charm in Firefox and Safari but I can't get it to work in IE at all. In IE there is no overlay at all. Can anyone help me get it in IE.

http://pastebin.com/Kv4MbYyc

I put it on pastebin becaus开发者_运维问答e the code tag formatting would not work for me.

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;
}

---

You should be using <div class="itext"> instead of <itext>, and <div class="stext"> instead of <stext>.

Additionally, adding display: inline will obviate your need to use <span> at all.

---

If you want to support HTML5 with custom tags, IE doesn't support them. You can use an alternative and use div probably with id. Here example code:

html

<div class="image"> <img src="Picture.jpg"/>
    <div id="itext"><span>Text at top</span></div>

    <div id="stext"><span>
        Text at bottom
        </span></div>

</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;
}

Example: http://jsfiddle.net/q4CqZ/12/

Of course you will see that the background in IE will be black, to achieve the opacity for internet explorer you can use

opacity: 0.5;
  filter: alpha(opacity = 50);

More: http://joseph.randomnetworks.com/2006/08/16/css-opacity-in-internet-explorer-ie/