Browsers
This section needs revision
The information on this page is acurate and useful but doesn't tie in with the rest of the tutorial
The Browsers
It is a shame but by far the most popular browser is also by far the worst, you will grow to hate Internet Explorer I promise you. To make things worse different versions all work differently. Internet Explorer 6 and Internet Explorer 7 are both currently popular but display pages differently.
Firefox is free to download and is best for testing your site, and using day to day. You can also download the Web Developer Toolbar which has many tools to help you build webpages.
Safari is the main browser used on Apple computers including the iPhone. You can now get it for the PC too.
Error correction
The first problem with Internet Explorer is it tries to correct mistakes in the HTML and CSS. At first this sounds great. Except looking at your site in Internet Explorer you'd never know if there was a mistake on your page and whether your site will work on other people's computers. Use Firefox instead as this doesn't try to help, making it easier to fix your site.
If a site looks okay in Internet Explorer and not Firefox it could be because you have a start tag without an end tag.
The Box Model Problem
Internet Explorer displays all block elements including Divisions, Paragraphs and Headers differently to all the other browsers.
The official way to calculate the width of something as it appears on the screen is:
width + padding + border = the width you see
But Internet Explorer includes the padding and border within the width, so the width you set in CSS equals the width you see. The same applies to height. Here is an example in CSS:
#box {
width: 300px;
padding: 20px;
border: 4px solid #000;
}
In Firefox and Safari the width you see on the screen is 348px (4px + 20px + 300px + 20px + 4px) but in Internet Explorer it is just 300px, which is a huge difference.
Don't Use Hacks
There are many different hacks that can fix browser problems and make your web page look consistant. They all work by confusing the browser so it will read one value and ignore the other. Hacks rely on subtle differences in the way browsers work. We can test pages on the browsers we have access to (Firefox, Internet Explorer and Safari). But we can't test on all the browsers that exist or even future ones that haven't been released yet so hacks can't be relied on. Don't use hacks.
Setting different values for Internet Explorer
There is a way to set different values in Internet Explorer to all the other browsers. To do this you have more than one CSS style sheet: the main one for all browsers including Firefox and Safari and another one for Internet Explorer which contains the values you need to change.
Create a file called ie.css. Open it in Notepad and add the following:
#box {
width: 348px;
}
In the HTML you link to the new CSS files within conditional comments. These are ignored by all browsers except Internet Explorer.
<head> <link href="screen.css" rel="stylesheet" type="text/css" /> <!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]--> </head>
When the webpage loads all browsers read the first width value for #box, 300px, then Internet Explorer only reads the new value 348px so your webpage looks the same on all computers.
Every time you set a width with padding or a border you should also set an amended value for Internet Explorer in this way.
You can also create CSS files for specific versions of Internet Explorer if you need too and then link to them in the HTML like so:
<head> <link href="screen.css" rel="stylesheet" type="text/css" /> <!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]--> <!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css" /> <![endif]--> <!--[if IE 7]> <link href="ie7.css" rel="stylesheet" type="text/css" /> <![endif]--> </head>