4

I have a website that displays correctly in IE7, IE8, IE9, IE10, all PC and Mac versions of Firefox and Chrome, Opera, and Safari. But, in IE11, it displays part of the header and javascript, but none of the html. Any ideas?

http://www.ighome.com

sisve
  • 19,501
  • 3
  • 53
  • 95
Mike
  • 118
  • 1
  • 7

1 Answers1

10

The Network-tab in IE11 Developer Tools shows that there are no requests for your stylesheet, and your <head> content is rendered inline. This indicates that IE11 does not consider the content to be html (and won't parse it as such). You're sending your html with a content-type indicating that it's xml, but with a html doctype. I would try changing the content-type first.

General changes

  1. You're serving html4 with the http-header Content-Type: application/xhtml+xml. It should be text/html.
  2. Html4 does not have self-closing tags.
  3. Your <style> are missing the type attribute.
  4. You have inline styles. This is a personal issue between me and Mr Maintainability.
  5. Some input elements is missing a <label>. Accessibility!
  6. You nest some block elements within inline elements. This is more of a validation issue, I've seen no browser that actually has an issue with this.
  7. Missing html-encoding within <a href="..." />. All amperands (&) must be encoded as (&amp;). You also need url-encoding where approperiate.
  8. There's no width attribute for <div>.

Specific errors

  1. Line 17-27 has a <script> inside a <style>.
  2. Line 196 has a <input> with two value attributes.

Asp.net useragent shazaam

I'm using my advanced superhero skill to detect that you're using ASP.NET. (Or at least have a hidden __VIEWSTATE field and a ASP.NET_SessionId cookie.) You'll need to add a browser configuration file for the asp.net javascript to work.

Asp.net uses useragent detection to determine what your browser supports. The useragent strings are matched against a browser configuration files on your server, and this populates the Request.Browser object. This information determines if your <form runat="server"> should render the __doPostBack-function or not. Internet Explorer 11 is the first Internet Explorer version which does not identify itself as MSIE, and the previous detection fails. You'll need to add a configuration file to your ~/App_Browsers folder (create a new one if missing). This snippet will configure IE11 with ecmascriptversion used to detect support for the postback javascript (among other things).

<browsers>
    <!-- Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko -->
    <browser id="IE11" parentID="Mozilla">
        <identification>
            <userAgent match="Trident/(?'layoutVersion'\d+\.\d+)" />
        </identification>

        <capture>
            <userAgent match="rv:(?'version'(?'major'\d+)(\.(?'minor'\d+)?))" />
        </capture>

        <capabilities>
            <capability name="browser"                 value="IE" />
            <capability name="ecmascriptversion"       value="3.0" />
            <capability name="layoutEngine"            value="Trident" />
            <capability name="layoutEngineVersion"     value="${layoutVersion}" />
            <capability name="majorversion"            value="${major}" />
            <capability name="minorversion"            value="${minor}" />
            <capability name="type"                    value="IE${major}" />
            <capability name="version"                 value="${version}" />

            <capability name="preferredRenderingMime"  value="text/html" />
        </capabilities>
    </browser>
</browsers>
sisve
  • 19,501
  • 3
  • 53
  • 95
  • 3
    Thanks, Simon. I found that I had the mobile.browser file from CodePlex in my App_Browsers folder. It was causing the content type to be served as application/xhtml+xml instead of text/html. Once removed, it displayed as correctly as I would expect for an IE product. I'm in the process of making the other changes you recommended as well as some CSS clean-up. Thanks for your diligence in answering this question. – Mike Oct 18 '13 at 11:57
  • 3
    @Mike/@Simon you completely bailed us out with this one. My team inherited a project with a app_browsers/mobile.browser file in it. (unused of course) If Simon posting the problem and Mike posting what he did to solve it we would have gone completely nuts. Much appreciated! – badMonkey Nov 06 '13 at 21:56