Border at bottom of active tabs are inconsistent

[mitchoyoshitaka]

In some postboxes, you get a border at the bottom of active tabs, and sometimes you don't.

Not sure which is expected behavior.

[mitchoyoshitaka]

Screenshot of nav menu screen with inconsistent border

[ocean90]

In my opinion there should be no border bottem on active tabs like in 3.1.

Marked as 3.2 for investigation.

[dcowgill]

Yes, there should be no bottom border on the active tab.

After some testing, the bottom border only appears in Firefox after a postbox has been moved. But then when you expand the "Screen Options" tab, it makes the bottom border disappear. Strange....

The css affecting this is in wp-admin.dev.css on line 2931. Changing the margin-bottom to 2px fixes it but then creates an extra 1 pixel space in Chrome and Safari.

Need a crack css developer to come up with a fix here.

[dcowgill]

Seems to be working now. Can someone please test this patch in IE?

[azaozz]

In [18202]:

Fix borders at the bottom of tabs in postboxes, props dcowgill, fixes #17699
Fix color of active tab in Categories postbox.

[nacin]

See #17782, this wasn't fixed.

[ocean90]

scribu: Which browser are you using? Can't see a problem in Chrome 13 and Firefox 4 in fresh and blue style on Mac.

[scribu]

Firefox 4 on Ubuntu.

If I remove the line-height declaration, I get the border on other boxes, so it's a flaky solution.

Will upload an alternative patch soon.

[scribu]

clearfix.17699.diff​ introduces the .clearfix utility class (which should be used throughout wp-admin, by the way).

I also found some duplicated CSS and removed it.

[scribu]

removed unrelated changes

[WraithKenny]

It has to do with pixel value rounding.

the rule at ​http://core.trac.wordpress.org/browser/trunk/wp-admin/css/wp-admin.dev.css#L2488
could be set to line-height: 16px but then it's not liquid... or some javascript could round down the line-height...

Also, changing ​http://core.trac.wordpress.org/browser/trunk/wp-admin/css/wp-admin.dev.css#L2501 to margin-bottom: 0px and height: 19px could solve it too (or min-height if that's less disruptive).

Too duplicate, try dragging categories up or down a position on the sidebar to get the browser to round the pixels differently. I've got it consistent on FF5 Win7, clean WP install, with 2011 theme, Publish then Format then Category.

[WraithKenny]

P.S. in most cases, overflow hidden solution is "cleaner" then the clearfix. see ​http://www.quirksmode.org/css/clearing.html

[scribu]

Yes, except overflow: hidden can't be used in this case.

[scribu]

Related: #17959

[azaozz]

Is this still happening? These styles were changed in the meantime. Looking at the screenshots, that border shouldn't be there. Haven't seen it recently (at least in FF).

Closing as 'worksforme' for now.

[WraithKenny]

The pixel rounding problem is still there (less noticeable), but the border is gone now (replaced by a 1-pixel overhang occasionally). The occasional overhang is better then the border showing so 'worksforme' sounds OK.

[helenyhou]

#21929 was marked as a duplicate.

[helenyhou]

Looks like it's back in Firefox.

[ocean90]

Opera too.

[SergeyBiryukov]

I don't remember seeing this in Windows, but can reproduce in Mac OS X.

[WraithKenny]

Problem is that the tab element's css height is calculated to be 16.2px (by firefox, opera, etc.), combined with any prior elements of a fractional pixel heights, causes the border to be displayed at the nearest pixel. When that pixel is higher, the border is shown. The border is only ever hidden because the white background of the li overhangs by (usually) a pixel. I can replicate on Mac and Windows.

[WraithKenny]

I agree with scribu, "We should really try to use the generic .wp-tab-bar and .wp-tab-active classes."

[ocean90]

Seems like it exists now in Chrome 22 @ OS X too.

[melchoyce]

Tried to work on this, but wasn't able to replicate in trunk. I'm seeing the bug on my beta install, but it looks fine on my trunk install (checked Chrome and Firefox on OSX). Anyone else still seeing it?

[lessbloat]

I'm still seeing it in FF (MAC). In ​http://core.trac.wordpress.org/ticket/21929#comment:1 I proposed a fix that has the side effect of showing a 1px overhang in all other browsers (I think it was a 2px overhang in IE7). Other than that, I can't think of a solution for this particular bug.

[lessbloat]

I believe 17699.3.diff should fix the issue raised in comment:19.

[azaozz]

In 22389:

Fix border at the bottom of active tabs in postboxes, fixes #17699