I am having a weird overlapping error in my design.
Link 1: http://imageshack.us/photo/my-images/819/profileoverlap.jpg/
Link 2 (that's a JQuery/Fancybox iframe): http://imageshack.us/photo/my-images/199/overlap2.png/
Here's the CSS attributes on the top-layer element that's burying everything:
Here's the CSS attributes of the drop down navigation that's being buried:
margin: 0 auto;
background: url('http://static.eggcave.com/layout/headernav.jpg?1') no-repeat;
Here's the CSS attributes of the buried Fancybox iframe (pretty irrelevant):
How To Fix: Removing position: relative; from table#p_cover fixes the problem. But what happens is this (since it's an overlay in the layout)...
(notice the negative margin in table#p_cover)
So... there are kind of two problems going on at once. And I don't know how to solve both. Any ideas? Please let me know if you require any additional information, as I am happy to provide that.
Try removing this instead:
That's the real problem.
That did the trick. Totally needed another set of eyes on the code... z-index. Duh!