Internet Explorer not rendering the leading text in a custom list item

Question

This is a follow-up to How to create a custom list style with a dash.

Specifically, my question concerns Internet Explorer 9. (Refer to my sample XHTML document at the end of this question. My sample document includes inline CSS.)

When I view my sample XHTML document as a local file, I see the expected result in IE9:

Here is a list:
- One
- Two
- Three

However, when I view this same XHTML document via IIS, I see something different in IE9:

Here is a list:
  One
  Two
  Three

That is, IE9 is not rendering the dash that is intended to appear at the beginning of each list item.

(Note that Firefox 31 does render the dash when the file is viewed locally as well as via IIS.)

Could this problem be related to the HTTP headers being returned by IIS? Here are the key headers that my instance of IIS is returning:

200 OK
Date: Tue, 09 Sep 2014 18:41:34 GMT
Server: Microsoft-IIS/7.5
Content-Length: 706
Content-Type: text/html
Title: Custom List Item Test
X-Powered-By: ASP.NET

Sample XHTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Custom List Item Test</title>

    <!-- https://stackoverflow.com/a/24279072/1497596 -->
    <style type="text/css">
      ul
      {
        list-style-type: none;
      }

      ul > li:before
      {
        content: "-";
        position: absolute;
        margin-left: -1.1em;
      }
    </style>
  </head>
  <body>
    <h1>Here is a list:</h1>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </body>
</html>

Wasn't IE able to respond differently to local and remote content? I seem to remember that you could tell IE to use compatibility mode mode for all local content or things like that. Check the settings. And/or what happens if you put an explicit x-ua-compatible header in the http (or as a http-equiv in the source)? — Mr Lister, Sep 11 '14 at 18:20
**Related:** [Differences in Internet Explorer behaviour between system deployed locally and remotely](http://stackoverflow.com/q/5567021/1497596) — DavidRR, Sep 11 '14 at 20:54
**Related:** [Internet Explorer and X-UA-Compatible](http://stackoverflow.com/q/6771258/1497596) — DavidRR, Sep 11 '14 at 20:57

DavidRR · Accepted Answer · 2014-09-12T21:06:24.493

@Mr Lister, your comment pointed me to a solution.

I found that my IE9 Compatibility View settings were as follows:

[x] Include updated website lists from Microsoft
[x] Display intranet sites in Compatibility View
[ ] Display all websites in Compatibility View

My web page of interest is being served by IIS on a server that is a member of my intranet. And because the second check box was checked, IE9 rendered the page using Compatibility View settings. After clearing the second check box, the dashes that introduce each list item became visible.

With the settings that I show above, IE9 initially did display the list item dashes when I viewed the document from my local disk. However, when I checked the third check box, the dashes disappeared from the list.

So, that explains the different results that I observed when viewing the document locally vs. viewing it via IIS.

Internet Explorer not rendering the leading text in a custom list item

1 Answers1