Skip to main content

Search and Top Navigation

#8442 closed bug (fixed)

Opened July 13, 2012 05:41PM UTC

Closed February 13, 2013 02:07PM UTC

Last modified March 26, 2014 10:12AM UTC

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

Reported by: jesse.voogt Owned by:
Priority: minor Milestone: 1.10.1
Component: ui.css-framework Version: 1.8.18
Keywords: Cc:
Blocked by: Blocking:

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:

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

Attachments (0)
Change History (10)

Changed July 19, 2012 10:49PM UTC by scottgonzalez comment:1

component: ui.coreCSS Framework

Changed October 11, 2012 02:39PM UTC by scottgonzalez comment:2


Changed October 18, 2012 12:28PM UTC by mikesherov comment:3

status: newopen

Changed January 23, 2013 01:11PM UTC by scottgonzalez comment:4

From Nathan Smith:

Example of the bug:

Example of the fix:

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

Changed January 25, 2013 09:23PM UTC by tj.vantoll comment:5

milestone: 1.10.0none

Changed February 11, 2013 03:12PM UTC by jzaefferer comment:6

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

/* see */
border-collapse: collapse; 

Is there anything else?

Changed February 11, 2013 03:14PM UTC by scottgonzalez comment:7

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

Changed February 13, 2013 02:05PM UTC by scottgonzalez comment:8

milestone: none1.10.1
summary: jquery-ui 1.8.18: ui-helper-clearfix bug within table with border spacingCSS: ui-helper-clearfix bug within table with border spacing

Changed February 13, 2013 02:07PM UTC by Scott González comment:9

resolution: → fixed
status: openclosed

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

Changeset: cb42ee7ccdf6e32be14341a34a037c7f4508c157

Changed March 26, 2014 10:12AM UTC by comment:10

Replying to [ticket:8442 jesse.voogt]:

Here's the js fiddle:

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.