CSS Validation DOCUMENTATION   |   CSS TUTORIAL   |   FORUM

The Browser/CSS Conundrum

All CSS is not rendered the same.

It's obvious that there's a problem in the web design world. Perhaps the greatest difficulty is finding a balance between valid/clean/pure CSS and a style sheet that is compatible across all at least common web browsers.

You can write perfectly valid CSS - even "legacy" CSS (version 1) or the current standard of CSS 2.1, and there is almost a guarantee that it will not look the same in common browsers. Let's go through some differences between them and then figure out ways to overcome compatibility problems.

Browsers vs. Rendering (or "Layout") Engines.

First we need to make a distinction between browsers and rendering engines (also called "layout engines"). We'll use Rendering and Layout interchangably in this article.

Rendering (Layout) engine
The software that a browser incoorporates to actually process the markup and style sheets of a web page to display it on the screen. Each layout engine is a little different in its implementation and design, and interpretation of markup and CSS/XML text.
Web browser
The program that an end-user is familiar with. Generally includes tabbed browsing features, bookmarks, history, privacy settings, and other tools for providing an enjoyable web browsing experience.

What really matters?

To developers, the only thing that should matter is the layout engine. For example, Safari and Chrome use the same layout engine (Webkit), but have drastically different features. (Well, since Safari 4 copied Chrome's look, it's not so different, just bloated... but still, they render the same.) While it's possible that browser bugs influence the rendering of a page, that is out of the scope of the designer's task.

Internet Explorer has problems.

Unfortunately, a lot of the grief you'll experience in your website styling phase is the trouble that IE will cause for you. IE still claims 2/3 of the browser market, and Microsoft was sure to make it anything but easy for developers to write CSS that conformed to any other browser by deploying numerous insecure and slow versions of Internet Explorer to proprietary Windows users. Now that's fine, except that IE didn't comply with W3 standards until IE8 was released in 2009.

This means that you still need to code your CSS to look right in IE7 and, in some cases, IE6. This is one reason you cannot avoid CSS hacks entirely, though generally they are discouraged.