Question

This is probably a z-index issue but I’m having trouble diagnosing the exact problem.

To view the problem please visit http://beta.pancreaticcanceraction.org/

Add ‘preview2012’ to the end of that URL to access the site (I didn’t want to put the whole link down in case it gets crawled).

It is the top navigation I am having difficulties with. It works great on Firefox and Chrome but now testing in IE9 I am finding that only a shell of the sub-navigation appears. Within the border there is just a blank window.

I’m trying all sorts of things but to be honest I’m fresh out of ideas and need more eyes on this please.

Answer 1

You will be pleased to know the fix is relatively simple. Just remove position:relative and z-index from your nav rule as below. Unfortunately IE doesn’t play nice with position:relative and filter.

nav{
    background:#403a76;
    background:-moz-linear-gradient(top,#483a76 0,#594990 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#483a76),color-stop(100%,#594990));
    background:-webkit-linear-gradient(top,#483a76 0,#594990 100%);
    background:-o-linear-gradient(top,#483a76 0,#594990 100%);
    background:-ms-linear-gradient(top,#483a76 0,#594990 100%);
    background:linear-gradient(to bottom,#483a76 0,#594990 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#483a76',endColorstr='#594990',GradientType=0);
    border-bottom:1px solid #393363;
    box-shadow:0 1px 1px #615d8d;
    height:5rem;
    position:relative; /* delete this */
    margin-bottom:0;
    z-index:10 /* delete this */
}