Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#19586 closed defect (bug) (fixed)

Admin menu display broken when hovering item on IE8

Reported by: firebird75's profile firebird75 Owned by: azaozz's profile azaozz
Milestone: 3.4 Priority: normal
Severity: normal Version: 3.3
Component: UI Keywords: has-patch
Focuses: Cc:

Description

This problem is present only in WP 3.3. In IE8, when the admin is opened in regular mode (problem doesn't happen if the browser is set to compatibility mode), the menuitem that is hovered is broken on the left. Part of the icon is cropped.

This happen to all menuitems when you hover them except the ones that aren't expanding (when they have only one subitem).

The problem doesn't happen on Firefox.

Attachments (3)

icon.png (5.4 KB) - added by firebird75 12 years ago.
ie8_bug.diff (203.6 KB) - added by casben79 12 years ago.
diff to hide the stray div in ie8
19586.patch (400 bytes) - added by SergeyBiryukov 12 years ago.

Download all attachments as: .zip

Change History (14)

@firebird75
12 years ago

#1 @SergeyBiryukov
12 years ago

  • Keywords needs-patch added

Confirmed.

#2 @firebird75
12 years ago

  • Keywords has-patch added

I have identified a fix for this issue. The following CSS style should be updated :

#adminmenu li.wp-has-current-submenu .wp-menu-arrow,
#adminmenu li.menu-top:hover .wp-menu-arrow,
#adminmenu li.current .wp-menu-arrow,
#adminmenu li.focused .wp-menu-arrow,
#adminmenu li.menu-top.wp-has-submenu:hover .wp-menu-arrow div {
display: none\0;
}

The display:none\0; is a CSS hack that will apply only to IE8 and allow to fix the issue. The \0 is applied to make sure the CSS isn't applied to any other browser than IE8.

While waiting for the WP next release to include the fix, here is the way to fix it :


if (is_admin() && $wp_version >= '3.3')
    echo '<style type="text/css" media="screen"><!-- #adminmenu li.wp-has-current-submenu .wp-menu-arrow,#adminmenu li.menu-top:hover .wp-menu-arrow,#adminmenu li.current .wp-menu-arrow,#adminmenu li.focused .wp-menu-arrow,#adminmenu li.menu-top.wp-has-submenu:hover .wp-menu-arrow div {display: none\0;} --></style>';

This code should be loaded at the end of the admin header through the right hook.

#3 @firebird75
12 years ago

  • Version set to 3.3

#4 @helenyhou
12 years ago

There is an ie8 class on the html element you can use instead of a CSS hack.

#5 @SergeyBiryukov
12 years ago

  • Component changed from Menus to UI
  • Keywords has-patch removed
  • Milestone changed from Awaiting Review to 3.4

@casben79
12 years ago

diff to hide the stray div in ie8

#6 @casben79
12 years ago

  • Cc bcasey@… added
  • Owner set to casben79
  • Status changed from new to accepted

Added The Following At line 1816 in wp-admin.dev.css and updated wp-admin.css

.ie8 #adminmenu .wp-menu-arrow{
    display:none!important; /*Hide The Menu Arrow Always In IE8 - http://core.trac.wordpress.org/ticket/19586 */
}

#7 @jkudish
12 years ago

  • Keywords has-patch added; needs-patch removed

#8 @SergeyBiryukov
12 years ago

  • Keywords needs-refresh added

#9 @SergeyBiryukov
12 years ago

  • Keywords needs-refresh removed

#10 @SergeyBiryukov
12 years ago

  • Owner changed from casben79 to azaozz
  • Status changed from accepted to assigned

#11 @azaozz
12 years ago

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

In [20633]:

Always hide the admin menu arrow in IE8 (doesn't work there), props casben79, SergeyBiryukov, fixes #19586

Note: See TracTickets for help on using tickets.