SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast synth's Avatar
    Join Date
    Nov 2002
    Location
    1, The Way
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stacking DIVs on top of each other - IE vs Mozilla/Opera

    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:

    Code:
    <html>
    <head>
    <title>test</title>
    </head>
    <style type="text/css">
    .firstdiv {
       width: 200px;
       height: 200px;
       background: url(a.gif);
    }
    
    .seconddiv {
       width: 200px;
       height: 200px;
       background: url(b.gif);
    }
    </style>
    <body>
     <div class="firstdiv"><p>This is some nonsense text.</p></div>
     <div class="seconddiv"><p>This is another piece of nonsense text.</p></div>
    </body>
    </html>
    Thanks!

    synth

  2. #2
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The gap is being caused by the default margins on the paragraph elements pushing each other apart. Try adding this rule:
    Code:
    .firstdiv p, .seconddiv p {
      margin: 0;
    }
    That should turn off the margins on the paragraphs inside the divs.

  3. #3
    SitePoint Enthusiast synth's Avatar
    Join Date
    Nov 2002
    Location
    1, The Way
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A million thanks to Skunk for enlightening me!

    Wonder why IE behaves so...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •