rob cherny.com

About

My name is Rob Cherny and I'm a professional Web Developer with 11 years of experience creating Web sites and Web-based applications. This site is where I write about my work, and random other things...

Learn More

Loading...

Close Tab

Recently

The IE 8 X-UA-Compatible Meta Tag

So the IE 8 Beta 1 for developers has been out for a bit now and there's some interesting tidbits to be found by playing with it. Some of the biggest news was the switch to a standards-mode by default. You might start checking out your sites in IE 8 just to see what's going on, but I wouldn't put much time and effort into fixing much of anything as it is a developer beta, and there are liable to be a bunch of fixes coming later.

Compatibility Mode

However, prior to and when IE 8 is officially released, you now have the added benefit of being able to implement your fixes when you have a chance by using the IE 8 X-UA-Compatible meta tag. In fact, on several sites that I work on a semi-regular basis, including this site, NavigationArts.com, and BehindtheBadge.com, and a few others, I've already dropped the tag in based on the site's having some issues in IE 8. Now they're "fixed", at least for the short term, and will not break when IE8 is released.

Basically, the meta tag allows the site to render using the IE 7 engine that you've already tested your sites on. Great. However, the first time I slapped that tag in there, nothing happened. Seriously. The site was still broken.

Location in the HEAD Matters

That is, at least in the beta. That could change. However, given that this is a "http-equiv" type meta tag, this doesn't shock me. The notion of these tags is that they're serving a similar purpose to the same HTTP Headers which are sent prior to the document content, so does the placement of these tags always matter? I don't know. That's another post.

Was Your Site Broken in IE 8?

Well, Cherny.com was. Check it out:

IE8 breaks the cherny.com footer

Bottom line, the first thing I did was stick the meta tag in there, and whoah ... it was still broken. I placed it at the bottom of the HEAD, after everything else and before the closing HEAD.

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <link rel="stylesheet" type="text/css" href="/-/css/cdc.css.php" media="all" />
  3. <link rel="stylesheet" type="text/css" href="/-/css/cdc-print.css.php" media="print" />
  4. <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss/" />
  5. <link rel="alternate" type="application/atom+xml" title="Atom" href="/atom/" />
  6. <link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
  7. <meta http-equiv="X-UA-Compatible" content="IE=7" />

I found myself thinking, "whoah, great job, MS, this tag doesn't work at all!" ... truth be told, I just had it in the wrong place. I've done a fair amount of reading on the MSDN dev site about IE 8, and didn't recall that header having to be placed anywhere specific, other than in the document's HEAD.

I immediately shifted it to the top of the list, and yeah, that fixed it. So, as an "http-equiv" type meta tag, this tag needs to be towards the top of the head.

In fact, I played around and the meta tag needs to be above any of the linked files. Especially before the CSS, and before the engine starts to layout the page. Go figure. It actually makes a little bit of sense.

  1. <meta http-equiv="X-UA-Compatible" content="IE=7" />
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <link rel="stylesheet" type="text/css" href="/-/css/cdc.css.php" media="all" />
  4. <link rel="stylesheet" type="text/css" href="/-/css/cdc-print.css.php" media="print" />
  5. <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss/" />
  6. <link rel="alternate" type="application/atom+xml" title="Atom" href="/atom/" />
  7. <link rel="shortcut icon" href="/favicon.ico" type="image/ico" />

With the meta tag in the correct location, the fix works perfectly:

cherny.com fixed with the correct meta tag

Put the IE 8 Meta Tag in the Correct Location

So bottom line, the rule of thumb is, that the IE 8 meta tag needs to be placed above any linked files. At least in beta 1 for developers. Enjoy the chance to not fix your site for now, that doesn't happen very often.

22 days ago in Web Development (filed under Browsers, Microsoft)

Comment

Past Articles

Battlestar Galactica - What the frak is going on?

This 8 minute video has got to be the most brilliant show recap ever produced. Haven't been watching BSG for the last 3 seasons? Now's your chance. This hits every major plot point in a high speed, often hilarious recap.

Read Full Article

41 days ago in Personal Posts (filed under Reviews, TV)

Internet Explorer 8 and Firefox 3 Location Address Bars

So I have many, many more thoughts and observations with the coming releases of IE8 and Firefox 3, but that’s another post and you’ll have to wait. I’ve been crazy busy but I just thought I’d point out something I found elsewhere (I hate doing that but this I actually thought was funny). Read on…

Read Full Article

53 days ago in Web Development (filed under Browsers, Elsewhere)

New Web Development Features in IE8 Beta 1 for Developers

So, Microsoft released IE 8 “beta 1 for developers” yesterday. You can get the IE8 beta by downloading it from their site of course. You can also read a ton of information at their readiness site.

There are great introductions there, but you get the most detail out of the whitepapers on IE8.

But, what kind of guy would I be if I made you read all that stuff? Instead, I stayed up late last night …

Read Full Article

67 days ago in Web Development (filed under Browsers, Microsoft)

IE8 To Default to Web Standards Mode

So in a reversal to it’s previous stance, unbelievably Microsoft has announced, just in time for MIX08, that Internet Explorer 8 will render Web pages using it’s enhanced Web Standards mode.

Read Full Article

68 days ago in Web Development (filed under Browsers, Microsoft)

http-equiv X-UA-Compatible content IE=8

What? So this is really making waves. Microsoft announces an HTML extension which will enable a new standards layout mode in IE8. Oh, you can also do it at the server side since it’s an http-equivalent meta tag.

A new layout mode, huh? That was my initial reaction. “Huh”. I don’t know what that means. And I think anyone who claims to know immediately is full of it. I rant and rave about the new questions this raises.

Read Full Article

110 days ago in Web Development (filed under Browsers, Microsoft)

Adapting to Web Standards: CSS and Ajax for Big Sites

Hey, so I helped write a book. About Web Standards, CSS, and Ajax, and a few other things. I think it’s pretty cool. And it’s out now.

Read Full Article

133 days ago in Web Development (filed under Web-Standards, Reviews)

Link Blog

Recommended