CSS remove bullet points on internet explorer

Question

I have a bullet points issue in Internet Explorer. I already tried to remove the doubled displayed bullets in ie, but I can't figured out why they always be displayed. In Internet Explorer 11 it shows my own icon (a green hook) and the generated icon from the browser. I want to keep the green hook and would like remove the gray bullets. Please take a look here. If you don't have Internet Explorer, please take a look at my screenshot . Thanks!

My CSS Code to generate the bullets:

ul,li, .nav ul, .nav li {
    list-style:none;
    list-style-type: none;
    list-style-position:inside;
    margin:0;
    padding:0;
}
.content ul{list-style:none;margin-left:0;padding-left:0em;text-indent:0em;}
.content ul li:before{
    content:'';
    background:url(http://www.deutsch-vietnamesisch-dolmetscher.com/i/haken-gruen.png) no-repeat;
    background-position:left center;
    padding:0 0 0 20px;
    margin:0 0px 0 0;
    list-style:none;
    white-space:normal
}
.content ul {padding: 0 0 0 15px;}
.content ul li ul {padding: 0 0 0 15px;}
.content ul li.list:before{background: none;}

score 3 · Answer 1 · answered Feb 19 '15 at 20:14

The bug comes from pagespeed optimization. When I add the css code directly before the closed body, then the unwanted bullets appear. If I embedded the css file directly in the head, then everythings theem to be ok. I hope someone need this solution too.

score 1 · Answer 2 · edited Aug 23 '16 at 12:39

1

Please remove list-style-position: inside; from line 3 of your CSS file. It will remove bullets from list items.
To remove bullets and tick marks from social buttons, you need to use background image wisely and target specific pseudo element. Please read about it in CSS specification to understand it better.

.socializm ul li:before {
    background: none;
}

edited Aug 23 '16 at 12:39

dakab

5,379
9
43
67

answered Feb 19 '15 at 15:23

Anwar Hussain

450
2
12

If you want I can help directly on page. There are so many times you wrote `list-style: none;` in `li` and `ul`. That might be the issue. I checked inspecting element and that worked. – Anwar Hussain Feb 19 '15 at 17:11

score 1 · Answer 3 · answered May 31 '16 at 12:24

1

I'm having the same trouble of nickName: I just applied a speed optimization appending static resources at the end of body tag (couldn't make dynamic ones) and IE11 doesn't render (some of) the LIs correctly. When I moved the

<style type="text/css">
    ul li {
        list-style: none;
    }
</style>

part to the header, everything restarted working correctly.

answered May 31 '16 at 12:24

massic80

322
4
15

After four hours of debugging and searching, this is the only answer that fixed the same issue for me. Lists that start as hidden with `display: none` and then shown with Jquery will always ignore list-style and show bullets in IE. Adding this inline style was the only fix, however has generated heaps of problems elsewhere in the app. This bug has been in IE since 2007 from what I can gather. – Aaron Lavers Jun 15 '16 at 04:09

Nickname · Accepted Answer · 2016-06-02T07:30:57.813

1

The solution is to load the CSS code lazy with JavaScript loadCSS from scottjehl. His framework loads a CSS file asynchronously. Please search for loadCSS from [c]@scottjehl, Filament Group, Inc.

edited Jun 02 '16 at 07:30

answered May 31 '16 at 20:07

Nickname

99
1
12

New version 2016: https://github.com/filamentgroup/loadCSS Old Version example 2014: https://martinwolf.org/blog/2014/12/load-css-asynchronously-with-loadcss – Nickname Jun 02 '16 at 07:25

score 0 · Answer 5 · answered Feb 19 '15 at 15:45

It's because you applying list-style: none; to the parent and not the child li. Your also applying it to the pseudo-class :before. You just need it on the actual list-item itself.

You code is:

.content ul{list-style:none;margin-left:0;padding-left:0em;text-indent:0em;}
.content ul li:before{
    content:'';
    background:url(http://www.deutsch-vietnamesisch-dolmetscher.com/i/haken-gruen.png) no-repeat;
    background-position:left center;
    padding:0 0 0 20px;
    margin:0 0px 0 0;
    list-style:none;
    white-space:normal
}

Your code SHOULD be:

.content ul{margin-left:0;padding-left:0em;text-indent:0em;}
.content ul li:before{
    content:'';
    background:url(http://www.deutsch-vietnamesisch-dolmetscher.com/i/haken-gruen.png) no-repeat;
    background-position:left center;
    padding:0 0 0 20px;
    margin:0 0px 0 0;
    white-space:normal;
}
/* -- added -- */
.content ul li{ list-style: none; }

I don't know why it does not help me. Do I run in cache issues? — Nickname, Feb 19 '15 at 16:08
Try clearing your cache or pressing Ctrl+F5 to do a hard refresh? — Gerico, Feb 19 '15 at 16:09

score -1 · Answer 6 · edited Jun 04 '15 at 10:55

-1

Css:

  li {list-style: none;}

you need to apply, use just tag li and that's it. The problem is solved

edited Jun 04 '15 at 10:55

Deepak Mankotia

4,404
6
30
55

answered Jun 04 '15 at 10:22

dfsdfsd

1

CSS remove bullet points on internet explorer

6 Answers6

Linked