0

UPDATE: This problem only occurs in safari on a mac computer.

Left: safari Right: google chrome Left: safari Right: google chrome

I have a header positioned on top of a slideshow, and any text is faded in colour. When the page loads it starts off white and then immediately fades. I have put the site up temporarily at actorscms.co.uk You can see the email and phone number in the top right is faded. Text that is placed anywhere on the slideshow (not just the top area) becomes faded.

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:[email protected] ">[email protected] </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;
}

3 Answers 3

1

Found the answer! This problem is caused by the soundcloud iframe. Once I deleted that everything was fine!

0

The color for #social is set to #aaa, which is why it looks faded. Set it to #FFF.

2
  • I have changed the colour to #FFF and it is still faded. In safari, when the page loads the text actually starts white and then fades immediately. Nov 14, 2013 at 17:49
  • As Kierchon said, add !important. It looks white to me now, though. Refresh the page, perhaps your CSS is cached. Nov 14, 2013 at 17:52
0

Its not faded you just set the font color to gray.

#social {
    float:right;
    text-align:right;
    padding-right:10px;
    padding-top:15px;
    line-height:20px;
    font-family: 'Josefin Slab', serif;
    color:#FFF!important; CHANGE HERE TO MAKE IT WHITE
    font-size:15px;
}
13
  • no even if it is set to white it is still faded. I will update the site to show you. And look at the big header, that is also set to white. Nov 14, 2013 at 17:47
  • @KieranVyas then change it to color:#FFF!important;
    – Kierchon
    Nov 14, 2013 at 17:51
  • @KieranVyas Looks fine to me on the site now
    – Kierchon
    Nov 14, 2013 at 17:54
  • I think what's tricking my eye is the fact that when I load the page it starts off white, and then immediately fades. Does this not happen on your browser? I'm using safari Nov 14, 2013 at 17:59
  • @KieranVyas Im using Chrome I dont think that would be a huge problem thought this is fairly straightforward. Try doing a hard reload and clearing your cache and everything. I also just pulled it up on my iPad (only safari I have) and its still white
    – Kierchon
    Nov 14, 2013 at 18:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.