Hi all,

I was trying to do some experimental pages, and came across this problem.

I tried to stack one DIV on top of another. Both DIV have the background-image property set, plus height and width. Nothing else.

When I display the page using IE, I get the desired effect. One DIV stacks on top of the other, WITHOUT any gaps between them. However, I see gaps when viewing the page under Mozilla and Opera.

It is something to do with the paragraph of text I put inside the DIVs. If I remove the text, I get no gaps in Moz and Opera.

Can anyone shed some light on what is going on here? :|

Here's the code:

<style type="text/css">
.firstdiv {
   width: 200px;
   height: 200px;
   background: url(a.gif);

.seconddiv {
   width: 200px;
   height: 200px;
   background: url(b.gif);
 <div class="firstdiv"><p>This is some nonsense text.</p></div>
 <div class="seconddiv"><p>This is another piece of nonsense text.</p></div>