Spacing Issues with Firefox and Internet Explorer
Paragraphs can create spacing errors in the views between Firefox and Internet Explorer. Now these browsers wont display your text the exact same in each, but I will show you how to style your CSS to make them show very similar. The CSS code will also help images and content that you move around with margins look almost the same in both browsers.
When you declare your body, create a div, and put a paragraph in it, Firefox and Internet explorer interpret the spacing differently. Firefox will create a space between the top of the page and the div. Internet explorer will create a space between the div and the paragraph. An example of this can be seen below, Internet Explorer is on the right and Firefox can be seen on the left.
The code for you to view this is:
<head>
<title>fun with text</title>
<style type=”text/css”>
body { margin: 0;
padding: 0;
background-color: #000;
text-align: center;
}
#box
{
width: 400px;
margin: 0 auto;
height: 600px;
padding: 0;
background-color: #fff;
}
</style>
</head>
<body>
<div id=”box”>
<p>asdfasdfsdafsda</p>
<p>Another line to test</p>
</div>
</body>
</html>
To fix this we need to give the paragraph code a style margin of 0px. The code we would add to our CSS is:
margin: 0px;
}
If you want to give your paragraphs spacing you would use padding. Changing the margin from 0px will bring you back to the same error.
Very good tutorial I love the visual as well really allows to clearly see the differences wish their were more tutorials like this
Very useful. Works well. Thanks.