Is there a site or plugin that will tell me why my site doesn't work in IE7?

November 5, 2008 12:44 PM

Is there a website or FF extension that will analyze my HTML/CSS and tell me why my site won't display properly in IE7?

Newbie webdev, feeling my way through CSS and XHTML after some pre-21st century experience of HTML. It's all pretty basic stuff.

My site works fine in Firefox, and the HTML and CSS both validate (I'm tweaking a site template I found). But the page just isn't displaying OK in IE7. Rather than displaying div elements next to each other, IE is knocking a couple down to beneath each other.

The problem I have is that pages that explain the notorious IE bugs are over my head. Ideally I want a site or plugin that looks at my HTML and says, "Ah! There's your problem!" Does such a thing exist?

I'm not looking for somebody to look over my code, thanks. FWIW the page header is

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

so I don't think I'm innocently activating IE's "quirks mode".

posted by deeper red to computers & internet (12 comments total)

Um, no. You actually have to learn these things for yourself.

You are mayhap experiencing the double margin bug. Try tacking on display:inline to the errant elements, make your container bigger, etc.
posted by shownomercy at 12:52 PM on November 5, 2008

Ideally I want a site or plugin that looks at my HTML and says, "Ah! There's your problem!" Does such a thing exist?

No, because there's not really a good way to tell that site or plugin what you want the page to look like.

There are some differences between the IE7 and FF box models, though, and it sounds like you're just trying to cram too many pixels into the width that you have.

You might try shrinking the width on some of the boxes that are on the page to see if any combination of that will bring it back into order. Unless you're familiar with IE7's bugs, you're probably not going to (quickly) isolate one of them on your own.

Does the template you're tweaking work in IE7? If so, start back-tracking until you find the change that broke it, then don't make that change.
posted by toomuchpete at 12:52 PM on November 5, 2008

Well, the new version of Dreamweaver sort of does this. It won't tell you why a column is dropping off to nowhere, but it'll let you know about stuff like, 'Note: This may set off the infamous Internet Explorer three-pixel jog' or whatever it is.
posted by Kirklander at 1:04 PM on November 5, 2008

You might find IETab useful for comparing the two rendering engines, but like everyone else is saying, there's no tool to do this for you.
posted by echo target at 1:20 PM on November 5, 2008

The best way to find and fix problems like this is to test constantly in all your target browsers while you are developing the page. Change something, test it. Add something else, test it. Repeat until done. That way when something goes screwy in IE, you know exactly what caused it, because it'll be the thing you just added.

If you do all your dev work testing only in firefox, it'll be a nightmare getting it to work in IE after the fact.
posted by ook at 1:23 PM on November 5, 2008

The problem is likely with IE's box model. If you think of each element as a box the box has a margin outside it, a border, padding inside the margin, and content inside all that. When you specify the width of the box you are specifying the entire box, at least according to W3C. The way IE handles things is by making the width you specify the width of the border and everything inside that. The margins actually overflow past the designated width so you end up with a much wider box than intended, offsetting everything else on your page.

If possible, shaving a couple pixels here or there could fix it. The other solution I've used is to wrap divs with other divs. The outer div should have no padding, margin, or border but should be the size you want the inner div to be. I've also had better luck getting IE to cooperate with the strict dtd, though I don't actually know off hand how it differs from tansitional.
posted by valadil at 1:25 PM on November 5, 2008

As above- Try a div wrap. Alternately, I know this breaks with semantic coding, but you could try a framework like Blueprint.

Past that, a good idea is to figure out what your problem is (IE is adding pixels to my div!) and Google that problem- "IE adding pixels div". Chances are someone knows your pain. Also, remember that code which is validated may STILL not display correctly. Validation just means you followed the rules, it has no place is governing the look.
posted by GilloD at 2:10 PM on November 5, 2008

You might try adding a conditional statement to feed IE7 a correction stylesheet:

<!--[if IE 7]>
<style type="text/css" media="screen">@import "IE7.css";</style>
<![endif]-->

Make your main stylesheet work in other browsers. Then add only the rules needed to fix it in IE7 into the IE7 stylesheet. It's better than making a single hacky stylesheet relying on browser quirks or bugs to hide IE-specific rules from other browsers. Plus, it validates.
posted by caution live frogs at 2:18 PM on November 5, 2008

Elements wrapping excessively indicates your widths aren't adding up the way you're expecting.
The sort of thing that'll often do this in IE is having content that's slightly too wide in one of the elements (IE will tend to stretch the container rather than letter the content overflow), or floating elements with left/right margins (the displayed margin can end up larger; can't remember if that one's fixed in IE7).

Nowadays there are far fewer browser quirks to deal with than in the Bad Old Days, but I don't think it's realistic to expect to have all of the problems automatically detected or abstracted away. Just follow a process of elimination, solve the problem, and learn how to avoid it next time.
posted by malevolent at 3:02 PM on November 5, 2008

I use the Firebug extension for Firefox to look at my code, then create a separate css file for IE (using the browser detect method described by caution live frogs) with the changes needed to correct for IE. You may want to take a look at the page in IE6 as well.

I know there are tools like Firebug for IE, but I haven't found one i like. I don't know of anything that will direct comparison error identification for you, I don't think that is possible, becuase you would have to tell the tool what elements of the layout are out of place, and what is wrong with them for it to identify what is controlling that.
posted by keame at 4:10 PM on November 5, 2008

Regarding keame's last post stating "I know there are tools like Firebug for IE...," you may want to try Firebug Lite. But, it's not going to solve these problems for you. Nthing constant testing and tweaking. You'll get to know this stuff quite well after a little while...
posted by dubitable at 6:19 AM on November 6, 2008

I doubt you are triggering the box model bug, as it was fixed since IE6. I'm betting in something triggered by haslayout (or lack of it), or this:

The sort of thing that'll often do this in IE is having content that's slightly too wide in one of the elements (IE will tend to stretch the container rather than letter the content overflow)...

If this is the case, adding overflow:hidden to the divs that are dropping will solve this problem.

...or floating elements with left/right margins (the displayed margin can end up larger; can't remember if that one's fixed in IE7).

Yes, it's fixed. To avoid this bug in IE6 and lower, just add display:inline to any floated elements with margins.

Also, the * html hack fails on IE7, so check if it's in your CSS.
posted by clearlydemon at 9:40 AM on November 6, 2008