Question

This code works fine in internet explorer, but I am having problems in other browsers.
Basically there is a horizontally scrolling page with a fixed left sidebar.
In IE you can click on the forward and back buttons on each panel of the page, but in chrome, etc, only the links in the sidebar work.
I believe it to be a problem with the z-index or positioning of the elements, the css has

#bg{
   display:inline;
   position:absolute;
   left:0px;
   top:-2px;
   z-index:1;
}

#sidestripe {
   display:inline;
   position:fixed;
   left:0px;
   top:-2px;
   width:100%;
   min-height: 100%;
   z-index:1000;
}

I have tried many combinations of z-index, but i can’t seem to make one elemnt clickable without making the other unclickable.

Any help would be greatly appreciated!

http://www.travelhome.com.au/index.htm is the website in question

Answer 1

Change your #sidestripe width to 380px instead of 100%:

#sidestripe {
display:inline;
position:fixed;
left:0px;
top:-2px;
width:380px;
min-height: 100%;
z-index:1000;
}

This way it will not cover other content on the page