Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Site Doesn't Display Correctly in IE11

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

like image 752
Mike Avatar asked Dec 25 '22 19:12

Mike


1 Answers

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>
like image 198
sisve Avatar answered May 01 '23 22:05

sisve