Ie7 Ignores Css Attribute Selector Only On Pages Coming From Production Server

On my website, IE7 seems to be ignoring certain CSS attribute selectors. The strange thing is that it only happens when the page comes from the production server. If I have the exa

Solution 1:

As discussed in the comments, according to this answer by thirtydot and this answer by scunliffe, it seems very likely to be the effect of a security feature in Internet Explorer. Your production server lives within your intranet, and is being accessed via a private, class A IPv4 address (10.*.*.*), which I suspect basically causes IE7 to render pages in quirks mode (and IE8 and newer to render pages in Compatibility View).

All this is just a guess, though, I'm afraid — I haven't been able to reproduce your problem in any IE browser on any system, at least not on your personal server or with my own files. If your production server is open to public access, not just technically, perhaps you could provide a link to it so we can debug further, as the problem is obviously localized to just your production server.

Solution 2:

I just played around with the code on your personal server (eliasz.net), a file served through the file:// protocol, and served on a local server.

Your personal server and when rendered through the file:// protocol are both rendering correctly as they are rendered in 'edge' mode (the latest, rather than compatibility mode). However, on your production server and on your development server, they are rendering in compatibility mode. As BoltClock said, intranets do this by default. Obviously, this would apply for your development server (on a local IP like 10.1.10.34).

I think the production server is also on your local network, although it has a public static IP. In other words, when you are on the local network, the production server is served through the local network, not the internet. Hence, IE7 still sees it as an intranet site. Use nslookup to check how IE7 is resolving the domain name.

To get round the issue, you can add this to your header:

<metahttp-equiv="X-UA-Compatible"content="IE=9" >

and then turn off the setting in your IE that causes it to render intranet sites in compatibility mode.

Solution 3:

Be aware that certain conditions can force Internet Explorer to display pages in a document compatibility mode different from the one specified in the webpage. These include, but are not limited to, the following situations:

• Compatibility View is enabled for the page.

• The page is loaded in the Intranet zone and Internet Explorer is configured to use Compatibility View for pages loaded from the Intranet zone.

• Internet Explorer is configured to display all websites in Compatibility View.

• Internet Explorer is configured to use the Compatibility View List, which specifies a set of websites that are always displayed in Compatibility View.

• The Developer Tools are used to override the settings specified in the webpage.

• The webpage encountered a page layout error and Internet Explorer is configured to automatically recover from such errors by reopening the page in Compatibility View.

Source: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

From this we can derive your running a site on your local intranet, ie 7 can't turn off this of the rendering as in ie8 you can stop local intranet sites being rendering in compat mode.

10.x.x.x ip address production server

file:// essentially local host

http:// through your local server

UPDATE:

Okay apologies IE has numerous problems running on the intranet, IE8+ is the issue above as you mentioned IE7 doesn't use compat mode it has quirks and standard. Knowing microsoft though they may have messed it up in one of the ie7 patch updates but I hate assumptions so if someone knows please let me know.

To resolve the issue I am afraid I can't give you a software level solution or a hardware change. If its always going to be an intranet site then I recommended upgrading network browsers to ie8 minimum.

I do have a html, css fix however(i know this is not what you want):

<!DOCTYPE HTML><html><head><title>IE display test</title><styletype="text/css">#buttons { 

        } 

        #button {
            display:block;
        }
    </style></head><body><divid="buttons"><inputid="button"type="button"value="Button 1"/><inputid="button"type="button"value="Button 2"/><inputid="button"type="button"value="Button 3"/></div></body></html>

It doesn't seem to like [type="buttons"] using display:block;.

Solution 4:

I see that one page is .html and the other is .php. It might be possible that your php page has some character (maybe hidden) before the doctype. It could make a difference on how IE accepts HTML and CSS.

Solution 5:

I just ran into this with both IE8 and IE9 and I found the solution!

Now this may not translate exactly to IE7, but it should point you in the right direction.

• Look through the menus for an item called "Compatibility View".
• Give it a click and it opens a dialog where you can add websites to be shown in "Compatibility View".
• Look below the list for a check box labeled "Display intranet sites in Compatibility View"
• Uncheck it.

It appears that Microsoft considers a host part of the "intranet" when it is:

• joined to the same domain,
• identified by an unqualified host name (ex "server" vs "server.example.com"), or
• identified by a private IP address (10.x.x.x, 172.16-31.x.x, 192.168.x.x)

It also looks like nothing is considered "intranet" if the client system is not joined to a domain.