#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:

Description

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.

Attachments (0)

Change History (10)

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

component:	ui.core → CSS Framework

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

milestone:	1.9.0 → 1.10.0

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

status:	new → open

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

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.

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

milestone:	1.10.0 → none

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 http://bugs.jqueryui.com/ticket/8442 */
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:	none → 1.10.1
summary:	jquery-ui 1.8.18: ui-helper-clearfix bug within table with border spacing → CSS: ui-helper-clearfix bug within table with border spacing
version:	1.8.21 → 1.8.18

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

resolution:	→ fixed
status:	open → closed

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 peter.hozak@gmail.com comment:10

Replying to [ticket:8442 jesse.voogt]: