CODEWITHSUNDEEP
cssinternet-explorer
MShack
MShack

Reputation: 652

need to have caption overlay over table

i can't get the caption to overlay over the table in IE , FF and Chrome work fine

tried everything i know how in css with jsfiddle and can't get IE to look like FF and Chrome , any advice ? I can't change the HTML at all , so i'm left to CSS to try to get this

http://jsfiddle.net/6V2Qf/74/

<table class="report">
    <caption>
    </caption>
    <tbody>
        <tr>
            <th></th>
            <th></th>
        </tr>
</tbody>
</table>

Upvotes: 0

Views: 289

Answers (2)

myfunkyside
myfunkyside

Reputation: 3950

Here:

Fiddle: http://jsfiddle.net/pn2Th/

I added position:relative; to the caption:

.report {
    width:200px;
    height:50px;
    border:2px solid green;
    background:pink;
}

.report caption { //I also changed this, comes in handy if you have more than one table with caption, because now these rules only apply to the caption of tables with class 'report'
    position:relative; //I added this
    width:196px; //I also changed this, to align the caption's width with the table's in IE (in Chrome the table was actually 204px wide before)
    height:50px;
    border:2px solid red;
    background:black;
    margin-bottom:-2px;
}

I thought it was necessary to add z-index:0; to .report (or maybe even .report tbody),
and z-index:1; to caption...

But none of that appears to be necessary.

Upvotes: 1

Kisspa
Kisspa

Reputation: 584

<table class="report">
<caption>
</caption>
<tbody>
    <tr>
        <th></th>
        <th></th>
    </tr>
</tbody>
<div class="overlay"></div>
</table>

http://jsfiddle.net/kisspa/6V2Qf/75/

Upvotes: 1

Related Questions