Paragraph spacing within <div> tags

trouble with spacing on different browsers

[sockboy79]

I have created a site in CSS using ie as the default browser. Everything on the site works fine, and the code validates, but when I tested the site there was a problem with the rendering of the text in netscape 7 and mozilla 1.6.

There is no special padding on the <div>. In ie the first line of text lines up near to the top left corner of the div.

In netscape and mozilla there is quite a large gap between the top of the <div> and the first line of text, which is disrupting my layout.

Does anyone know why this is happening, and what I can do to stop it?

Here is the code that I've been using

<div style="overflow: hidden; position: absolute; left: 7px; top: 510px; background-color: #ff0066; width: 686px; height: 20px; text-align: center;">
<p>This text fits within the box in ie, but in netscape it vanishes</p>
</div>

This is the CSS

p {font-size: 10pt; color: #ffffff; font-family: sans-serif; font-weight: 200; padding: 0;}

Thanks

[Purple Martin]

You may not like this answer but... you've been doing it back-to-front: it's better to design your page using Netscape as the default, and then fix the problems that IE has.

Try playing with the div's padding (which is 'inside spacing') and the paragraph's margin (which is 'outside spacing') to get the gap just right.

[mipapage]

What PM said is good advice.

Also:

1. Are you in Quirks mode [google.com]?
   
2. Try adding 'margin:0' to the paragraph style?
   

added
#2 sorted it out for me.

[sockboy79]

The 'margin: 0;' option sorted it for me, thanks for your help - that was driving me crazy!

[grahamstewart]

It might also be worth adding a

padding:0

to the <p> tag as in my experience some browsers implement the space between paragraphs as padding instead of margins.