Community Forums › Forums › Archived Forums › General Discussion › Primary Nav Bar Menu Background Fix for Internet Explorer
Tagged: Internet Explorer, NAV bar
- This topic has 2 replies, 2 voices, and was last updated 8 years, 9 months ago by jenniferh.
-
AuthorPosts
-
July 10, 2015 at 5:50 pm #159056jenniferhMember
I'm looking for a css fix to get the background of my primary nav bar to show up in Internet Explorer. I currently have the following fixes for the other browsers, but can't find a fix for IE.
.nav-primary {
background: -webkit-linear-gradient(top, #BF1616, #6C0909); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(top, #BF1616, #6C0909); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, #BF1616, #6C0909); /* For Firefox 3.6 to 15 */
background: linear-gradient(top, #BF1616, #6C0909); /* Standard syntax */
}Thanks!
http://dev.firelakervpark.com/
JenniferJuly 10, 2015 at 8:26 pm #159065TomParticipantWould these help?
http://www.cssmatic.com/gradient-generator
.nav-primary { background: #bf1616; background: -moz-linear-gradient(top, #bf1616 0%, #6c0909 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #bf1616), color-stop(100%, #6c0909)); background: -webkit-linear-gradient(top, #bf1616 0%, #6c0909 100%); background: -o-linear-gradient(top, #bf1616 0%, #6c0909 100%); background: -ms-linear-gradient(top, #bf1616 0%, #6c0909 100%); background: linear-gradient(to bottom, #bf1616 0%, #6c0909 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf1616', endColorstr='#6c0909', GradientType=0 ); }
http://colorzilla.com/gradient-editor/
.nav-primary { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bf1616+0,bf1616+0,6c0909+100 */ background: #bf1616; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JmMTYxNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYmYxNjE2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZjMDkwOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, #bf1616 0%, #bf1616 0%, #6c0909 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bf1616), color-stop(0%,#bf1616), color-stop(100%,#6c0909)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #bf1616 0%,#bf1616 0%,#6c0909 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #bf1616 0%,#bf1616 0%,#6c0909 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #bf1616 0%,#bf1616 0%,#6c0909 100%); /* IE10+ */ background: linear-gradient(to bottom, #bf1616 0%,#bf1616 0%,#6c0909 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf1616', endColorstr='#6c0909',GradientType=0 ); /* IE6-8 */ }
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]July 11, 2015 at 6:45 pm #159135jenniferhMemberYes, I used the cssmatic.com gradient generator which worked nicely. Great little tool.
Thanks Tom, appreciate the help!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.