Custom HTML bullets don't work in IE 11 when loading from file via Excel

Question

I'm trying to create an Excel tool that allows people to use templated HTML and preview it within an IE tab. I use en Excel form to create an HTML file, which is saved locally and navigated to within an instance of IE.

Unfortunately, the code doesn't work when I load it from file (it seems to ignore the li:before styling), however it seems to work fine in Chrome, and fine in IE here.

I'm using the following CSS / HTML:

<!DOCTYPE html>
<html>
    <frame name="prevHtml">
    <head>
        <style media="screen" type="text/css">
            body 
            {
                font-size:14px;
                font-family: Helvetica;
            }
            h2 
            {
                font-size:14px;
                margin:10px 0px;
                font-family: Helvetica;
            } 
            p 
            {
                font-family: Helvetica;
            }
            ul {
                margin-left: 0;  
                padding-left: 0;  
                list-style-type: none;
            }
            li {
                position: relative;  
                left: 1em;
            }
            li:before 
            {
                position: absolute;
                left: -1em;
                content: "-";
            }
            table.dims
            {
                font-size:14px;
                font-family: Helvetica;
                border-collapse: collapse; 
                border:solid 1px #eee; 
                border-bottom: 2px solid #eee;
                margin-bottom:30px;
            } 
            table.dims tr:hover 
            {
                background: #f4f4f4;
            }
            table.dims tr:hover td 
            {
                color: #555;
            }
            table.dims td
            {
                padding:3px 12px 3px 12px; 
                border-right:solid 1px #eee;
                font-size:13px;
                text-align:left
            }
            table.dims th 
            {
                padding:5px 0px;
                text-align:left
            } 
            .grey 
            {
                background-color:#eee;
            } 
            .links 
            {
                background-color:#000; 
                color:#fff; 
                padding:6px; 
                font-size:12px; 
                margin-right:10px;
            } 
            #bar 
            {
                float:left; 
                width:980px; 
                margin-bottom:15px;
            }
        </style>
    </head>

    <body>
        <ul>
            -<li>item1</li>
            -<li>item2</li>
            -<li>item3</li>
        </ul>
    </body>
</html>

Any ideas?!?!

UPDATE:

After simplifying the below code, saving it to a text file and opening that in IE 11, it looks like this:

css issue

<!DOCTYPE html>
<html>
<frame name="prevHtml">
    <head>
        <style media="screen" type="text/css">
            body {
              font-size: 14px;
              font-family: Helvetica;
            }
            ul {
              margin: 0;
              padding: 0;
              list-style-type: none;
            }
            .absolute li {
              position: relative;
              left: 1em;
              width: 99% /* add this [or another value that fits you best] to avoid horizontal scrollbar */
            }
            .absolute li:before {
              position: absolute;
              left: -1em;
              content: "-";
            }
            .relative li {
             /* position: relative; not needed in this case */
            }
            .relative li:before {
              position: relative;
              content: "-";
              margin-right:.6em
            }
        </style>
    </head>
    <body>
        <h1> absolute ::before </h1>
            <ul class="absolute">
              <li>item1</li>
              <li>item2</li>
              <li>item3</li>
            </ul>
        <hr />
        <h1> relative ::before </h1>
            <ul class="relative">
              <li>item1</li>
              <li>item2</li>
              <li>item3</li>
            </ul>
    </body>
</html>

Is [this](http://jsfiddle.net/pcda1dt6/) what you are trying to achieve? — fbid, Dec 02 '15 at 15:08
but it ends up looking like [this](http://jsfiddle.net/pcda1dt6/2/) instead — jptk, Dec 02 '15 at 15:20
Use that code and include the li:before class like in my fiddle and you are done. I posted the complete answer below, you can accept it if it's working for you. thanks — fbid, Dec 02 '15 at 15:27
the problem remains! check my update to the question where I've used your css/html and still got the issue (attached screenshot). — jptk, Dec 02 '15 at 15:39

dippas · Accepted Answer · 2015-12-02T15:58:57.610

1

Stripping your code to the basics, it works, take a look:

Snippet with 2 options absolute and relative on ::before

body {
  font-size: 14px;
  font-family: Helvetica;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.absolute li {
  position: relative;
  left: 1em;
  width: 99% /* add this [or another value that fits you best] to avoid horizontal scrollbar */
}
.absolute li:before {
  position: absolute;
  left: -1em;
  content: "-";
}

.relative li {
 /* position: relative; not needed in this case */

}
.relative li:before {
  position: relative;
  content: "-";
  margin-right:.6em
}

<h1> absolute ::before </h1>
<ul class="absolute">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
<hr />
<h1> relative ::before </h1>
<ul class="relative">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

SS IE11

Note: This was tested on IE11 and works 100%

edited Dec 02 '15 at 15:58

answered Dec 02 '15 at 15:21

dippas

58,591
15
114
126

I thought as much, however if I save the following to a text file and then open it in IE 11, it ignores the '-' – jptk Dec 02 '15 at 15:26
item1
item2
item3

jptk

Dec 02 '15 at 15:27

the problem remains - check the update to the question, using your html saved as a .html and opened in IE 11 – jptk Dec 02 '15 at 15:46

here is your issue: `` just remove it! – dippas Dec 02 '15 at 15:49

deleted that line and same problem in IE 11. if i open the file in chrome or firefox, i get the correct bullets.... – jptk Dec 02 '15 at 15:51

did you try saving the code as a .html and navigating to the path in IE? – jptk Dec 02 '15 at 15:53

I updated my answer with the test (that I already had done). here is the image , just in case [Screenshot](http://i.stack.imgur.com/ZESyB.jpg). I tested locally and on the server, both works – dippas Dec 02 '15 at 15:59

very weird. looks like it's something to do with my install of IE 11. many thanks for your help. marked as solved as it works on a colleague's PC too. – jptk Dec 02 '15 at 16:07

a piece of advice, run anti-malware/spyware , it might something related to that – dippas Dec 02 '15 at 16:09

fbid · Answer 2 · 2015-12-02T15:35:08.803

0

You can achieve this using li:before class with content:'-' rule in your CSS.

li:before{
  position:aboslute;
  margin-right:1em;
  content:'-';
}

And just use a simple unordered list in your HTML code

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

This is a fiddle with the working code: http://jsfiddle.net/pcda1dt6/3/

edited Dec 02 '15 at 15:35

answered Dec 02 '15 at 15:29

fbid

1,570
2
18
29

Unfortunately that doesn't seem to work when I load into IE 11 from an html file. See the update to the original question above. – jptk Dec 02 '15 at 15:40

Custom HTML bullets don't work in IE 11 when loading from file via Excel

2 Answers2

Note: This was tested on IE11 and works 100%