SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firebird transparency problem

    This displays as intended in Opera 7, IE5+ (apart from the alpha transparency and a little 1px prob, but I don't mean those bits) but not in Firebird.

    The absolutely positioned menu doesn't show at all for some reason, maybe something to do with the background-color:transparent on the lower-header div. It does display if I set the z-index of the menu to be in front of the lower-header.

    Page-container isn't really needed, just for centering it all in IE.

    Any ideas what's happening? Here's a live version.

    Here's the important code:

    Code:
    <div id="page-container">
    <div class="lower-header"><h1>heading</h1></div>
    <div class="menu">this is the menu</div>
    </div>
    Code:
    #page-container {
    margin-left: auto;
    margin-right: auto;
    text-align:left;
    width:50em;
    max-width:800px;
    }
    
    .lower-header {
    background-color:transparent;
    background-image:url(../images/bottom.png);
    background-repeat:no-repeat;
    height:153px;
    margin:-1px 0 0 0;
    }
    
    .menu {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    max-width:800px;
    width:50em;
    text-align:right;
    border:1px solid green;
    z-index:-1;
    top:20px;
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Aus
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there any reason why you need z-index to be -1?

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Germany
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What rbdl said, don't use a negative z-index on your menu. If you need it to be placed below your lower header (image), then add the following to your css for .lower-header:
    position:relative;
    z-index:5;

    And the z-index for .menu you set to 1 for example. Then it will be correct.

  4. #4
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm experimenting with:
    Code:
    div { z-index: 20; } /* or 50 or whatever */
    and then I don't have to recode all divs if I find I need to push something 'behind' without using negatives.

    If I don't need any z-index declarations in the site then I just zap the line in the CSS when I've finished.
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  5. #5
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice one folks, that's sorted it. Didn't know negative z-index value were a bad thing.

    Thanks.


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
  •