469,962 Members | 2,794 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,962 developers. It's quick & easy.

div layering in firefox


I'm trying to build a camera control menu bar for a web application.

I've gotten everything to work in IE6/7 but Firefox as a little bug.
Actually, it's probably IE that handles it incorrectly but does what I
want it to do, but you get the idea.

I have 3 divs.

<div id="leftzone"></div>
<div id="centerzone"></div>
<div id="rightzone"></div>

And here is the CSS:
#leftzone {
position: relative;
padding: 0 0 0 5px;
width: 600px; /*605*/
height: 33px;
text-align: left;
background-color: #FFFFFF;
#centerzone {
position: relative;
top: -33px;
width: 605px;
height: 33px;
text-align: center;
#rightzone {
position: relative;
top: -66px;
padding: 0 5px 0 0;
width: 600px; /*605*/
height: 33px;
text-align: right;
The idea being that any image put in the left zone will align to the
Any images in the right zone align to the right, and the same deal for
the center zone.

Now, I want everything to be on the same line so I bring rightzone and
centerzone up and over leftzone. That way I have a nice clean menu bar
in which I can dynamically add little icons depending on the need of
the client.

My problem is that, since, technically, it's the #rightzone that ends
up with the higher z-index, it doesn't let me click "THROUGH" the div
to the other buttons in leftzone and centerzone. IE seems to figure out
there's no background, so he lets me click through.

Like I said, it's possible that IE simply handles this wrong and does
what I want it to do by sheer luck. But i'd still like a way to
reproduce that in Firefox..

Thanks in advance.

Dec 7 '06 #1
1 2841
There is no way to make Firefox "see" though the third/rightzone layer
that I know of.

But here is a different approach that I have used in the past which
display the same in IE and Firefox and without any hacks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
#container {
padding: 0;
background-color: #FFe0FF;
width: 600px; /* over all width */
height: 33px; /* over all height */
#leftzone,#centerzone,#rightzone {
position: relative;
height: 33px;
width: 200px;
background-color: #FFe0FF;
display: inline; /* if you used block then IE would double up the size
of the margins */
#leftzone {
text-align: left;
float: left;
margin-left:5px; /* by using margins against a container we avoid the
IE padding bugs ! */
width: 195px; /* take the 5px left margin from the width width */
#centerzone {
text-align: center;
float: left;
#rightzone {
text-align: right;
float: right;
width: 195px; /* take the 5px right margin from the width width */
<div id="container">
<div id="leftzone">
<a href="lkjlkj1">lkjlkj 1</a><br>
<a href="lkjlkj2">lkjlkj 2</a><br>
<div id="centerzone">
<a href="ssdfdd1">ssdfdd 1</a><br>
<a href="ssdfdd2">ssdfdd 2</a><br>
<div id="rightzone">
<a href="ertrte1">ertrte 1</a><br>
<a href="ertrte2">ertrte 2</a><br>
Hope this helps you


Dec 12 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

87 posts views Thread by expertware | last post: by
5 posts views Thread by SPE - Stani's Python Editor | last post: by
7 posts views Thread by Coder | last post: by
12 posts views Thread by amit | last post: by
6 posts views Thread by scotty | last post: by
7 posts views Thread by Carlos Mendonça | last post: by
8 posts views Thread by dougawells | last post: by
1 post views Thread by rainxy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.