Reset your paragraphs and headings
Headings, margins and paragraphs behave differently in IE7 and Firefox 2 depending on how you set up your style sheets. You can see this illustrated when you compare the same page in the two different browsers.
The page below has no styling and contains only heading 1, heading 2 and paragraphs tags.
You can see (above) how the font sizes are pretty much the same, but the spacing above and below the headings and paragraphs differ.
Things become a little clearer (and more bizarre) as you begin to add styling to your page. Below I’ve added font family and size, margin and padding attributes to the body class.
Now look at the results below.
You can see (above) the heading sizes are wildly different and the spacing between all the elements still differ.
Next I’ll reset the margins on all headings (1 and 2 in this case) and specify their font sizes
h2 {margin:0.5em 0 0 0;font-size:150%;}
See the results below
You can see we’re getting there, but there still seems to be too much margin around the paragraphs in IE. So I’ll reset the margins on all paragraph tags using the following code
See the results below
Perfect! So if you want your content to look the same in Firefox 2 and IE7 then remember to reset the margins and font-sizes on all your paragraphs and headings. Obviously you don’t have to use the values I specified here, you can make your headings as large or as small as you like!
