IE6 Compatibility Issue

[deficit]

Hey all,
I seem to be having a compatibility issue with my navbar in IE6, likely to be within the CSS. My address is www.wickedmethod.com, and I have included 2 screenshots. The first screenshot (screenie.jpg), where everything looks normal, shows how the site looks in FF 1.5, FF 2.0, IE 7, Opera 9, and Safari. The second screenshot (screenie2.png) shows how it is rendered by every version of IE < 7. The Doctype is XHTML 1.0 Strict, and passes W3C XHTML 1.0 Strict and CSS 2.1 validation. I have tried changing the Doctype to XHTML 1.0 Transitional, HTML 4.01 Strict, and HTML 4.01 Transitional (changing markup where applicable for HTML 4.01 Doctypes), but nothing changed the way it was rendered.

I believe the issue to be related to one of the following:
a.) Some IE6 hacks are needed in the CSS, or
b.) The markup for the navigation items containing dropdown menus in the (X)HTML is interfering with the stylesheet rules in IE6 (and under), and a workaround may be needed.

Thank you in advance for any help or guidance.

The Screenshots:

[djr33]

XHTML is not supported by IE, not even IE7.
This as the doc type then defaults the rendering engine to quirks mode, so you might as well not have any doc type.
And your entire page is then rendered as invalid html, with strange /> tags all over the place that make no sense to IE.

Though XHTML may or may not be better, it's not worth using now since IE is so popular and it simply doesn't support it. There's no way around it.

[deficit]

XHTML is not supported by IE, not even IE7.
This as the doc type then defaults the rendering engine to quirks mode, so you might as well not have any doc type.
And your entire page is then rendered as invalid html, with strange /> tags all over the place that make no sense to IE.

Though XHTML may or may not be better, it's not worth using now since IE is so popular and it simply doesn't support it. There's no way around it.

I appreciate your response, and I am aware that IE has issues with XHTML and XML. Not having a Doctype at all would wreak havok among all browsers including IE, and certainly is not a viable option.

XHTML Strict Doctypes do not cause IE 7 to render the page in quirks mode, this is only true of versions previous to IE 7.

XHTML Strict Doctypes do not usually affect the rendering of standards-compliant XHTML in <= IE6.

As previously stated, experimentation with non-XHTML Doctypes produced no changes in IE 5.5 or IE 6, so the Doctype declaration is not the cause of the issue at hand.

Again, I appreciate the advice. I hope to see that you will chose to review Doctype declarations, and how they may affect the manner in which browsers render a document. More information on Doctypes may be found here: http://www.alistapart.com/articles/doctype/

[djr33]

No, it won't do anything wrong to IE if you have no doc type, at least nothing more than now. It doesn't know what to do with xhtml, so it just assumes that there isn't one. If this isn't the case, then what doc type do you think it does assume?
For the other browsers, yes.

the issue isn't the doc type, but that you are using xhtml in the first place. Valid xhtml is invalid for IE, so you'd need to change your code to valid html to be able to use it.

Just using an IE compatible doc type while still using xhtml code won't fix it alone.

However, this could just be an unrelated issue, but I'd suggest starting with those things.

I'm not sure, aside from that.

[deficit]

I have tried changing the Doctype to XHTML 1.0 Transitional, HTML 4.01 Strict, and HTML 4.01 Transitional (changing markup where applicable for HTML 4.01 Doctypes), but nothing changed the way it was rendered.

What you stated about the Doctype was a good idea, and was also my first suspected culprit. Unfortunately, it wasn't that easy. I did change the Doctype to (at one point) HTML 4.01, and changed the markup of the page as well. It even validated as HTML 4.01. The Doctype is definately not the cause. As I said, it was my first inclination, and I only wish it were that simple. Unforunately though, through experimentation and trial-and-error, I have eliminated the Doctype as a suspect. I think it's more a CSS issue - either something isn't taking in the CSS in IE versions < 7, or something is being misinterpreted in the semantic markup of the nav (if this is the case, it's likely related to the way the list objects need to be structured in order to allow for the CSS dropdow menu list objects).

As far as the Doctype goes however, IE 5.5 and IE 6 should still have no problem parsing the page correctly using XHTML 1.0 Strict, as the Doctype issue possibility has been ruled out in this case.

There are several known CSS issues in older versions of IE (i.e. broken box model, peekaboo bug, etc.). I'm just hoping someone can narrow down the cause and suggest a possible hack (at least for IE 6, as versions of IE older than 6 account for, according to the W3C, only 1.7% of internet users). If i can reach at least 98.3% by making this work in IE 6 (it already works in IE 7, FF 1.5, FF2.0, Opera 9, and Safari), that will more than satisfy me, as no-one can possibly get 100% anyhow. At this time however, IE 6 compatibility is essential, as it accounts for well over 30% according to W3C statistics.

Thanks again! If you're good with CSS and are familiar with IE 6's rendering engine, take a peek at my stylesheet and let me know what you think.

[djr33]

Well, it looks like you've covered yourself in terms of doctype, so it seems that isn't the problem.
I'm not familiar enough with the specific IE bugs to help, though. It just seemed coincidental that every other browser, even some less normal ones, works, and not IE, when IE is the one that doesn't support xhtml.
I'd suggest just slowly isolating parts of the page that are causing problems to discover exactly what is wrong.

[deficit]

Funny you should mention it, because I thought the same thing! I asked some of my co-workers about the issue, and they implied that there could be some sort of positioning issue. My question to them was "if there was an issue with my positioning, or my code in general, why does it work in every modern browser except for IE 6? I'm sure that all browsers besides IE 6 and below aren't wrong."

You and I think alot alike. But, they may be on to something with the positioning aspect - I can't remember off-hand if I have anything relatively positioned (possible z-index fix?).

The "home" navigation item is currently the only one correctly placed in IE 6, but why doesn't the rollover work in IE 6? Why don't the dropdown menus show on the "about us" and "portfolio" items in IE 6? They should be displayed in front of everything else. Other than the layout being whacked out, why does it seem that no :hover attributes function in IE 6 regardless? These are the questions that lead me to believe that the CSS is broken in IE 6 (other than the obvious fact that the widths are improperly interpreted on the list items with dropdown menus, causing them to position and tile themselves on a new line).

It's a rather interesting issue altogether, and seems to be clearly a bug in how IE 6 and under interpret styles.

[deficit]

I tried making a test page, of just the nav and any CSS associated with it. Unfortunately, I still haven't figured out the issue in full. By removing the dropdown menus from the test page, the nav appears correct, but the rollovers still won't work (not to mention, taking the dropdown out is not really an option I want to go with). As far as the alignment in IE 6, it appears as if it is assigning the width of the dropdown menu to to nav items themselves. As far as the rollovers not working, it's not the end of the world, but it would be nice to get them compatible with IE 6. And, since removing the dropdowns isn't really an option I'm considering, how would I take my widths back?