CSS change works in Firefox but not IE or Chrome

• 

  jlmeier · Member · Nov 23, 2015 at 12:03 am

  • Copy link
  • Add topic to favorites

  I changed the color of the menu bar in CSS. It looks fine in Firefox but nothing happens in IE or Chrome. What’s the problem?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Nov 23, 2015 at 9:46 pm

  • Copy link

  For your linear gradient, you have only specified one for Firefox (-moz) which is why it is only showing up in FF. Replace what you have with the following which covers the bulk of the different browsers. Some older browsers though, do not recognize linear gradients, so there could be some users on older systems that will not see the gradient. I’ve included a standard background declaration with the purple color at top for those browsers which do not support linear gradients.

  .menu {
  	background: #cc3399;
  	background: -moz-linear-gradient(270deg, #cc3399 0%, #3d3d3d 100%); /* ff3.6+ */
  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cc3399), color-stop(100%, #3d3d3d)); /* safari4+,chrome */
  	background: -webkit-linear-gradient(270deg, #cc3399 0%, #3d3d3d 100%); /* safari5.1+,chrome10+ */
  	background: -o-linear-gradient(270deg, #cc3399 0%, #3d3d3d 100%); /* opera 11.10+ */
  	background: -ms-linear-gradient(270deg, #cc3399 0%, #3d3d3d 100%); /* ie10+ */
  	background: linear-gradient(180deg, #cc3399 0%, #3d3d3d 100%); /* w3c */
  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc3399', endColorstr='#3d3d3d',GradientType=0 ); /* ie6-9 */
  }

• 

  jlmeier · Member · Nov 30, 2015 at 1:54 am

  • Copy link

  Thank you very much.

• 

  thesacredpath · Member · Nov 30, 2015 at 5:12 pm

  • Copy link

  You are welcome.