Why some sites render differently in various browsers?
10 CommentsPublished March 13th, 2007 10:37 AM EDT By Daniel Goldman
I just came across an elucidating article explaining why certain HTML tags display differently depending on the browser you’re using.
If you’ve ever tinkered around with HTML and CSS for the layout of a webpage AND you’ve tested in multiple browsers, you probably know how much of a pain MARGINs and PADDINGs can be. As the article points out some browsers have different default MARGIN and PADDING settings for say the <body>, <p>, <H1>, <H2>, etc.
I don’t know much about this subject and why each browser has their own set of default layout settings – are there any web standards for this already? And if there aren’t any, why not?
This sounds like an excellent topic for David Storey’s blog (he’s the Chief Web Opener at Opera). Hint… Hint…
If you enjoyed this post, then make sure you subscribe to my RSS Feed.
using
The most important thing one can do to make their websites appear as similar as possible in all browsers is to use the Doctype tag at the beginning of the page. This will take care of a large number of rendering differences, by forcing the browser to use a specific standards-enforced method of rendering, instead of some default way (and each browser seems to have a different default for certain things). To make up for the rest, one should assign their own page margins and things of that sort, as mentioned on the link in this article, which is usually a trivial task. By that point, your pages will look nearly identical, depending on what you’re trying to render.
Of course, this still doesn’t mean a ‘poor’ coder won’t manage to do something which simply doesn’t ‘translate’ well, which still happens a lot on the web. But generally if one sticks to standards, and in certain rare circumstances uses checks for IE to insert particular different bits when necessary (which is easier than it sounds), it’s entirely possible to create a site which works almost perfectly across the board. Definately a lot easier than it used to be, in any case.
using
Opera and fox pretty much alike, but IE often have different measures for that. We already know why.
using
Alas, there no standards for default CSS properties.
HTML was initially designed to be device-independant, so in the old days no one expected different browsers to show things exactly the same way. All the presentational stuff was layered on later.
As for CSS, it’s designed to apply to multiple markup languages (SVG, for instance), so while it very carefully specifies what each property should do, it doesn’t specify what the defaults should be for each HTML element. And really, the defaults are just re-interpreting the old HTML layout rules in terms of CSS.
The CSS spec doesn’t actually say, for instance, that B should default to font-weight: bold, or that P should default to display: block, but you can count on those being consistent, because they’re the most direct ways of accomplishing the relevant formatting. (There is an example default stylesheet in an appendix, but it doesn’t actually match any of the major contenders. Maybe Amaya?)
Where you run into trouble are the places where there are two ways of accomplishing something, or where the defaults are really a judgment call — the prime examples of which are in that article.
using
There _are_ standards for both HTML, XHTML and CSS (see w3.org). The problem has been that some browsers do not follow them (most notably IE). This is a result of the browser-wars of the 90’s when IE and Netscape could not agree on using the standard and tried to convince web developers and users to switch to their browser by creating new HTML-tags and CSS-rules that would only work in their browser – thus the already existing standards where quickly made unimportant.
In recent years browsers such as Mozilla Firefox, Safari, Konqueror and Opera have managed to revitalize the standards and Mozilla, Apple and Opera have even set down a group (WHATWG) to agree on a new standard ((X)HTML5) that should be supported by every browser from the very start. The problem is of course IE and Microsoft, but WHATWG plans to create this new standard so that it will (mostly) work on IE even if Microsoft did not actually intend it to.
using
The default values differ for historical reasons. There are no official display defaults. However, CSS 2 had a sample style sheet which we used for guidance. This sometimes put us at odds with both Mozilla and IE, and far more often with IE alone. In addition we had a couple quirks of our own, like padding on list items which was not in that style sheet (though over time the number of quirks diminished). As CSS 2.1 is getting closer to completion, the new default style sheet is closer to what browsers do, and browsers do defaults closer to that style sheet. Consequently different defaults is less of a problem now.
Why is the default style sheet informative and not normative, that is why isn’t it the “correct” style sheet for HTML? There are formal reasons why, but also practical ones. In some cases you don’t want to follow these rules. To take an example: Lists have the rule “margin-left: 40px”, so a three level deep list will have 120px margin to the left in addition to the initial 8px margin for a total of 128px white-space to the left. The most common screen size for phones is 128×128 pixels. On such a display you wouldn’t see anything but whitespace, and that is clearly no good.
I would discourage the “global reset” too, primarily for the unintended consequences (as mentioned in the article), but also because it comes with some efficiency cost. This rule applies to every element whether they need it or not, this means slower processing of the page for no gain.
using
http://kurafire.net/log/archive/2005/07/26/starting-css-revisited
using
The default CSS of the browser is here to make most of the tags looks something when no styles are applied. Most are common between browsers:
emrenders in italic,strongin bold, etc. It also defines some essentials rules: adivshould appear as a block element,spanas an inline element, andlias a list item element (respective CSS rules:display: block;,display: inline,display: list-item.Nevertheless, they are some differences: in IE, there are no default styles for the
acronymelement, and tables are displayed as block elements, whereas they are table elements in both Opera and Firefox (display: table;).Asking why there is no standards in rendering defaults is a non-sense: how would Lynx do? He applies some basic default styles, but he doesn’t have much possibilities, since it’s a text navigator.
I personnaly use the
* { margin: 0; padding: 0; }in order to delete default values (for title, lists, quotations…) and set them in the way I want. The gain is that you’re sure that you’re not going to have rendering problems because of these CSS property.using
FYI: David Storey is still in Austin, Texas, enjoying the music at SXSW and spreading the word of Opera.
using
One more thing I forgot to say about CSS: if you view a RSS feed directly by entering its address, you’ll only see a long text without formating. It’s because Opera doesn’t apply default style to XML documents, unlike IE and Firefox which applie defaults style for RSS feeds (Firefox one is quite nice, while IE one is more efficient) and show the tags in other cases (this can be done in Opera trought a userjs).
I add this because if there is a standard stylesheet, it means that an RSS feed in any browser sould have the same style, even if it doesn’t match the browser look’n'feel.
using
Damn right I’ve noticed this a lot. Especially when you use H1,H2 etc. tags and even the paragraph tag has different margins on IE, irrespective of the doctype. This can be rather unpleasant when working it along with CSS…often the whole layout distorts on IE just because it doesn’t comply to web standards and it can be such a mission to satisfy all browsers.