CODEWITHSUNDEEP
htmlcssinternet-explorer-7tooltip
GC_
GC_

Reputation: 1673

Is it possible to display parent span's border in front of a child span in ie7?

I would like shadow to go behind the text. Does anyone see what I am doing wrong? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

<style>
.tooltip{
background-color: #ffffe1;
position: absolute;
border-style:solid;
border-width: thin;
border-color: #000000;
z-index: 25;
}

.tooltip_shadow{
background-color: #dadbda;
position: absolute;
width: 100%;
height: 100%;
left: 5px;
top:5px;
z-index: -1;
}
</style>

<SPAN style="TOP: 86px; LEFT: 39px" class=tooltip>
    <SPAN style="Z-INDEX: 15">This is a message!</SPAN>
    <SPAN class=tooltip_shadow>
    </SPAN>
</SPAN>

Thanks, Grae

Upvotes: 1

Views: 446

Answers (1)

Marnix
Marnix

Reputation: 6547

I don't know what you are actually trying to acomplish by means of a shadow, but I do know that this piece of HTML has a lot of syntax errors. After standardizing, I just get a div under the div, so it has a gray background. What is it you are trying to acomplish?

Is this what you are looking for?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style type="text/css">
    .tooltip{
        position: absolute;
    }

    .tooltip_shadow{
        background-color: green;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 5px;
        top: 5px;
    }

    .tooltip_content
    {
        background-color:red;
        position:relative;
        border-style:solid;
        border-width: thin;
        border-color: #000000;
    }
</style>

</head>

<body>
    <div style="top: 86px; left: 39px;" id="wvTooltipdiv_1" class="tooltip">
        <div class="tooltip_shadow"></div>
        <div class="tooltip_content">This is a message!</div>
    </div>
</body>
</html>

Upvotes: 0

Related Questions