1 reply to this topic

[scouseflip]

Hi All

I'm redesigning a site and thought I may as well use the opportunity to play with some of the newer stuff in CSS. My first attempt was to get a link hover colour change to fade in using -webkit-transition. My code is:

CODE

a
{
    color:#776276;
    font-weight:bold;
    -webkit-transition: color 1s ease-out;
    -moz-transition: color 1s ease-out;
    -o-transition: color 1s ease-out;
}

a:hover
{
    color:#000;
}

So my default link color is #776276 (purple), the hover colour is #000 and on hover the transition works fine. BUT when the page first loads, the links appear in the Blue default browser colour first, then fade into my purple link text... Any idea's why this is happening?

Strangely the same effect applied to my main menu does not experience the same problem, only difference is that the menu has an overriding style in the CSS file:

CODE

#topMenu a
{
    color:#999;
    font-weight:bold;
    text-decoration:none;
    display:block;
    width:145px;
    height:30px;
    border-right:solid 1px #999;
    padding:8px 0px 0px 0px;
}

#topMenu a:hover
{
    background-color:#999;
    color:#333;
}

BTW - test page that shows this problem (when using Chrome) is www.justdine.com/jdnew/default.aspx

Cheers

Andy

[chrishirst]

Works ok for me but in FF the "Summer Sale" banner image is over the menu on the left rather than on the right side