37

I am using the Superfish jQuery plugin for my menu. In Chrome and in mobile Opera emulator it works fine but in Internet Explorer 11 the CSS property list-style:none only applies to the top level of the menu and not to the toggled submenus, although in the dev tools view it seemingly applies to the appropriate elements. It results in this : Bugged menu The used this CSS:

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sf-menu li {
    position: relative;
}
.sf-menu ul {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    z-index: 99;
}
.sf-menu > li {
    float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
    display: block;
}

.sf-menu a {
    display: block;
    position: relative;
}
.sf-menu ul ul {
    top: 0;
    left: 100%;
}


/*** DEMO SKIN ***/
.sf-menu {
    float: left;
    margin-bottom: 1em;
}
.sf-menu ul {
    box-shadow: 2px 2px 6px rgba(0,0,0,.2);
    min-width: 12em; /* allow long menu items to determine submenu width */
    *width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
    border-left: 1px solid #fff;
    border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
    border-top: 1px solid rgba(255,255,255,.5);
    padding: .75em 1em;
    text-decoration: none;
    zoom: 1; /* IE7 */
}
.sf-menu a {
    color: #13a;
}
.sf-menu li {
    background: #BDD2FF;
    white-space: nowrap; /* no need for Supersubs plugin */
    *white-space: normal; /* ...unless you support IE7 (let it wrap) */
    -webkit-transition: background .2s;
    transition: background .2s;
}
.sf-menu ul li {
    background: #AABDE6;
}
.sf-menu ul ul li {
    background: #9AAEDB;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
    background: #CFDEFF;
    /* only transition out, not in */
    -webkit-transition: none;
    transition: none;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
    padding-right: 2.5em;
    *padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1em;
    margin-top: -3px;
    height: 0;
    width: 0;
    /* order of following 3 rules important for fallbacks to work */
    border: 5px solid transparent;
    border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
    border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
    border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
    margin-top: -5px;
    margin-right: -3px;
    border-color: transparent;
    border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
    border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
    border-left-color: white;
}

(The menu ul has the class of sf-menu). What is even more interesting is that on the second or another visit of the same page it displays properly. However on the first load of the IE instance it always displays wrong.

EDIT: When I set the list style rule for every ul instead, it works as expected.

2
  • Welp, 10 was nice ... Welcome back to normal IE ... wonders if this means FF will finally fix it's CSS crashing JS issue and get back to being a useful browser ...
    – SpYk3HH
    Dec 3, 2013 at 16:25
  • 1
    Can you post fiddle reproducing the problem? Because it's not happening here: jsfiddle.net/tyqSm/1 Dec 4, 2013 at 1:51

15 Answers 15

49

Reply to Peter:

No idea if this would be better. Copied from the jquery git

list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
5
  • This is the best answer! Thank you! Aug 8, 2015 at 12:42
  • Great! Works for me. Thanks for drilling to jquery git and finding this out, awesome :) Jul 13, 2016 at 16:18
  • Do you apply this to the <ul> or the <li>? Jul 19, 2016 at 14:35
  • 1
    @stackingjasoncooper I applied this to the <ol> <li> and it worked like a charm.
    – Mark Lohr
    Aug 17, 2016 at 19:32
  • This works for me. The answer below — url(data:0) — did not. For those wondering, the code above creates the smallest data URI for a transparent image. (via stackoverflow.com/questions/6018611/…) May 9, 2019 at 16:19
20

I had a similar issue in IE11 and setting the list-style for the ul didn't solve it. But I found the following solution here which did work for IE11:

.sf-arrows li {
    list-style-image: url(data:0);
}
3
  • 7
    This gives a 404 error in Chrome, and consumes 200ms of loading time. Please see Dummy's answer below for a better take on this approach. Aug 5, 2015 at 1:20
  • Or just wrap it in an IE/Edge media query?
    – brandito
    Dec 10, 2017 at 22:57
  • This was the only solution that seemed to work for me.
    – brandito
    Dec 10, 2017 at 23:16
9

Documented here

Had the same problem. It's a bug in ie 10 and 11. list-style: none doesn't get applied if the list also has styles display: none in an external style sheet. It works if you apply display none inline on the element and remove it from the external css.

<ul style="display: none;"></ul>
0
9

I had exactly the same problem in IE 11.

Adding an inline style to the <ul> element worked for me:

<ul style="list-style: none;">

Setting list-style: none in an external CSS file did not seem to work.

1
  • 1
    This method worked for me but.. This IE-Bug also messes with the list-style position. To fix that as well I added "list-style-position: inside" as well in the element: <ul style="list-style: none;list-style-position: inside;">
    – Svakinn
    Oct 8, 2014 at 10:12
5

Add the style to the UL

.flexnav ul {
    list-style: none;
    list-style-image: none;
    list-style-type: none;
}
2
  • 1
    This should've been the chosen answer because it address the actual styles on IE that need addressing and not the other workarounds posted here.
    – Native Dev
    Apr 23, 2018 at 16:45
  • 1
    I agree 100% with @bit-less with this being the correct (and still relevant) answer. Explicitly setting each property resolved Bootstrap 3.3.7 .dropdown-menu issues I was experiencing in Microsoft Edge 42.17134.1.0.
    – Mavelo
    Sep 2, 2018 at 16:51
3

Positionning the bullet outside and applying an hidden overflow on the li did it for me. It is still there but can't be seen. So:

li {
list-style-position: outside;
overflow: hidden;
}
1
  • This worked perfect; I also wrapped those two lines in this media query to only affect IE since it threw off the margin-top of the first li. @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    – Catto
    Feb 3, 2016 at 16:41
2

This solution works perfectly for me, the only one tha worked

.sf-arrows li {
list-style-image: url(data:0);
}

Thank you for sharing it

0
1

I had the same problem with IE10 & IE11. Using <ul style="display: none;"></ul> did not work for me but

.sf-arrows li {
    list-style-image: url(data:0);
}

worked perfect! Peter's solution above should be marked as the answer.

1

Among the solutions above, nothing worked for me in IE11, which randomly most times popped out the dots and sometimes not, respecting the varoius list-style-type, list-style-image etc. as suggested above.

I eventually solved simply by adding list-style-type:none inline instead than in my .css

1

Just place it in "head" tag:

<style>
    ul { list-style-type:none }
</style>

You're wellcome :)

1

I tried all of the above solutions but the only thing that worked for me is setting color of li element to white (the color of background) and wrapping text inside li with span tags and setting the color of the span element to standard color. Like this:

<style>
li {
color: white;
}
li span {
color: black;
}
</style>

<ul>
<li><span>Some text</span></li>
<li><span>Some text</span></li>
<li><span>Some text</span></li>
</ul>

I know this is not best practice but is some kind of workaround that definitely works.

0

have you inspected the element in the F12 tools to see how the CSS is applied? In IE 11 right-click the element and select inspect element to get you there quickly.

Checked the network waterfall to ensure all the files were actually loaded (no 404s or pending files)?

0

Not pretty, using jQuery, but hey, it's a darned annoying bug. (Really takes me back man!)

    // Mitigate IE/Edge bug showing bullets on lists which are hidden when loading the page
    $(document).ready(function(){
        if (document.documentMode || /Edge/.test(navigator.userAgent)) {
            $('ul:hidden').each(function(){
                $(this).parent().append($(this).detach());
            });
        }
    });
0

To fix this bug, just write the following code:

ul li {
list-style:none;
list-style-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

Hope this helps. :)

-2

I run into this problem a lot. I find that wrapping my CSS in a media query of @media with list-style:none; usually works.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.