CODEWITHSUNDEEP
htmlcsssafari
papafrita
papafrita

Reputation: 29

background-color property not working on Safari

Im workin on this site https://www.comercialoregon.cl and realized that when on Safari, some elements will not properly display, the main ones being those with the background-color property set to #11a004e0, instead they have a gray background. any ideas why this happening?

Here is the css for the div on the nav bar that SHOULD be green (works on chrome and mozilla). Thanks

.boton_nav {
  border-radius: 4px;
  background-color: #11a004e0;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  padding: 10px;
  width: 220px;
  margin-left: 2em;
  animation-name: boton_nav;
  animation-duration: 4s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-delay: 3s;
}

Upvotes: 0

Views: 3155

Answers (1)

spacer GIF
spacer GIF

Reputation: 705

This server could not prove that it is www.comercialoregon.cl; its security certificate expired 428 days ago.

There's your first problem, but it isn't directly related to the question. Just felt like reminding you that your visitors will first see that big scary invalid certificate screen and will likely leave.

The issue is you are using the #rrggbbaa hexadecimal colour notation which is not yet widely supported. As of now, according to caniuse.com, only Firefox, Chrome and Safari support it. I know you mentioned it's not working on Safari, but perhaps you're on a version older than 10?

Regardless, support isn't good so I wouldn't recommend using it just yet. Instead, use the rgba function. background-color: #11a004e0; would become background-color: rgba(17, 160, 4, 224); as the colour values are represented in decimal rather than hexadecimal.

Upvotes: 1

Related Questions