Geek Answers Handbook

Firefox css table cells don't respond like other browsers with position: absolute

I am creating a layout system in Javascript for application windows ... Javascript creates the code below ...

Everything works very well, except that Firefox seems to have different rules for CSS tables than other browsers.

It seems that Webkit browsers set the context for sizing table CSS table table elements to the nearest relative / absolutely located parent element, as well as regular elements, and from this we can consider each cell as a new context for sizing and positioning absolutely.

Firefox doesn't seem to do this.

Here is an example code:

<div class="header"></div>
<div class='table'>
    <div class='row'>
        <div class='cell'>
            <div class='wrap'>
                <div class='pane'>
                Content here that is long enough to wrap at the sides. Content here that is long enough to wrap at the sides. Content here that is long enough to wrap at the sides.  And still hit the bottom.
                </div>
            </div>
        </div>
        <div class='cell' style='background-color:orange; width:230px;'>
            cell2
        </div>
    </div>
</div>

and css:

.header {
    height: 50px;
    width: 100%;
    background: blue;
}
.table {
    width:100%;
    height:200px;
    display:table;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    background-color:red;
    position:relative;
}
.wrap {
    display:block;
    position:absolute;
    background-color:purple;
    width:100%;
    height:100%;
}
.pane {
     background-color:green;
    height:100%;
    width:100%;
    position:absolute;    
}

What you can see here: http://jsfiddle.net/XmUZ7/3/

Webkit (Safari/Chrome) Firefox/Mozilla. .

.wrap, , , reset . ? SO, , , .wrap , .

, :

Firefox

css table-cell: Firefox

CSS , Firefox

https://bugzilla.mozilla.org/show_bug.cgi?id=203225

firefox, , . , , !

, , , Firefox , .

, JSFiddle , , , .

+4
2

, position: relative Gecko . . https://bugzilla.mozilla.org/show_bug.cgi?id=63895

http://www.w3.org/TR/CSS21/visuren.html#choose-position:

"position: relative" table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell table-caption undefined.

, , position:relative (, "wrap" ).

0

, . !

, , Gecko reset (IE - , , 100% ), ?

, ...

0

More articles:


All Articles