Hi,
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
left.
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.
