ansaurus

Question

CSS z-index issue: works in Firefox, but not Safari?

Answer 1

A:

Safari and Firefox use different rendering engines, which would explain why they are behaving differently in this case. Safari uses WebKit, while Firefox uses Gecko.

mhughes 2010-09-30 18:54:55

Obviously. The question is in what way is Firefox rendering it differently, and what do I need to change so that Safari matches the way it looks in Firefox?

Andrew 2010-09-30 19:14:10

I'm sorry, I misunderstood your question. I've done some testing, and can't figure out how to make your solution work in Safari. It looks like a td (or tr) can't be displayed with a larger z-index than its parent table in Safari. The only solution I can think of right now would be to split this into two different tables (with the same width)... One with a z-index above the overlay, and one with a z-index below it.

mhughes 2010-10-01 13:35:26

Answer 2

+2 A:

According to the CSS 2.1 specifications:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

I'm assuming that Firefox implements it one way, and WebKit implements it a different way and both are correct since it is undefined. The moral of the story here is not to specify a position on table elements.

I was able to get it to work by wrapping the contents of each table cell with a div and positioning the div. I also moved the overlay inside of the table row that I was targeting (not sure if that was necessary).

<table>
    <tr>
        <td>
            <div style="position:relative; z-index:1000;">
                Displays on top in both Safari and Firefox
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="position:relative; z-index:1000;">
                Displays on top in both Safari and Firefox
            </div>
            <span class="overlay"></span>
        </td>
    </tr>
    <tr>
        <td>Displays below overlay</td>
    </tr>
    <tr>
        <td>Displays below overlay</td>
    </tr>
    <tr>
        <td>Displays below overlay</td>
    </tr>
</table>

Andrew 2010-10-04 23:00:36

ansaurus

tags:

views:

answers:

CSS z-index issue: works in Firefox, but not Safari?

related questions