cflayout tab - forces document mode to IE 7 Standards

[Guest]

I have no idea why this is happening, but when I view any page that has tabs using cflayout, the document mode changes from IE 8 to IE 7. The site is running on Windows 2003, CF 9.0.1. The site is specifying an IE-8 document mode by using:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

The site is:

www.tetonscience.org

A page with the problem is:

http://www.tetonscience.org/index.cfm?id=calendar&eventID=9062C89F-1422-0A0A-8C93EB40719B34A6

If you look at the this page in IE, you'll notice that the document mode default is set to IE 7, even though the meta tag (above) is in the source code. Then if you click on the link that says:

< view all Teton Science Schools' events

You will get to a page without any tabs, and you'll see that the document mode goes back to IE 8.

I cannot replicate this on my Windows 7 development machine, which tells me that it must be some sort of server issue. Any ideas?

[Guest]

Hi there

I think you might be a bit confused about the compatibility modes, becuase the tabs page isnt being displayed in IE7 mode (by default anyway).  IE8 will only emulate IE7 if one of the following is true:

• the meta tags specifies to
• the user has added the domain to their custom list
• your domain is on the MS managed list and the user has elected to use this list.

The ie team have some good posts on this: http://blogs.msdn.com/b/ie/archive/2009/02/16/just-the-facts-recap-of-compatibility-view.aspx

But I think you are just refering to the fact that the compatibility mode button is being displayed, despite the tag specifiying ie8?

I think the problem might be the meta tags position, on the page were it is working it comes right after the head tag.  I would also run your page through the w3c validator.  Two related problems could be:

• http headers specify encoding as utf-8 and a meta tag specifies iso-8859-1
• the html doctype is html, but the tags are written as xhtml

Hope this helps

Cheers

[Guest]

Thanks for the reply! The compatability mode tab is there because I have the developer toolbar turned on.

According to the MS documentation, you can override the MS compatability list by adding (to the head element):

<meta http-equiv="X-UA-Compatible" content="IE=8" />   (I personally like using "IE=edge")

This tag is present in all the pages on the site and it seems odd that the order in which it appears in the head would be the problem. It's also important to note that I cannot replicate this behavior on my local development machine (Windows 7, IIS 7.5, CF 9.0.1), but when I view the exact same page on the production server, (Windows 2003, IIS 6, CF 9.0.1) the problem occurs.

[Guest]

OK... I still don't know why adding cf tabs would affect this, but I was able to solve the problem by adding a custom HTTP header to IIS on the production server. I added:

Custom header name: X-UA-Compatible

Custom header value: IE=edge

(X-UA-Compatible: IE=edge)

For some reason, this forces IE to respect the meta tag in the page content. I would still be very interested to know why adding tabs to the page affected the way IIS handles the compatibility mode.

[Guest]

If you put the tag in your http header the you wont need the html meta tag.  So its not forcing it to respect the meta tag, its overriding it.

I also found this: http://msdn.microsoft.com/en-us/library/cc817574.aspx and according to it, the position of the meta tag in the head tag is important:

"The X-UA-compatible header is not case sensitive; however, it must appear in the Web page's header (the HEAD section) before all other elements, except for the TITLE element and other META elements."

So that would explain why it work on the page without tabs and not on the page with tabs.

Cheers

[Guest]

Wow... I would never have guessed that it would be order-sensitive. I changed it server-wide, so I guess I can get rid of that tag.

However I wonder if CF should be aware of this tag when inserting stuff into the head of a document since it is order-sensitive... especially since the CF tabs break in IE 7. The first tab's height is incorrectly rendered... I made another separate post about this issue. So if you are trying to force IE to render using the most current document mode via this meta tag, and then you use one of the CF ext tags, there's a conflict.

[Adam Cameron.]

I'd look at it the other way around. It sounds like the sort of thing better set as a proper header, rather than using a meta tag to set a header equivalent.

--

Adam