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.

Part Two: 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.

1 answer

This was chosen as the best answer

Part 2: Setting the padding to zero on the list item containing the Contact Us link should fix the problem.

Answered over 8 years ago by John Catterfeld
  • Thanks for the suggestion, but it didn't seem to work. `#navigation li` now has its padding (and margin, just to be safe) explicitly set to 0, but it doesn't look like anything changed. Michael Martin-Smucker over 8 years ago
  • Setting it inline once the DOM has rendered fixes the problem - maybe try setting it with jQuery? John Catterfeld over 8 years ago
  • Actually touching any of the styles of the list item once the page has loaded fixes the problem. This is probably a red herring. John Catterfeld over 8 years ago
  • Yeah, I noticed that toggling "position: relative" also seems to "fix" the problem, however it comes back as soon as the jquery slide happens. I'll probably just resort to ignoring the jquery in IE7 and older. It doesn't make a big difference in the feel of the site, but I hate giving up on a challenge... Michael Martin-Smucker over 8 years ago
  • I gave you a check mark for offering your help in what is almost certainly an impossible situation (A for effort!). If you edit your answer to include something like "Old IE versions are excessively buggy, and this is one situation where it probably isn't worth the effort to try to fix it" I'll give you the "best answer" star. ;) Michael Martin-Smucker over 8 years ago