Disclaimer: I have already seen the following questions and their solutions did not apply to me even though they are very similar situations:
- http://stackoverflow.com/questions/1429605/css3-box-shadow-all-sides-but-one
- http://stackoverflow.com/questions/1483261/how-to-add-drop-shadow-to-the-current-element-in-a-tab-menu
- http://stackoverflow.com/questions/253868/css-shadows-on-3-sides#253915
Simply put, I am trying to add a -moz-box-shadow of 0 0 10px to the .current_page_item class that is applied to the currently active tab in the tab navigation at the top of my website. The website does not yet include the actual box-shadow or any of these changes, I have only been playing with these modifications in firebug for now before I actually publish them. Naturally this causes the shadow to appear on all sides, and so the bottom edge's shadow overlaps into the .content div which stores all of the blog's actual content, i.e. posts.
Based on what I have seen so far, it seems like I should set the z-index of something, not sure what (I have tried ul.menu) to something lower and the z-index of the .content div to something higher, but this seems to have no effect.
I am just wondering if this is normal behavior and if not, if someone could help me out with this situation.
Thanks, I really appreciate it.
EDIT: I put box-shadow in the post earlier, but I meant the respective specific directives, such as -moz-box-shadow. That was not the problem I was having.