position:absolute one of display:table-cell elements causes WebKit to render gap
css, css-tables, webkit
Solution
Set the penultimate element "Web & Apps" to display `block` instead of `table-cell`:
nav ul li:nth-last-child(2)
{
display: block;
}
Display block fiddle
Problem
I'm trying to build a horizontal menu with the last item seperated and positioned right, so that a logo finds place between the last and the second last item. Firefox, Opera (Presto) and even the dirty ones from Redmond (9.0+) render it like I would expect. But WebKit (Chrome and Safari both render it the same) takes some space after the second last item where the last item would stay without `position: absolute`. ``` <header>Logo</header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Statistics</a></li> <li><a href="#">Data Management</a></li> <li><a href="#">Market Research</a></li> <li><a href="#">Web & Apps</a></li> <li><a href="#">Contact</a></li> </ul> </nav> ``` I display the list as `table` and the list items as `table-cell` because I want the left part of the menu (first to second last item, left to the logo) to have a fixed width while the items take the width they need for their contents. Text could change to anything. Till there, everything is alright. But if I give the last item a `display: block; position: absolute`, WebKit renders that gap (white in the example). ``` nav ul { display: table; background: white; /* that's what you see in webkit */ } nav ul li { display: table-cell; } nav ul li:last-child { display: block; /* "display: none;" works like I would expect */ position: absolute; } ``` Here is a Fiddle. I'm not sure if it is a bug in WebKit, because absolute positioning an element inside a table might not be default behavior. On the other hand, `display: none` works like I would expect. Shouldn't the space consumption be 0 in both cases? Does anybody know of a bug in WebKit or has anyone an idea of how to prevent that gap?