CSS: ui-helper-clearfix bug within table with border spacing

[jesse.voogt]

jquery-ui 1.8.18 css style ui-helper-clearfix :after and :before display:table creates unwanted empty space around any element with this class when that element is in the context of a table with border collapse and border spacing. For my example, I increased the border spacing, however the default settings of firefox and chrome would be enough.

Here's the js fiddle: ​http://jsfiddle.net/jessevoogt/nEHLK/

The fiddle includes my workaround, which basically sets the display to block within the context of a table.

[Scott González]

From Nathan Smith:

Example of the bug:

​http://codepen.io/anon/pen/gAfkJ

Example of the fix:

​http://codepen.io/anon/pen/KoHGc

TL;DR — border-collapse:collapse on clearfix.

[Jörn Zaefferer]

So I'd just add these two lines to the clearfix before/after block in jquery.ui.core.css:

/* see http://bugs.jqueryui.com/ticket/8442 */
border-collapse: collapse; 

Is there anything else?

[Scott González]

I think that's it. We should inform H5BP as well, since I'm pretty sure we're just using their styles.

[Scott González]

Theme: Collapse border in .ui-helper-cleafix. Fixes #8442 - CSS: ui-helper-clearfix bug within table with border spacing.

Changeset: cb42ee7ccdf6e32be14341a34a037c7f4508c157

[peter.hozak@…]

Replying to jesse.voogt:

Here's the js fiddle: ​http://jsfiddle.net/jessevoogt/nEHLK/

Original case might be fixed, but when I had a problem with unaligned accordion vs. tabs placed in 2 display:table-cell; elements, above workaround fixed my issue.