Opened 7 years ago
Last modified 2 months ago
#26933 new defect (bug)
Toolbar "Howdy, " message CSS broke in IE
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | 3.8 |
Component: | Toolbar | Keywords: | has-patch needs-testing |
Focuses: | ui, css | Cc: |
Description
I noticed this when helping a client with their website, and they were using IE 9. The "Howdy, " message forces their display name down to the next line, causing problems if they try to click the "Screen Options" or "Help" tabs. Plus it just looks bad. (see attached screenshot)
I logged in with IE 11 and saw the same issue, and I chased the bug down to wp-includes/css/admin-bar.css, line 126.
#wpadminbar .quicklinks a, #wpadminbar .quicklinks .ab-empty-item, #wpadminbar .shortlink-input { height: 32px; display: block; padding: 0 10px; margin: 0; }
If you change display to inline-block rather than block, it fixes the problem.
Looks like the same code is in admin-bar-rtl.css, and I'm assuming that would have the same issue, but I don't know for sure.
Attachments (4)
Change History (17)
#1
@
7 years ago
Suggested code change:
#wpadminbar .quicklinks a, #wpadminbar .quicklinks .ab-empty-item, #wpadminbar .shortlink-input { height: 32px; display: inline-block; padding: 0 10px; margin: 0; }
#2
@
7 years ago
- Keywords reporter-feedback added
Could not reproduce the issue on a clean install neither in IE8 nor IE11. Tried both 3.8.1 and current trunk.
Does it still happen with all plugins disabled and a default theme (Twenty Fourteen or Twenty Thirteen) activated?
#3
@
7 years ago
After further research I found that it's only happening on a few of my sites. I disabled plugins but I didn't go so far as to switch to a default theme.
What I did notice is that it was only happening on sites that were loading (enqueueing) farbtastic.css and media-views.css in the admin.
I wasn't able to determine what those styles had to do with this though.
I do some admin CSS tweaking on my sites, so I just added the fix I mentioned above to that stylesheet, specifically changing display to inline-block, and it's "fixed" for me now.
#6
@
7 years ago
This only happen in IE when Avatars are disabled. Seems like text is being wrapped around the floated user icon instead of being wide.
In place of adding inline-block to all elements, i made inline-block to this element only, it will not effect on other browsers as it is a floated element and this fix the problem in IE.
#8
@
5 years ago
Updating patch in favor of better approach to handle this IE bug. Actually IE is not respecting floated icons thus having width: auto
only expend the div to fit the text but not the icon.
In this case we can also add overflow: hidden;
to a
tag, which will not reflect any change on other browsers.
#9
@
4 years ago
- Keywords reporter-feedback needs-testing added
Is this still an issue with latest versions of WordPress and Internet Explorer?
#11
@
4 months ago
- Focuses css added
- Keywords reporter-feedback removed
It does still wrap in IE. I had uploaded two options with absolute positioning to ticket #40374, but adding display: inline-block
works for me.
In 26933.3.patch, the display property is adjusted only when there is no avatar image.
#12
@
2 months ago
@sabernhardt Can you clarify which versions of IE you are able to reproduce this issue in? WordPress currently only supports IE >= 11. If the issues is only in versions 10 and lower, we should close as a wontfix
.
Screenshot of IE toolbar "Howdy" message issue