title: Color not showing up in Safari but everything is working in MSIE, FF and Chrome browsers
body: <p>In Safari the colors are not showing up correctly. However everything is working in IE, FF and Chrome. </p>
  
  <p>I'd like to make it work cross-browser. Is there any way to accomplish that?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('http://fonts.googleapis.com/css?family=Ubuntu');
  
  /*Basic Reset*/
  
  * {
    margin: 0;
    padding: 0;
  }
  /** Dit zorgt voor dat inhoud in het midden blijft **/
  
  /*Some fancy BG*/
  
  /** body {
   background: url('http://thecodeplayer.com/uploads/media/bluebg.jpg') center center fixed;
   background-size: cover;
      } **/
  
  .pricing_table {
    width: 600px;
    color: #fff;
    font-size: 12px;
    font-family: Ubuntu, arial, verdana;
    line-height: 150%;
    text-align: center;
    margin: 100px auto 0 auto;
  }
  /*Only the direct LI child, not the .features li*/
  
  .pricing_table&gt;li {
    background: linear-gradient(#666, #333);
    width: 33.33%;
    float: left;
    list-style-type: none;
    /*For smooth hover effects if .active is replaced by :hover*/
    transition: all 0.2s;
  }
  h4,
  .pricing_table ul * {
    color: #fff;
    list-style-type: none;
  }
  .pricing_table&gt;li.active {
    background: linear-gradient(#F9B84A, #DB7224);
    transform: scale(1.03);
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
  }
  .pricing_table h4 {
    /** h3 stond hier **/
    text-transform: uppercase;
    padding: 15px 0;
    font-size: 14px;
    font-weight: bold;
  }
  .pricing_table .price_body {
    width: 125px;
    height: 125px;
    margin: 0 auto 15px auto;
    border: 2px solid #fff;
    border-radius: 90px;
    display: table;
    /** was eerst table **/
    /** overflow: hidden;  testje **/
  }
  .price_body {
    width: 125px;
    height: 125px;
  }
  span.price_figure,
  span.price_term {
    display: block;
    margin-top: 24px;
    position: relative;
    left: -390px;
    color: #fff;
  }
  .price {
    display: block;
    float: left;
    padding: 12.5%;
    width: 95px;
    height: 95px;
    border-radius: 95px;
    -moz-border-radius: 95px;
    -webkit-border-radius: 95px;
    -khtml-border-radius: 95px;
    /** background:#eee; **/
    text-align: center;
  }
  .pricing_table .price {
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    /*Lets vertically center align the price now*/
    vertical-align: middle;
    display: table-cell;
  }
  .pricing_table .price .price_figure {
    display: block;
  }
  .pricing_table .price .price_term {
    font-size: 11px;
    font-weight: normal;
  }
  .pricing_table .features .features ul.lijst li {
    list-style-type: none;
    padding: 5px 0;
  }
  .pricing_table .footer {
    padding: 10px;
    background: #333;
    margin-top: 10px;
  }
  /** Donkere knop zwart **/
  
  li.action_button a.action_button {
    list-style-type: none;
    color: #fff;
    font-size: 11px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    background: #000;
    padding: 4px 20px;
    border-radius: 15px;
    background: linear-gradient(#666, #333);
  }
  /** Lichte knop oranje **/
  
  li.action_button_active a.action_button_active {
    list-style-type: none;
    color: #fff;
    font-size: 11px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    background: #000;
    padding: 4px 20px;
    border-radius: 15px;
    background: linear-gradient(#F9B84A, #DB7224);
  }
  /** footer buttons **/
  
  .pricing_table .footer .action_button {
    color: #fff;
    font-size: 11px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    background: #000;
    padding: 4px 20px;
    border-radius: 15px;
    background: linear-gradient(#666, #333);
  }
  .pricing_table li.active .footer .action_button {
    background: linear-gradient(#F9B84A, #DB7224);
  }
  .clr {
    clear: both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="pricing_table"&gt;
    &lt;li&gt;
      &lt;h4&gt;Awesome Double NL&lt;/h4&gt;
      &lt;div class="price_body"&gt;
        &lt;div class="price"&gt;
          &lt;span class="price_figure"&gt;&amp;euro; 17,99&lt;/span&gt;
          &lt;span class="price_term"&gt;per moaand&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="features"&gt;
        &lt;ul class="lijst"&gt;
          &lt;li class="action_button_active"&gt;&lt;a title="Bestel nu Awesome Double NL" rel="nofollow" href="https://www.secure.versio.nl/orderhosting.php?pa=48034rtfvi&amp;amp;id=74" class="action_button_active" onclick="target='_blank';"&gt;Bestel Nu&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;15000 MB&lt;/strong&gt; Schijfruimte
            &lt;br /&gt;+90 MB extra per maand&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;200 GB&lt;/strong&gt; Dataverkeer
            &lt;br /&gt;+1,2 GB extra per maand&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;10&lt;/strong&gt; Domeinen Hosten&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;
        &lt;a title="Awesome Double NL" rel="nofollow" href="https://www.secure.versio.nl/orderhosting.php?pa=48034rtfvi&amp;amp;id=74" class="action_button" onclick="target='_blank';"&gt;Bestel nu&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  
    &lt;!-- Active/Hover styles --&gt;
    &lt;li class="active"&gt;
      &lt;h4&gt;Awesome Triple NL&lt;/h4&gt;
      &lt;div class="price_body"&gt;
        &lt;div class="price"&gt;
          &lt;span class="price_figure"&gt;&amp;euro; 29,99&lt;/span&gt;
          &lt;span class="price_term"&gt;per maand&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="features"&gt;
        &lt;ul class="lijst"&gt;
          &lt;li class="action_button"&gt;&lt;a title="Bestel nu Awesome Triple NL" rel="nofollow" href="https://www.secure.versio.nl/orderhosting.php?pa=48034rtfvi&amp;amp;id=75" class="action_button" onclick="target='_blank';"&gt;Bestel Nu&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;40000 MB&lt;/strong&gt; Schijfruimte
            &lt;br /&gt;+180 MB extra per maand&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;600 GB&lt;/strong&gt; Dataverkeer
            &lt;br /&gt;+2,4 GB extra per maand&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;25&lt;/strong&gt; Domeinen Hosten&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;
        &lt;a title="Bestel nu Awesome Triple NL" rel="nofollow" href="https://www.secure.versio.nl/orderhosting.php?pa=48034rtfvi&amp;amp;id=75" class="action_button" onclick="target='_blank';"&gt;Bestel nu&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;h4&gt;Awesome Singular NL&lt;/h4&gt;
      &lt;div class="price_body"&gt;
        &lt;div class="price"&gt;
          &lt;span class="price_figure"&gt;&amp;euro; 9,99&lt;/span&gt;
          &lt;span class="price_term"&gt;per maand&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="features"&gt;
        &lt;ul class="lijst"&gt;
          &lt;li class="action_button_active"&gt;&lt;a title="Bestel nu Awesome Singular NL" rel="nofollow" href="https://www.secure.versio.nl/orderhosting.php?pa=48034rtfvi&amp;amp;id=73" class="action_button_active" onclick="target='_blank';"&gt;Bestel Nu&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;7500 MB&lt;/strong&gt; Schijfruimte
            &lt;br /&gt;+45 MB extra per maand&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;100 GB&lt;/strong&gt; Dataverkeer
            &lt;br /&gt;+0,6 GB extra per maand&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;5&lt;/strong&gt; Domeinen Hosten&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;
        &lt;a title="Bestel nu Awesome Singular NL" rel="nofollow" href="https://www.secure.versio.nl/orderhosting.php?pa=48034rtfvi&amp;amp;id=73" class="action_button" onclick="target='_blank';"&gt;Bestel nu&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;!-- To prevent .pricing_table height collapse(as its children are floated) --&gt;
    &lt;div class="clr"&gt;&lt;/div&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why doesn't Safari show the right colors fpr my css buttons and background color and how can this be solved to make it work in all major browsers?</p>
  
  <p>Thank you for reading this question.</p>
  
  <h3>EDIT 1 Screenshots</h3>
  
  <p>As requested in the comments: I added 2 screenshots to show what is not working.. </p>
  
  <p>Note: The blue arrow is working and is not an issue, just didn't incude it to the Safari screen capture... 
  The background color and the color used by the css buttons are the issue..</p>
  
  <p>The picture below is a firefox 42  screen capture, it looks like this in MSIE and Chrome as well.
  <a href="https://i.stack.imgur.com/Auwv3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Auwv3.jpg" alt="firefox 42 screenshot"></a></p>
  
  <p>The picture below is a Safari 5.1.7 screen capture
  <a href="https://i.stack.imgur.com/ba8y2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ba8y2.jpg" alt="Safari 5.1.7 screenshot"></a></p>