Margin issue with FF and table

scott2500uk · #1 (**permalink**) 01-27-10, 12:03 PM

Im under the impression that setting the margin of HTML elements determins the space or gap between another element. so if I had:

Code:

<p style="margin:5px 0;">Some Text</p>
<p style="margin:5px 0;">Some Text</p>

Looking at that there would be 5px gap at the top, 5px gap between the paragraphs and 5px at gap at the bottom. Is this right?

Now if I change the second paragraph for a table I end up getting a 10px gap between the table and the paragraph. I'd like to point out that this happens in firefox and not IE.

Is there something I am missing here?

wirehopper · #2 (**permalink**) 01-27-10, 06:58 PM

Try this:

HTML Code:

<style type="text/css">
body
{
margin:0;
padding:0;
}
p
{
margin:5px 0;
}
</style>
</head>
<body>
<p>Some text</p>
<p>Some more text</p>

This code assumes all paragraphs should be styled the same.

Another helpful trick is to use margins, padding, borders, and backgrounds to see the dimensions of elements in different browsers.

CSS Margin

Be sure to validate the code, it can save you a lot of time.

scott2500uk · #3 (**permalink**) 02-03-10, 06:06 AM

Sorry wirehopper but you have missed the problem I am having

Im not having problem with the 2 paragraphs they are behaving as they should in both browsers

Code:

<style type="text/css">
p
{
margin:5px 0;
}
</style>

<p>some text</p>
<p>some text</p>

^^ gives me a 5px gap between the two paragraphs as it should.

but when I have:

Code:

<style type="text/css">
p
{
margin:5px 0;
}
table
{
margin:5px 0;
}
</style>

<p>some text</p>
<table>
....
</table>

I get a 5px gap between the table and paragraph in IE, Opera and Safari but a 10px gap in FF.

Here is a full HTML code to test on all your browsers and I've just tested and FF does it differently than all my others....

HTML Code:

<!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=utf-8" />
<title>Test Document</title>

<style type="text/css">
*{padding:0; margin:0;}
p, table, div{margin:20px 0; background:#09C; color:#FFF; font-weight:bold}
</style>

</head>

<body>
  <div>div 1</div>
  <p>paragraph 1</p>
  <table>
    <tr>
      <td>Table 1</td>
    </tr>
  </table>
  <div>div 2</div>
  <p>paragraph 2</p>
  <table>
    <tr>
      <td>Table 2</td>
    </tr>
  </table>
  <div>div 3</div>
  <p>paragraph 3</p>
</body>
</html>

All the spacing (margin) is all the same between all elements and appears that way in IE, Opera and Safari, but for some reason FF likes to double the margin on the tables...