Why does IE see the same html two ways?
December 1, 2011 11:11 AM   Subscribe

Why does Internet Explorer's rendering of my web page change when it is uploaded to the server? How can I troubleshoot/fix it?

I'm building an email newsletter. All the formatting is done with tables.

It's created in Dreamweaver. After much anguish, I got it looking right in Firefox and IE8, then uploaded it to our server. When the page is visited through the internet, one particular table is broken.

I double checked:
- tweaked text in dreamweaver,
- previewed the local file IE
- uploaded the file to server
- previewed the server-located file in IE (Y:\website\file.html)
- loaded that *same file* through the internet (http://www.site.com/file.html)

...and the file still rendered differently. Appeared fine loaded through our network, broken loaded through the internet.

The code is *identical*, so why is it different over the internet than over our local file network?

And how do I fix it?

Or where should I go to have this answered?
posted by itesser to Computers & Internet (15 answers total)
It's probably quirks mode. If you add in a doctype, it should treat it the same in both places.
posted by Nonsteroidal Anti-Inflammatory Drug at 11:16 AM on December 1, 2011

Different in what way? If it's missing parts (especially pictures) then you're most likely referencing an object that isn't on the server.
posted by SuperSquirrel at 11:17 AM on December 1, 2011

In what ways is it broken? If it's missing images, it could be that you accidentally inserted a local path (ie, C:\myimage.jpg) instead of a path to where the image is on the server.
posted by drjimmy11 at 11:18 AM on December 1, 2011

page in question

IE seems to be inconsistent in respecting my table and cell sizes.

I'm using whatever doctype Dreamweaver defaulted to, so I'll look into my options there.
posted by itesser at 11:20 AM on December 1, 2011

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

will guarantee that IE uses the latest rendering engine it can use on the page.
posted by jozxyqk at 11:30 AM on December 1, 2011

There are some validation errors in that page. IE is pretty persnickety about tags that aren't closed properly, and there are a couple of odd tags like look like malformed comments: <! left spacer> and the like.

Fix those and it might help IE out.
posted by fifteen schnitzengruben is my limit at 11:36 AM on December 1, 2011

IE has intranet and internet settings, that could be a possible reason for different rendering.
posted by wongcorgi at 11:57 AM on December 1, 2011

Looking at the page in IE9, it seems that Quirks Mode is what you want -- the layout is wrong in Standards Mode (at least compared to Chrome's rendering).

You can check this out yourself, assuming you have IE9. (If you don't, I suggest upgrading. IE gets significantly less-broken with each release.) Press F12 while viewing the page to bring up the developer window, then click on "Document Mode" in the menu. Similarly you can check rendering in IE7 or IE8 by clicking on "Browser Mode".

I don't know offhand how to force Quirks mode on in IE. Probably declaring an obsolete DOCTYPE will do the trick but might wreak havoc with other browsers.

IE seems to be inconsistent in respecting my table and cell sizes.

Welcome to the wonderful world of Internet Explorer web development!
posted by neckro23 at 12:08 PM on December 1, 2011 [1 favorite]

Validating worked and didn't take as long as I expected.

Thanks for your help.

I was more careful this time... but I'll be even *more* careful next.
posted by itesser at 12:09 PM on December 1, 2011

Previewing in Internet Explorer is helpful, but DOES NOT indicate you won't have rendering issues in one of the many different email clients, which, as you say, is really the user-agent that will be viewing this chunk of html.

There are whole companies that do nothing but preview HTML intended to be consumed in email clients... here's one based on a 5 second google search: Litmus Email Previews.

There are some good articles on this -- check out this article and look particularly at items 6, 7, and 8: Design and Build Email Newsletters Without Losing Your Mind (and Soul).

You may also find the Email Standards Project useful.
posted by artlung at 1:20 PM on December 1, 2011 [1 favorite]

One particular thing is that you are using some background images in table cells, and you want to make sure that if those fail (as in the example of Outlook 2007 and Outlook 2010 among others) that things still look as good as possible. See How To Code HTML Email Newsletters (All New Version) for some more tips.
posted by artlung at 1:28 PM on December 1, 2011 [1 favorite]

Thanks, Artlung. I've actually been to some of those links already, but the last one is helpful.

We're working through Constant Contact, and have a round or two of email client testing before the template goes live, but I needed to nail down the browser preview before moving on to that.
posted by itesser at 1:57 PM on December 1, 2011

CampaignMonitor's Email design guidelines and Guide to CSS support in email are helpful.

HTML Email Boilerplate looks promising. Say Hello to the HTML Email Boilerplate is an intro.
posted by kirkaracha at 3:57 PM on December 1, 2011

One other thing to consider about previewing in IE: Outlook does NOT use IE as an HTML rendering engine. So unfortunately, finally managing to get it working in IE is no guarantee that what you see will work in any version of Outlook.
posted by fifteen schnitzengruben is my limit at 4:05 PM on December 1, 2011 [1 favorite]

« Older See, kids, grandma and grandpa were young and...   |   Light shades for recessed LEDs Newer »
This thread is closed to new comments.