46 users online (1 members and 45 guests)  


  Results 1 to 4 of 4

Related

  1. Problem with IFRAME in Firefox    Forum: HTML Forum
    Replies: 0
  2. Z-index    Forum: CSS Forum
    Replies: 8
  3. Z-Index not working with IE.    Forum: CSS Forum
    Replies: 1
  4. Index html?    Forum: HTML Forum
    Replies: 11
  5. index.html    Forum: General Discussion
    Replies: 2
  1. #1
    jondean's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2010
    Posts
    2

    z-index problem in firefox...

    Website in question ....
    http://www3.sympatico.ca/rklemm/bbhl/

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <TITLE>Beaconsfield Ball Hockey League :: Division B</TITLE>
    </head>

    <body>

    <div class="banner">
    </div>

    <div class="BBB">
    B
    </div>

    </body>
    </html>


    my css.....

    div.BBB{
    position:absolute;
    z-index:2;
    left:320px;
    width:50px;
    height:160px;
    line-height:140px;
    margin-top:24px;
    margin-bottom:0px;
    margin-left:0px;
    padding:0px;
    background-color:#f9f9f9;
    text-align:left;
    vertical-align:middle;
    letter-spacing:0px;
    word-spacing:0px;
    text-indent:0px;
    font-size:192px;
    font-weight:800;
    color:#3B5998;
    font-family:Tahoma;
    }

    div.banner{
    position:absolute;
    z-index:1;
    right:0px;
    width:100%;
    height:140px;
    margin-top:30px;
    margin-bottom:0px;
    margin-left:0px;
    padding:0px;
    background-color:#3B5998;
    }



    MY Question

    There should be a big letter "B" visible (blue on white background) over a blue banner that runs across the screen. The div with the letter "B" has a z-index of 2 and the banner z-index of 1. But the B is only partially visible. The banner runs behind the B only partially. How is this possible. It works fine in IE8 but not in MF 3.6.12. Is this a bug? Or did I do something wrong?

    Thanks for any help.
    Last edited by HTML; 03-08-2012 at 11:52 AM.

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: z-index problem in firefox...

    Hi there jondean,

    and a warm welcome to these forums.
    It works fine in IE8 but not in MF 3.6.12. Is this a bug? Or did I do something wrong?
    If it does not work in Firefox, Opera, Chrome or Safari but does in IE then you must assume that IE
    is rendering the code incorrectly rather than looking for nonexistent bugs in the compliant browsers.

    As for the problem, absolute positioning is an unnecessarily crude method to use.

    Try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Beaconsfield Ball Hockey League :: Division B</title>
    
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        background-color:#f9f9f9;
     }
    #banner{
        height:140px;
        padding-left:320px;
        margin-top:30px;
        background-color:#3b5998;
     }
    #banner span {
        line-height:128px;
        font-family:Tahoma,sans-serif;
        font-size:192px;
        font-weight:bold;
        color:#3b5998;
        background-color:#fff;
     }
    </style>
    
    </head>
    <body>
    
    <div id="banner">
     <span>B</span>
    </div>
    
    </body>
    </html>
    

  3. #3
    jondean's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2010
    Posts
    2

    Re: z-index problem in firefox...

    Thanks I will look into that....

    never came across that syntax but I will google it.

  4. #4
    fucuco's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2014
    Posts
    11

    Re: z-index problem in firefox...

    When you change position CSS property, elements behave themselves differently.