0

We're having an issue with backward compatibility with this site: http://www.c2-it.com/clients/vetshome

The menu bar (nav) has a background gradient applied using the css generator. We've used this for many sites without problem. On IE8 however, the background of the menubar is being rendered as white. When using Developer Tools within IE8 the filter is shown as being applied to the nav, but its just not displaying.

Here is the section of the stylesheet applied to the nav:

nav {
    background: #002157; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMjE1NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyZDk1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #002157 0%, #2d95e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002157), color-stop(100%,#2d95e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #002157 0%,#2d95e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #002157 0%,#2d95e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #002157 0%,#2d95e5 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #002157 0%,#2d95e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002157', endColorstr='#2d95e5',GradientType=0 ); /* IE6-8 */
    height:47px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
}

FWIW it seems fine on all Mac browsers and IE9 and higher.

Thanks for any ideas.

Sampson
  • 265,109
  • 74
  • 539
  • 565
CJ Catalano
  • 97
  • 1
  • 1
  • 10

1 Answers1

0

You could try setting you GradientType to 1. Here is another question that is similar

Community
  • 1
  • 1
jtaz
  • 119
  • 3