WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 18 months ago

#17699 closed defect (bug) (fixed)

Border at bottom of active tabs are inconsistent

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

Description

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 3 years ago.
Screenshot of nav menu screen with inconsistent border
17699.diff (387 bytes) - added by dcowgill 3 years ago.
Seems to be working now. Can someone please test this patch in IE?
clearfix.17699.diff (6.9 KB) - added by scribu 3 years ago.
removed unrelated changes
clearfix.17699.2.diff (6.9 KB) - added by scribu 3 years ago.
Screen Shot 2012-09-19 at 11.55.29 AM.png (23.1 KB) - added by helenyhou 19 months ago.
17699.3.diff (350 bytes) - added by lessbloat 18 months ago.

Download all attachments as: .zip

Change History (35)

mitchoyoshitaka3 years ago

Screenshot of nav menu screen with inconsistent border

comment:1 ocean903 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.

comment:2 dcowgill3 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 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.

dcowgill3 years ago

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

comment:3 dcowgill3 years ago

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

comment:4 azaozz3 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.

comment:5 nacin3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

See #17782, this wasn't fixed.

comment:6 scribu3 years ago

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

comment:7 ocean903 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.

comment:8 scribu3 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 3 years ago by scribu (previous) (diff)

comment:9 scribu3 years ago

  • Keywords has-patch added; needs-patch removed

clearfix.17699.diff introduces the .clearfix utility class (which should be used throughout, instead of <br>s by the way).

I also found some duplicated CSS and removed it.

Version 1, edited 3 years ago by scribu (previous) (next) (diff)

scribu3 years ago

removed unrelated changes

scribu3 years ago

comment:10 ryan3 years ago

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

comment:11 WraithKenny3 years ago

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.

comment:12 WraithKenny3 years ago

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

comment:13 scribu3 years ago

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

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

comment:14 scribu3 years ago

Related: #17959

comment:15 azaozz2 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.

comment:16 WraithKenny2 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.

comment:17 helenyhou2 years ago

  • Milestone Future Release deleted

comment:18 helenyhou19 months ago

#21929 was marked as a duplicate.

comment:19 helenyhou19 months 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.

http://core.trac.wordpress.org/raw-attachment/ticket/17699/Screen%20Shot%202012-09-19%20at%2011.55.29%20AM.png

Last edited 19 months ago by helenyhou (previous) (diff)

comment:20 ocean9019 months ago

Opera too.

comment:21 SergeyBiryukov19 months ago

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

comment:22 WraithKenny19 months 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.

comment:23 WraithKenny19 months ago

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

comment:24 ocean9019 months ago

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

comment:25 melchoyce19 months 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?

comment:26 lessbloat19 months ago

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.

lessbloat18 months ago

comment:27 lessbloat18 months ago

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

comment:28 lessbloat18 months ago

  • Keywords needs-testing added; needs-patch removed

comment:29 azaozz18 months 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.