UPDATE: This issue is specific to Safari on a Mac computer.
Left: Safari Right: Google Chrome
I have a header positioned above a slideshow, and any text appears faded in color. Upon page load, the text starts off white and then quickly fades. The temporary site can be viewed at actorscms.co.uk. The email and phone number in the top right corner are faded. Any text placed on the slideshow (not just the top area) becomes faded as well.
HTML
<div id="bannerbox">
<div id="banner">
//slideshow//
</div>
</div>
<div id="headerbox">
<div id="header">
<div id="social">
<img src="../images/fb thumb.png" width="28" height="28" alt="Facebook" />
<img src="../images/twitter thumb.png" width="28" height="28" alt="Twitter" /><br />
Email: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f49d9a929bb4969881968190909c95da979bda819f">[email protected]</a> "><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf2f5fdf4dbf9f7eef9eefffff3fab5f8f4b5eef0">[email protected]</a> </a><br />
Phone: xxxxxxxxxxx
</div>
<div id="navigation">
<ul id="nav">
<li><a class="home" href="index.html"></a></li>
<li><a class="services" href="services.html"></a></li>
<li><a class="prices" href="prices.html"></a></li>
<li><a class="contact" href="contacts.html"></a></li>
</ul>
</div>
</div>
</div>
CSS
#bannerbox {
position:relative;
width:100%;
padding-bottom:20px;
border-top:1px solid #191919;
background-color:#000;
}
#banner {
width:100%;
margin-left:auto;
margin-right:auto;
}
#headerbox {
width:100%;
height:120px;
position:absolute;
background-image:url(../images/black.png);
background-repeat:repeat;
z-index:1;
top:0;
}
#header {
height: 120px;
min-width: 980px;
max-width:1100px;
background-image: url(../images/header.png);
margin-left: auto;
margin-right: auto;
background-repeat: no-repeat;
font-family: 'Josefin Slab', serif;
font-size:20px;
color:#bfefff;
padding-bottom:10px;
margin-right:auto;
margin-left:auto;
}
#social {
float:right;
text-align:right;
padding-right:10px;
padding-top:15px;
line-height:20px;
font-family: 'Josefin Slab', serif;
color:#fff;
font-size:15px;
}
#navigation
{
height:50px;
padding-top:67px;
margin-left:142px;
}