Thread: z-index problem in firefox...
Results 1 to 4 of 4
Related
-
Problem with IFRAME in Firefox Forum: HTML Forum
Replies: 0 -
Z-index Forum: CSS Forum
Replies: 8 -
Z-Index not working with IE. Forum: CSS Forum
Replies: 1 -
Index html? Forum: HTML Forum
Replies: 11 -
index.html Forum: General Discussion
Replies: 2
-
11-03-2010, 03:11 AM #1
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.
-
11-03-2010, 06:59 AM #2bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
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?
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>
-
11-03-2010, 02:13 PM #3
Re: z-index problem in firefox...
Thanks I will look into that....
never came across that syntax but I will google it.
-
11-23-2014, 04:15 AM #4
Re: z-index problem in firefox...
When you change position CSS property, elements behave themselves differently.
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum