Why does IE hate my website?

November 9, 2005 5:55 AM

Why does IE hate my website? I've got it looking decent in Safari and Firefox, but it looks hideous in Explorer. Having done a fair amount of Googling, I've come to the conclusion that it's probably related to one of Explorer's notorious CSS rendering bugs, but my self-taught CSS and HTML is not enough to enable me to pinpoint and solve the problem.

(The site is www.newsuperhero.org , if anybody wants to look and offer specific suggestions. I'm not thrilled about posting my website to an AskMe question, since it smacks of self-promotion, but I'm not sure how to demonstrate the problem otherwise. If you guys are able to help me track down the problem, I'll post it to MeFi projects, and self-promote it for real... As you'll see from the front page, the main text ends up in an odd and ugly place when viewed in IE. See also www.newsuperhero.org/cgi-bin/challenge.php-- the radio button choice lines end up in strange places, too.)

posted by yankeefog to computers & internet (15 comments total)

Have you tried throwing a left margin in #frontpage p and h1?
Just a thought...
posted by jikel_morten at 6:08 AM on November 9, 2005

In firefox and IE on windows, there are thick blue image borders around your linked images.


< img src="yourimage" border="0">
posted by pg at 6:27 AM on November 9, 2005

I've had good luck using IE7 to fix IE display issues.
posted by HiddenInput at 6:31 AM on November 9, 2005

You might want to use the XHTML 1.0 Strict DTD to start with. This often fixes a few "quirks". Though there are plenty of attributes you're using that are deprecated in XHTML.

As for the borders around images just add this statement to your stylesheet:


a img {
border: none;
}

The border attribute is, if I recall, deprecated in markup itself these days.
posted by juiceCake at 6:33 AM on November 9, 2005

You have no doctype. You need a complete and full doctype or IE will switch to "quirks" mode. Before switching to XHTML you might try adding a full doctype.

It's also no help that you have both CSS linked outside your [head] tag--one before it and one after. They both belong in [head]. You have no [body] tag, which is mandatory, and you have a [ul] tag before [html] though it belongs in [body].

Before working on IE quirks, I'd try to get the code to validate. Take a look at the W3C's validator service; it'll help you in the right direction.
posted by Tuwa at 6:46 AM on November 9, 2005

Have you checked out this page?
posted by starman at 6:48 AM on November 9, 2005

oops. strike that about the doctype; I'm not sure how I missed it. Still, I'd worry about getting the HTML to validate before chasing down browser bugs; it'll save some frustration.
posted by Tuwa at 6:49 AM on November 9, 2005

Validate your HTML code and CSS code. There are lots of errors in both, which are mostly minor, but there are a couple of serious ones that could cause trouble.

Position is Everything's Windows Explorer vs. the Standards has workarounds for most of the common Windows IE problems.

max-width in Internet Explorer has workarounds for max-width, max-height, min-width and min-height.

You might want to consider using conditional comments to isolate your Windows IE fixes in a separate style sheet, instead of having them in the main style sheet.
posted by kirkaracha at 6:54 AM on November 9, 2005

Thanks, all, for the tips. I am currently experimenting with the various fixes suggested, and I suspect that my site is going to get worse before it gets better. For example, the reason that the doctype isn't showing up in the validator seems to be that misplaced [UL] tag that Tuwa pointed out. But deleting it is making the site look crappy in Safari and Firefox as well as in IE.

Obviously, it has to go, but it will take me a little while to rejigger my layout in its absence. So no need for anybody to say "Hey, your site looks bad in Safari, too" in the meantime.

I suspect the help I've gotten from you all will be enough to get me going in the right direction, but if not, I shall post again.

Thanks!
posted by yankeefog at 11:42 AM on November 9, 2005

yankeefog, the [ul] might be pairing with the [/ul] after [div class="head"] (there's that div, then [div class="headernavbar"] within it, then both div tags end, then there's [/ul].

Have you tried moving the [ul] to just before [div class="head"]? Also, immediately after [/head] you should have [body]. :-)

Best of luck with it.
posted by Tuwa at 2:45 PM on November 9, 2005

I can't stress this enough:

If you're worried about IE on a Mac, forget it.

It's by far the worst web browser still in common use. It breaks when you breathe on it.
posted by armoured-ant at 3:28 PM on November 9, 2005

OK, I've spent some time making a sample page (www.newsuperhero.org/authors.shtml) work with the Valiator, and I've gotten rid of almost all the bugs. I've also used the Holly Hack and the tan hack to get it looking pretty good in IE.

However, there is still one bug that is turning up in the validator. It doesn't seem to affect performance, but, darnit, if I'm going to debug this thing, I might as well go whole hog. Here's the problem:

 I've defined <hero> and <villain> in my stylesheet, but the validator is telling me stylesheet, but the validator is still giving me the following error messages: element "HERO" undefined. and element "VILLAIN" undefined.

Thanks, everybody!
posted by yankeefog at 7:47 AM on November 10, 2005

Both <hero> and <villian> are not tags defined by the DTD. You'd have to make your own DTD and define them in that.

I'd take your hero and villian css definitions and make them into classes.

Then I'd replace any:

<hero>Incremento</hero> tags (and villian too of course) with:

<span class="hero">Incremento</span> or
<div class="villian">Decremento</div>

In either case, you might have to play around a bit more with the style definition.

The characters Incremento and Decremento are © 1995 A Good Friend of Mine. Look for them in the future.
posted by juiceCake at 9:23 AM on November 10, 2005

Hmmm... OK, I'm still having trouble with one page: newsuperhero.org/cgi-bin/challenge.php . I've gotten it to validate, and it looks fine in Firefox and Safari. But in Explorer for windows, the form insists on appearing at the very bottom of the page.

If I'm not pushing my luck, would anybody want to speculate on why that's happening?
posted by yankeefog at 9:42 AM on November 10, 2005

Never mind--I think I've gotten rid of all the bugs. Thanks, all!
posted by yankeefog at 2:09 AM on November 16, 2005