CODEWITHSUNDEEP
htmlcssgoogle-chromecss-tables
mrówa
mrówa

Reputation: 5781

Why not-cell div in css table has non-zero width in chrome?

Here's presentation of the issue. Clicking on "content" square toggles display: table-cell on the pre-content div. In IE10 and FF24 it does not make the red line visible at all, while in chrome 30 it does.

I'm trying to create dockable panel on full-window application which either floats on top, either is one of the two columns, and I'm docking the panel by switching classes: either one with position: absolute, either one with display: table-cell.

Why is there such a difference in behaviour? Any ideas how to fix this?

Upvotes: 3

Views: 351

Answers (1)

James Donnelly
James Donnelly

Reputation: 128856

It appears to be caused by your #pre-content divider being displayed as block by default. For some reason this has 11px width (I'm not sure why, however).

Chrome Element Inspector Example

I'm not sure what you're trying to achieve, but can you not simply set this to not display at all by default instead?

#pre-content:not(.table-cell) {
    display: none;
}

JSFiddle demo.

Note that I've had to use the not() selector here as IDs have higher specificity than classes, and #pre-content would override .table-cell.

Upvotes: 1

Related Questions