Tricks to make your website look the same across browsers

Tricks to make your website look the same across browsers Tricks to make your website look the same across browsers Rate Topic:

#1 martin leblanc

W.R. Private

Group: Members
Posts: 4
Joined: 21-April 07

Posted 22 April 2007 - 02:28 AM

I'm sure alot of people knows tricks for making a website look the same in different browsers, but often the most effective trick is overlooked.

The (X)HTML-header is often just copy-pasted, but it often has great effect and it can be worth the work getting this part right. Some browsers eg. IE6 has two modes for reading the XHTML: Quirks and Standard Compliance.

When in Quirks-mode the XHTML is shown with a different box-model than the Standard Compliance-mode. This means that all margin and padding from the CSS is shown differently, resulting in the catastrophic look. When your header is wrong you're basically telling the browsers: "Bad HTML coming up!".

W3C has made some recommandations about XHTML-headers. Eg.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

There should be an XML-declaration at line 1 but that's a different story (Just live it out).

When using this header it is extremely important that there's no characters before "<!DOCTYPE ..." No spaces, No break-lines, Nothing.

After you've got the header-part right you should use the W3C-validator to check for syntax-errors in your XHTML: http://validator.w3.org/