IE Issue With Nested Unordered Lists

Question

I'm running into a really weird issue in IE (specifically tested in IE 11 & edge mode on Windows 7). IE seems to add extra padding/height to the list-items in the nested <ul>. Screenshots and tests below. If someone could point me the right direction of how to fix this, that would be great, I've tried a few different things and don't know what's going wrong.

I have a nested <ul>, like so:

HTML

<ul>
    <li class='static'>Example Menu Item</li>
    <li class='static'>
       Another Example
       <ul class='dynamic'>
            <li class='dynamic'>Dropdown Menu Item</li>
       </ul>
    </li>
</ul>

CSS

ul.dynamic
{
    z-index: 10000;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: #ccc;
    min-width: 200px;
}

li.dynamic
{
    display: block;
    white-space: nowrap;
    /* Fix for bug in IE10/11/Edge */
    list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

The list-style-image setting, if you're wondering, is a fix for a previous bug I found in IE wherein regardless of the list-style or list-style-type setting, the submenu would still have the list "dots" next to it. That encoded data is the smallest possible transparent image.

Tests

I've tried a lot of different things, from setting both the <ul> and the <li> to fixed height, box-sizing: (content-box|border-box), white-space: nowrap, and/or padding: 0; margin: 0;, with no tangible results.

Strangely, if I set basically anything differently in the IE inspector, including changing existing values on the <li>, when the repaint occurs, the <li>'s suddenly snap back to the right height. However, if I put any of those changes in my stylesheet and reload, the same problem occurs.

Furthermore, this problem isn't specific to my machine. I've had a few others (also, Windows 7, IE11) test it and run into the exact same problem. It's also specific to IE. The menu looks fine in every other (up-to-date) browser, but when I run it in 11 or 11's compat modes for IE10 and 9, I see the same issue.

I also cannot created a reduced test case in JSFiddle (or similar), as I cannot replicate this bug in JSFiddle, which is the strangest part. That would also imply that my CSS has more affecting it than I think, but the only things that I did not include in the CSS above are a few styles that only add color & a border-bottom, and some inline styles that are set by javascript to set its top, left, and position correctly as a dropdown menu.

Notes

My doctype is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

And I am not setting any meta tag that would force IE into an older compat mode.

Finally, these <ul> menus aren't hardcoded, they are generated by the ASP.NET <asp:Menu> element with RenderingMode="List" and IncludeStyleBlock="false".

Screenshots

Chrome

Internet Explorer 11 (no-compat mode)

Above is a shot of the <li> in question with the inspector highlighting it, showing no padding or margin making up this

Thanks for taking the time to read all this! If you have any pointers or suggestions, I would be happy to hear it!

It'd be helpful if you posted all of your CSS. I used just the HTML and CSS you provided above, and cannot reproduce your issue. Also, it almost sounds like it could be javascript overriding your styles (by the way you described it working in the inspector, but not when the styles are in your CSS file). — ns1234, Jan 29 '16 at 17:01
@ns1234 hey, thanks for taking a look at this. In the inspector, I don't set inline styles, I set it in the actual selector in question (listed in my original CSS). Also, I have a lot of CSS for this site, but none that applies to these list-items or the ul above it. The only non-listed, JS generated inline style is `position: relative`, which is set by ASP.NET's Javascript. If you still think it's relevant, I'll post my SASS partial that's specific to the header. — Aeolingamenfel, Jan 29 '16 at 17:11
I just can't reproduce it so I can't really help :/ I don't know if this would help, but did you try adding !important to the padding: 0; margin: 0; styles? — ns1234, Jan 29 '16 at 17:15
@ns1234 Yeah, I know. Thanks for taking a look at it, the most frustrating part about this bug is that it comes from something *very specific* to my app/enviroment/etc., and therefore hard for anyone else to replicate. I did try adding `!important` to basically everything I tried. At this point I'm probably just going to inject JS that manually forces a repaint of those elements only when the browser is IE. — Aeolingamenfel, Jan 29 '16 at 17:20
Sounds frustrating. You could also try just commenting out all javascript/css that could affect it. Then once that weird padding isn't getting added, start un-commenting everything piece by piece. Time consuming, but might help you find the culprit. — ns1234, Jan 29 '16 at 17:23
@ns1234 Huh, that's a good idea. Time to comment everything. Thanks for the suggestion. I got it working with a script that forces repaint on those elements, but that just feels like really *bad* practice, so hopefully this'll help nail down the problem! — Aeolingamenfel, Jan 29 '16 at 17:32
@ns1234 Thanks for all your help. I did manage to resolve the issue, which I put into an answer. — Aeolingamenfel, Jan 29 '16 at 18:04

score 0 · Answer 1 · edited May 23 '17 at 11:52

Figured out my issue, shoutout to @ns1234 for helping me out with this.

Turns out there is a bug in IE related to the combination of dynamically modifying content, and using position: relative.

Note that position: relative does not trigger hasLayout, which leads to some rendering errors, mostly disappearing or misplaced content. Inconsistencies might be encountered by page reload, window sizing and scrolling, selecting. With this property, IE offsets the element, but seems to forget to send a “redraw” to its layout child elements (as a layout element would have sent correctly in the signal chain of redraw events).

In essence, either don't use position: relative, or also add an overflow value, like overflow: hidden, to your element, to fix this.

I fixed it by adding overflow: hidden to my sub-menu <ul>, which caused IE to correctly repaint the <li>s I was having trouble with.

score 0 · Answer 2 · edited Feb 10 '19 at 13:35

0

This CSS works for me:

overflow: hidden;
height: auto;

edited Feb 10 '19 at 13:35

Timisorean

1,388
7
20
30

answered Feb 10 '19 at 12:56

Ammar Qala

63
1
8