Make WordPress Core

Opened 13 years ago

Closed 11 years ago

#17699 closed defect (bug) (fixed)

Border at bottom of active tabs are inconsistent

Reported by: mitchoyoshitaka's profile mitchoyoshitaka Owned by: azaozz's profile azaozz
Milestone: 3.5 Priority: normal
Severity: trivial Version: 3.2
Component: UI Keywords: needs-testing
Focuses: Cc:


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

Not sure which is expected behavior.

Attachments (6)

17699.jpg (18.5 KB) - added by mitchoyoshitaka 13 years ago.
Screenshot of nav menu screen with inconsistent border
17699.diff (387 bytes) - added by dcowgill 13 years ago.
Seems to be working now. Can someone please test this patch in IE?
clearfix.17699.diff (6.9 KB) - added by scribu 13 years ago.
removed unrelated changes
clearfix.17699.2.diff (6.9 KB) - added by scribu 13 years ago.
Screen Shot 2012-09-19 at 11.55.29 AM.png (23.1 KB) - added by helenyhou 11 years ago.
17699.3.diff (350 bytes) - added by lessbloat 11 years ago.

Download all attachments as: .zip

Change History (35)

13 years ago

Screenshot of nav menu screen with inconsistent border

#1 @ocean90
13 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 3.2

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

Marked as 3.2 for investigation.

#2 @dcowgill
13 years ago

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 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.

13 years ago

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

#3 @dcowgill
13 years ago

  • Keywords needs-testing has-patch added; needs-patch removed

#4 @azaozz
13 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In [18202]:

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

#5 @nacin
13 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

See #17782, this wasn't fixed.

#6 @scribu
13 years ago

  • Keywords needs-patch added; ui-feedback needs-testing has-patch removed

#7 @ocean90
13 years ago

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

#8 @scribu
13 years ago

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.

Last edited 13 years ago by scribu (previous) (diff)

#9 @scribu
13 years ago

  • Keywords has-patch added; needs-patch removed

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.

Last edited 13 years ago by scribu (previous) (diff)

13 years ago

removed unrelated changes

#10 @ryan
13 years ago

  • Keywords 3.3-early added
  • Milestone changed from 3.2 to Future Release

#11 @WraithKenny
13 years ago

It has to do with pixel value rounding.

the rule at
could be set to line-height: 16px but then it's not liquid... or some javascript could round down the line-height...

Also, changing 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.

#12 @WraithKenny
13 years ago

P.S. in most cases, overflow hidden solution is "cleaner" then the clearfix. see

#13 @scribu
13 years ago

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

Last edited 13 years ago by scribu (previous) (diff)

#14 @scribu
13 years ago

Related: #17959

#15 @azaozz
12 years ago

  • Resolution set to worksforme
  • Status changed from reopened to closed

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.

#16 @WraithKenny
12 years ago

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.

#17 @helenyhou
12 years ago

  • Milestone Future Release deleted

#18 @helenyhou
11 years ago

#21929 was marked as a duplicate.

#19 @helenyhou
11 years ago

  • Component changed from Administration to UI
  • Keywords needs-patch added; has-patch 3.3-early removed
  • Milestone set to 3.5
  • Resolution worksforme deleted
  • Status changed from closed to reopened

Looks like it's back in Firefox.

Last edited 11 years ago by helenyhou (previous) (diff)

#20 @ocean90
11 years ago

Opera too.

#21 @SergeyBiryukov
11 years ago

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

#22 @WraithKenny
11 years ago

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.

#23 @WraithKenny
11 years ago

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

#24 @ocean90
11 years ago

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

#25 @melchoyce
11 years ago

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?

#26 @lessbloat
11 years ago

I'm still seeing it in FF (MAC). In 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.

11 years ago

#27 @lessbloat
11 years ago

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

#28 @lessbloat
11 years ago

  • Keywords needs-testing added; needs-patch removed

#29 @azaozz
11 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 22389:

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

Note: See TracTickets for help on using tickets.