Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Blank space at bottom of the page after using div z-index

    Dear All,

    I have a problem using div with z-index, somehow there is a blank space at the bottom of the page. I suspect the blank space is used by the second div layer. I do not know how to get rid the blank space, please help me.
    Here is the code below:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head >
    </head>
    <body background="image/bgbody.png" style="text-align: center; margin: 0 0 0 0; padding: 0 0 0 0;">
    <div style="position:relative; z-index:1; margin: 0 auto 0 auto; padding: 0 0 0 0; width: 1000px; height: 800px; background-color:#ffffff; text-align: left;">
    <div style="position:relative; margin: 0 0 0 0; top:29px; left:34px; width: 932px; height: 742px; background-color:#fdfae7;">
    </div>
    </div>
    <div style="z-index:2; position:relative; margin: 0 auto 0 auto; padding: 0 0 0 0; top:-800px; left:0px; width: 1000px; height: 800px; background-image:url(image/frame.png); background-repeat:no-repeat;">
    </div>
    </body>
    </html>
    Last edited by vuink; 06-18-2009 at 11:34 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    it looks to me like you're trying to superimpose the bottom div on top of the first div using the negative margin - which is giving you the gap.

    It also looks like the only difference is that the bottom div is adding an image. If this is the case why not combine the two:

    Code:
    <div style="position:relative; z-index:1; margin: 0 auto 0 auto; padding: 0 0 0 0; width: 1000px; height: 800px; background::#ffffff url(image/frame.png) no-repeat top left; text-align: left;">
    If this doesn't work because of your image or whatever, then I'd put that bottom div within the first div and use absolute positioning.

  • Users who have thanked SB65 for this post:

    vuink (06-18-2009)

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I take your second advice and it work great
    Thank u SB65

    Here is the code
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head >
    </head>
    <body background="image/bgbody.png" style="text-align: center; margin: 0 0 0 0; padding: 0 0 0 0;">
    <div style="position:relative; z-index:1; margin: 0 auto 0 auto; padding: 0 0 0 0; width: 1000px; height: 800px; background-color:#ffffff; text-align: left;">
    <div style="z-index:2; position:absolute; margin: 0 auto 0 auto; padding: 0 0 0 0; top:0px; left:0px; width: 1000px; height: 800px; background-image:url(image/frame.png); background-repeat:no-repeat;">
    </div>
    <div style="position:relative; margin: 0 0 0 0; top:29px; left:34px; width: 932px; height: 742px; background-color:#fdfae7;">
    works great
    </div>
    </div>
    </body>
    </html>


  •  

    Posting Permissions

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