Question

Here is the site in question

http://kryptodesigns.com/dev/forum.php?styleid=3

In FF, Chrome everything looks fine, pay attention to the Forum link in the navigation and how the red background expands past the grey navigation container.

Now look at the same link in IE, it cuts off the background color for the entire margin outside of the navigation container.

I have looked all over google for people with a similar issue with no luck.

Here is a pic of what i am talking about.

Any help on resolving this issue would be awesome.

Thank you for your help!

Answer 1

The problem is the filter in here:

#navtabs {
    /* for non-css3 browsers */
    background: #CDCFD0 url(kryptodesigns/KD0010/misc/navigation/navigation-repeat.png) top left repeat-x;
    /* for IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CDCFD0');
    /* for webkit browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CDCFD0)); 
    /* for firefox 3.6+ */
    background: -moz-linear-gradient(top,  #FFFFFF,  #CDCFD0); 
}

Having a filter causes an overflow: hidden-esque effect, which is why the top part of the li can’t be seen.

To fix this, I recommend that you simply remove the filter, because you already have an image version of the same gradient.