My question has multiple parts because after days of battling with Internet Explorer, I'm getting sick of it, and I'm turning to you, community. The site that I'm working on relies heavily on CSS3, so I'm trying as much as possible to replicate the same look and feel with IE's filters.
Part One [fixed!]: Edit: part one basically asked, "Why does IE8 render my page in IE7 standards mode, even when the page uses a legitimate doctype?" Apparently this is caused by a setting on the IE8 installations here at work; it isn't caused by my code, and it isn't specific to my site. After testing other websites, they all seem to be defaulting to IE7 Standards mode.
The "Contact" link at the bottom of the left navigation disappears with IE 7 and earlier. Technically, it doesn't disappear. If you use IE's DOM viewer, you can see that the link is there, it's just positioned several rows below where it should be. It's actually in the space that it should occupy if the nested
<ul> sublist (contained within the "Links" link) were't hidden by jQuery. If I turn off jQuery and manually add
display:none; to that
<ul>, it looks fine. However if I turn jQuery on and use it to do the exact same thing --
$("external_links").css("display", "none"); -- the "contact" link is positioned incorrectly. Even weirder, if I turn off the IE gradient filter in the stylesheet, there are no positioning problems.
Part Three (bonus round!): And while we're on the subject of IE not being able to display its own proprietary filters correctly, did you notice that the links in that left navigation aren't colored correctly, and you can't click on them if you put your mouse pointer directly on top of a pixel of text? If you try to select this text, instead of a normal-looking text selection, you'll end up with a transparent box that lets you look through the layer to the background behind. This bizarre issue goes away if I turn off the "shadow" filter.
I have ideas for working around that third one, so mostly I'm looking for answers to the first two. As much as I'm not a fan of Microsoft's proprietary filters, I'm not planning on turning them off -- especially the gradients -- so answers that find the actual source of the problem (assuming there is one) will be the most helpful.
Part 2: Setting the padding to zero on the list item containing the Contact Us link should fix the problem.