102 users online (0 members and 102 guests)  

> > > > z-index problem in firefox...

  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. 11-03-2010, 03:11 AM #1
    jondean
    jondean is offline
    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.
    Reply With Quote Reply With Quote
  2. 11-03-2010, 06:59 AM #2
    coothead
    coothead is offline
    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>
    Reply With Quote Reply With Quote
  3. 11-03-2010, 02:13 PM #3
    jondean
    jondean is offline
    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.
    Reply With Quote Reply With Quote
  4. 11-23-2014, 04:15 AM #4
    fucuco
    fucuco is offline
    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.


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »