Make WordPress Core

Opened 15 years ago

Closed 14 years ago

#19586 closed defect (bug) (fixed)

Admin menu display broken when hovering item on IE8

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

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 15 years ago.
ie8_bug.diff​ (203.6 KB ) - added by casben79 15 years ago.
diff to hide the stray div in ie8
19586.patch​ (400 bytes ) - added by SergeyBiryukov 15 years ago.

Download all attachments as: .zip

Change History (14)

@firebird75
15 years ago

#1 @SergeyBiryukov
15 years ago

  • Keywords needs-patch added

Confirmed.

#2 @firebird75
15 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
15 years ago

  • Version → 3.3

#4 @helenyhou
15 years ago

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

#5 @SergeyBiryukov
15 years ago

  • Component Menus → UI
  • Keywords has-patch removed
  • Milestone Awaiting Review → 3.4

@casben79
15 years ago

diff to hide the stray div in ie8

#6 @casben79
15 years ago

  • Cc bcasey@… added
  • Owner set to casben79
  • Status new → 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
15 years ago

  • Keywords has-patch added; needs-patch removed

#8 @SergeyBiryukov
15 years ago

  • Keywords needs-refresh added

#9 @SergeyBiryukov
15 years ago

  • Keywords needs-refresh removed

#10 @SergeyBiryukov
14 years ago

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

#11 @azaozz
14 years ago

  • Resolution → fixed
  • Status assigned → 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.