Q:

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

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>

A:

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%

