Styles not applied in IE8 but in Chrome and Firefox they are

Question

I have the following html in a website. The stylings specified in "ApplicationName_ButtonDiv", "ApplicationName_Button" etc are applied correctly in Chrome and Firefox but in IE8 they aren't.

<div class="CommandButtonContainer">
   <div class="ApplicationName_ButtonDiv">
      <button id="changeName" type="button" class="ApplicationName_Button"onclick = "javascript: window.location='/Application/Customer/EditName';" >
         <a href="#" class="ApplicationName_Button">
            <span>
               <span>Change Name</span>
            </span>
         </a>
      </button>
   </div>
</div>

1) There is an error on the page only in IE8:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; chromeframe/18.0.1025.162; InfoPath.1; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E) Timestamp: Sun, 11 Aug 2013 10:06:22 UTC

Message: Permission denied Line: 5514 Char: 3 Code: 0 URI: NAME OF SITE REMOVED/publishmode.xxxjs

This seems to relate to:

 5513 contents: function( elem ) { 5514 return jQuery.nodeName( elem, "iframe" ) ? 5515 elem.contentDocument || elem.contentWindow.document : 5516 jQuery.makeArray( elem.childNodes ); 5517 } 

2) When you view the html in IE Developer Tools it appears slightly, but importantly, differently to when you view source:

<div class="CommandButtonContainer">
   <div class="ApplicationName_ButtonDiv">
      <button class="ApplicationName_Button" id="changeName" onclick="javascript: window.location='/Application/Customer/EditName';" type="button">
         <a class="ApplicationName_Button" href="#"/>
         <span>
            <span>
           Text - Change Name
            Text - Empty Text Node (italics)
         </a/>
      Text - Empty Text Node (italics)

The anchor tag has been closed and the span tag isn't now wrapped in it. The styling relies on there being an anchor with two spans inside. This may just be a quirk of the Tool as I have only just started using it.

If you have any ideas as to what is causing this issue please let me know. Thanks John

Answer 1

Make your button into an a tag:

You have:

<button id="changeName" type="button" class="ApplicationName_Button"onclick = "javascript: window.location='/Application/Customer/EditName';" >
         <a href="#" class="ApplicationName_Button">
            <span>
               <span>Change Name</span>
            </span>
         </a>
      </button>

Try making it just:

<a id="changeName" class="ApplicationName_Button" type="button" onclick="javascript: window.location='/Application/Customer/EditName';">Change Name</a>

See if that works for you...Just that section alone the way you have doesn't really make sense. Also, you have a span within a span...why?

Answer 2

If IE's Dev Tools shows the layout differently to how you expect it, then it's usually a sign that there are HTML errors in your code that are causing IE's parser to choke a bit. So the first thing to do is check for that: Go to the W3C's HTML Validator and fix any errors that it reports.

This could also possibly account for the missing styles; it's hard to be sure without seeing it in action, but if you're lucky, that'll solve that problem too. If it doesn't, then you'll need to show us the relevant CSS in order to get more help. (edit the question to include it).

The CSS could well be relevant, particularly for a <button> tag, as the default styles for buttons are not completely consistent cross-browser, particularly older browsers like IE8. You might want to consider using a CSS "Reset" stylesheet to normalise some of the browser differences like this.

You mention a Javascript permission denied error. I don't think that's relevant to your button not being styled properly (though to be honest, it's impossible to tell given the limited amount of code you've given), but it would obviously still be a problem and would be breaking something on your site, even if it isn't that.

The permission problem is to with your JS code trying to access the contents of an iframe element. If you're getting permission errors, then it means that the browser thinks that the page inside the iframe is from a different domain to that of your main site, and thus it won't let your code modify it for security reasons.

I don't know what this iframe is on your site, but whatever it is, it would seem that any code that works inside it is not going to work.

IE8's security model is fairly good in this respect, but does have some quirks. One in particular catches a lot of people, which is that an empty page - ie defaulting to the about:blank URL - can be considered from a different domain. In this case, it clearly doesn't matter, but the browser isn't smart enough to know that. If that's your problem you can work around it by having the code load a dummy page from your site rather than using about:blank as the default.

There are other possible quirks that could be happening, but from the detail I've got from the question, that seems to be the most likely.

Hope that helps.