Tasos Tasos - 5 months ago 74
CSS Question

Cannot remove bullets from list on Internet Explorer 11

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?

Answer

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.

Comments