Z-Index problem with IE7

Question

I have a multiline textbox & i need to show a image in background. The below piece of code works very fine with Mozilla firefix, but is giving me hard time with IE7. I have read a lot of resolutions for z-index problem, but could not fix that yet.

Please help urgently!

<div class="backimage" style="z-index:2; width:360px; height:205px; float:left; margin-left:10px;">
        <span class="taelmatter"></span>
        <div style="height:20px; margin-top:8px; width:250px; margin-right:15px; float: right;">
            <div style="text-align:justify">
                <span class="taelmatter">
                    <div style="text-align:right">View Sample Compose Ad</div>
                </span>
            </div>
        </div>

        <span class="taelmatter"></span>
        <fieldset class="taelmatter">
            <asp:TextBox runat="Server" Rows="10" onkeyup="return textboxMultilineMaxNumber(this,220)" ID="txtWhole" TextMode="multiLine" CssClass="charactertext"></asp:TextBox>
        </fieldset>
        <div  style="width:350px; border-bottom:2px solid #990000; border-top:2px solid #990000; margin-top:10px; height:30px; float:left; margin-left:0px;">
            <asp:Label runat="Server" ID="lblPrice" Text="Basic Rate:" Font-Bold="true"></asp:Label>
        </div>
    </div>

-------------------------- CSS ---------------------
    .backimage{
    background-image: url(images/extracharge-1.png);
    background-repeat: no-repeat;
    background-position: center bottom;   
    }
.taelmatter{
     font-family:Arial, Helvetica, sans-serif;
    text-align:left;
    color:#775B40;
    font-size:12px;
    }
.charactertext{
    width:340px;   
    margin:0;
    padding:0;
    text-align:left;
    font-size:14px;   
    font-family:Arial, Helvetica, sans-serif;
    float: left;
    opacity:.9;   
    border:solid #0000FF 3px;
    border:hidden;
    overflow:scroll;
    }