If you want to make sure that your web pages are compatible, you need more than one browser installed for testing. Most people start by using Internet Explorer (IE), but there are major differences to other browsers.
The easiest 2nd browser to install is Firefox (FF). It's light-weight, doesn't interfere with IE and it's free. In general, if it works in IE and FF, it will work in *most* browsers.
If you're really serious, you need other browsers installed to fully test your pages, but Firefox is the 2nd most popular (according to my server logs). Another browser that is gaining ground is Opera, which also has a few minor differences.
Some browsers differ in the amount of white space they use around a standard webpage (the Body). The page margin (the gap, left right top bottom) needs to be set in order to make your pages compatible. I'm told that there is one browser that uses 'padding' for this, so it's best to set them both.
<style type="text/css">
/* No spacing at all (use the full page) */
body {margin: 0; padding: 0;}
/* Or, if you require some spacing */
body {margin: 15px 20px; padding: 0;}
/* 15px top + bottom, 20px left + right */
</style>
Padding is zeroed just for any browser that may set this. If you set the margin in any tag, it's always best to set the padding as well. A common misconception is that you need to set <div>'s padding to zero, but this isn't necessary as they don't contain any margin or padding (unless you add some).
Note: Anything between /* blah blah */ is a comment and ignored. Use comments sparingly, as style sheets have to load just like any other file.
Spacing in heading tags H1-H6
The spacing you see on the screen for certain tags e.g. <h1 - h6> <p> <ul> <ol> <dl> etc. is achieved in different ways. Most browsers use margin, but some may use padding for the spacing. To make your text absolutely compatible, you need to set margins to the required size and set padding to zero. If you're not too bothered about exact spacing, this can be ignored.
How to remove spacing beneath a heading <h1> to <h3>
<style type="text/css">
/* Set top margin to 15px and padding to zero */
h1.nogap, h2.nogap, h3.nogap {margin: 15px 0 0 0; padding: 0;}
/* Set bottom margin to 15px and padding to zero */
p.nogap {margin: 0 0 15px 0; padding: 0;}
</style>
<h1>Your Page Title</h1>
<p>Normal spacing below an h1 heading</p>
<h1 class="nogap">Your Page Title</h1>
<p class="nogap">No spacing below an h1 heading</p>
If a <p> is used below an <h1>, the normal gap will display, but using <h1 class="nogap"> and <p class="nogap"> makes the gap disappear. The style rule 'p.nogap' will only affect any <p class="nogap">. There are many other ways you can achieve this, but I've found this to be the best way.
Your Page Title
Normal spacing below an h1 heading
Your Page Title
No spacing below an h1 heading
You can use this method for any heading or tag that has default spacing in it.
You can also use padding combined with a border to get a different effect.
<style type="text/css">
h1 {
border: 1px solid black;
padding: 4px 0;
color: white;
background: red;
text-align: center;
}
</style>
Your Page Title
You can put the style rules in any order, but I prefer to use a logically order so it's easier to edit or spot a mistake. I'll add more to this page when I get time. If you have a problem: use the 'Contact Editor' link at the bottom of this page, and I'll try and help if I can.
