Link to site in question: http://www.christopherwarrington.com/testing_ground
I have a start screen that is set to z-index 100 to make sure it is above all other DIVs. When you click the Enter button, the Start screen slides away.
The Main DIV is set to a z-index of 50.
The problem is that when the Start screen slides away, you can read everything within the Main DIV, but can not necessarily click the links. You can see this in effect at the end of the 3rd paragraph. If you scroll the mouse over the link, the left side will not allow you to click it, but the right side does.
Now, if I change the z-index of the Main DIV to be higher than that of the Start Screen, all links are accessible, but the Start screen slides up and down behind the Main DIV, which is not useful.
I am at a loss. I do not know why when the Start screen slides out of view, why it prevents the links from working. I am sure I am missing something obvious and I appreciate any advise from an extra pair of eyes. Thank you.
The start screen div is covering up the rest of the content so that clicks that appear to be over a link are actually over the start screen, and thus do nothing. Somehow the bottom area of the start div is transparent, so it is covering those links and making them unclickable even though you can’t even see it. The easiest way to fix this would probably be getting rid of that transparent part. The easiest way to fix this would be to get rid of that transparent part, which is coming from the div with
id="enter_btn_wrapper". The div is currently set to have a height of 500px and a width of 300px, which makes it come down right in the middle of the page over your content. It doesn’t cover everything; notice how you can still click links that are farther down the page or far to one side with no problem.Seeing as all this div does is provide a handle for you to position the actual div with the button as its background 75px about it, you can set its height to 0px and be good to go.