z-index problem in firefox...

**jondean** · 11-03-2010, 03:11 AM

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.

**coothead** · 11-03-2010, 06:59 AM

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>

**jondean** · 11-03-2010, 02:13 PM

Thanks I will look into that....

never came across that syntax but I will google it.

**fucuco** · 11-23-2014, 04:15 AM

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

Thread: z-index problem in firefox...

Thread Tools

Related

Problem with IFRAME in Firefox Forum: HTML Forum

Z-index Forum: CSS Forum

Z-Index not working with IE. Forum: CSS Forum

Index html? Forum: HTML Forum

index.html Forum: General Discussion

z-index problem in firefox...

Re: z-index problem in firefox...

Re: z-index problem in firefox...

Re: z-index problem in firefox...

Cloudjiffy- PaaS for Developers