How to fix page so it displays correctly in IE7?

Question

Hi! A reader has just brought to my attention that IE7 on Windows XP Professional, ver 2002, SP 2 displays pages such as http://beachpaper.com/issues/current/page28.html to look like beachpaper.com/zimgnav/bperror.jpg, by pushing the large JPG to the right. However, the home page, beachpaper.com, displays correctly for him and it's built from the same template. I built it using GoLive on a Mac and it looks fine in that outdated IE and all other browsers I've ever tried, so I'm at a loss at what to do. I ran it through the W3C validator and didn't see any likely suspects. Any suggestions would be greatly appreciated!

Answer 1

Hard to tell from the limited information you've provided (and possibly hard to tell without seeing your entire source), but perhaps a tool like Firebug (or Firebug Lite, since you're on IE) can help you out. I've found that a small amount of real-time CSS editing solves most problems I encounter.

Answer 2

I went to a page on your site that didn't display correctly in IE, saved the source and DL'd the CSS and applied it to the page... and I've got the issue duplicated.

And I think I found the problem.

The following line is causing the issue:

<td rowspan="3" colspan="3" valign="top" width="800"><!-- InstanceBeginEditable name="Region" -->

If you remove the colspan="3" call, and make it look like this:

<td rowspan="3" valign="top" width="800"><!-- InstanceBeginEditable name="Region" -->

Well, then everything displays properly for me.

I'd like to spend more time on it, but I hope this helps.