CSS Layout and IE 6

Question

Looking back at Stackoverflow podcast with Litmus (Podcast 78). The podcast discussed briefly the browser incompatibilities and quirks, especially with IE6 (a claim echoed everywhere). Litmus solution is to render the page in all the different browsers and look for differences.

However, I wonder how much incompatibility can be detected by simply analyzing the html and css directly, without actually rendering it.

I'm quite a newbie in this field. But I saw many references out there ... that document the IE 6 bugs and limitation, and how to avoid them when writing new documents.

If that's the case, then can a tool be made to validate and analyze the CSS and report any potential compatibility problems with the CSS?

Are there some incompatibilities that cannot be detected (due to lack of documentation) and potential limitation of such tool (when interacting with javascript and such)?

Answer 1

Sure it can, but that's not the point of Litmus's business.

You can analyze a site and report on all the stuff that would render differently, but that wouldn't help much. Litmus's business is not designed to let you know what stuff is incompatible, it's designed to show you how it will be rendered, so you can figure out if and where your site needs improvement.

Making a website look exactly the same across all browsers is very hard, and takes a lot of resources. Often you'll need to compromise and make sure your site still looks decent on all these browsers.

No analysis tool can tell you if your site still looks decent.

Answer 2

The page seen by an Internet Explorer user is in fact built by IE parsing html and css; so, by definition, it is possible to build a tool that, knowing IE bugs, report potential problems.

Anyway, I don't think it would be easy.

Answer 3

When we were developing Browsera, we tried to go about detecting cross-browser issues by looking at CSS styling alone. The problem is, it's the interaction between elements that causes the problem, rather than a specific style.

For example, if it were always the case that setting a margin would result in a double-margin, it would be detectable. However, the double margin bug in IE only occurs when there is a float in the same direction, and only for the first element in the row.

In addition to many of the IE6 layout engine issues, a lot of issues we detect are caused by different default stylesheets of browsers. For example, default margins and font size/rendering vary widely across browsers, which is probably the number one cause of layouts that look "not quite right" when you open them in other browsers.