Question

I am currently designing a website for a business to build computers.

The only problem is, the site only works 100% in Firefox. My current problem is that the div on the left (with the pictures) and the div on the right (with the Facebook like box) are unclickable in every browser except Firefox. I am pretty sure that it has something to do with the z-index, but I don’t know how to fix it.

What I have is a navbar at the top with a main div with relative positioning. Inside this main div I have 3 more divs. One for each column of the page, left, middle, and right. None of these divs are clickable however and this is the CSS code I have:

#fr {
  z-index: -1;
  position: fixed;
  width: 290px;
  right: 10px;
  top: 45px;
}

#la {
  overflow: auto;
  z-index: -1;
  position: fixed;
  width: 200px;
  height: 92.5%;
  left: 15px;
  top: 45px;
  border-right: 1px solid grey;
}

#maindata {
  border-bottom: 1px solid grey;
}

#main {
  z-index: -1;
}

What can I do to fix this? I would be willing to share my source (it is coded in PHP but it is mostly HTML.

Answer 1

Why do #main and #la have z-index: -1 on them? This puts them behind the body (or some other element) so they are not reachable via hover/click actions. Remove these styles and the page will work fine.