Cannot remove bullets from list on Internet Explorer 11

Question

I have a ul list and I cannot make Internet Explorer stop showing bullets on the li. I tried every way I could found on web, but they are still there.

HTML code:

<ul>
    <li>
        <a href="/mydomain.com/en">EN</a>
    </li>
    <li>
        <a href="/mydomain.com/fr">FR</a>
    </li>
</ul>

CSS code:

ul {
    margin: 0;
    padding: 0;
    height: 100%;
    list-style: none;
    // tried also list-style-type: none;
}

ul li {
    display: inline;
    list-style: none;
    // tried also list-style-type: none;
    float: left;
    padding: 0;
    height: 100%;
    margin: 0 !important;
}

UPDATE WITH THE SOLUTION

There was also some other CSS rules which was crossed out and they should not applied on the website. One of them was:

li:before {
    content: '\25A0';
}

As I said, this CSS was crossed out in the developer tools, in both Chrome, Mozilla and IE. However, when I added in my stylesheet the content:none, the bullets just disappeared. Probably a bug on IE that uses the content that are crossed out?

First thing to do when it comes to a browser issue: Which version(s) of IE? Old IE is notorious for being, ahem, "special". — Sam A. Horvath-Hunt, Sep 07 '15 at 16:27
Try to put also `list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);` ([source](http://stackoverflow.com/questions/20356311/internet-explorer-11-ignores-list-stylenone-on-the-first-load)) — aghidini, Sep 07 '15 at 16:40
@AndreaGhidini Unfortunately, nothing. I added it to both ul and li. — Tasos, Sep 07 '15 at 16:45
Is there some rule that takes precedence (maybe some css included only in IE)? Did you try with `!important`? What does the dev tools tell about the `li` and `ul` elements? — aghidini, Sep 07 '15 at 16:51
Tried it also with `!important`. And in the developer tool, the rule is not crossed. — Tasos, Sep 07 '15 at 16:54
Are you using an external stylesheet or is your CSS embedded or inline? — Michael Benjamin, Sep 07 '15 at 16:58

score 2 · Accepted Answer · edited May 23 '17 at 12:08

2

I was not able to replicate the problem in IE11. I tested using external, embedded and inline styles, and in all cases the bullets were removed normally and without any issue.

However, this is a documented problem.

It appears to be a bug in IE11. Some have found a workaround by moving style rules from the external stylesheet to the <head> section of the document (i.e., using embedded styles). Others have found a solution with the list-style-image property.

edited May 23 '17 at 12:08

Community

1
1

answered Sep 07 '15 at 17:03

Michael Benjamin

346,931
104
581
701

Added on the `` directly in ` – Tasos Sep 07 '15 at 17:14
Can you post a link to a live site or demo? – Michael Benjamin Sep 07 '15 at 17:15
It is behind a coming soon page and I cannot open it for the next week. – Tasos Sep 07 '15 at 17:17
Just saw that I have this error on the console: `Failed to load resource: net::ERR_INVALID_URL` for the `list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRA‌A7);` – Tasos Sep 07 '15 at 17:32
Unfortunately (like I mentioned), I am unable to replicate the problem. Everything is working fine here on IE 11. But go through the link references I posted. There are various different solutions that have worked for others. – Michael Benjamin Sep 07 '15 at 17:40
This problem in IE11 seems to pop "randomly" for me, i solved it once for all by adding basic list-style-type:none inline instead than in external css – Emi-C Sep 23 '16 at 09:30

Cannot remove bullets from list on Internet Explorer 11

1 Answers1