• 0
Sign in to follow this  
Followers 0

Nav Bar CSS in Safari


Question

Posted · Report post

Hi,

 

I cannot seem to see navbar css color changes in the desktop version of safari?

Works fine in Firefox and Chrome and safari on mobile ios.

 

Anyone available to check?

 

Should show as a lite-grey to navy.

 

Here is the link. 

http://bit.ly/1hmq2oV

 

Thank you.

 

 

Share this post


Link to post
Share on other sites

6 answers to this question

  • 0

Posted · Report post

Hi there, I see it as white in safari.

 

Are you using the webkit prefix in your css? Can the hexes below using the webkit prefix and this should affect safari

 

.navbar.pl-color-grey {
  background-color:#F8F8F8;
  background-image:-webkit-linear-gradient(top, #FFFFFF, #EEEEEE);}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes...

funny that it works on the ipad using Safari

 

 

.navbar.pl-color-grey {
    background-color: #001034;
    background-image: linear-gradient(#aaaaaa, #001034);
    background-repeat: repeat-x;
    border-top: 1px solid #001034;
    color: rgba(0, 0, 0, 0.5);
}
 

 

I'll try the webkit for background-image..

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

So did the webkit for safari on the desktop.. but showed up white in firefox...

 

Had to put both in for Firefox to show up... Does that sound right?

 

.navbar.pl-color-grey {
  background-color:#001034;
  background-image:-webkit-linear-gradient(top, #aaaaaa, #001034);
 border-top: 1px solid #001034;
}
.navbar.pl-color-grey {
    background-color: #001034;
    background-image: linear-gradient(#aaaaaa, #001034);
    background-repeat: repeat-x;
    border-top: 1px solid #001034;
    color: rgba(0, 0, 0, 0.5);
}

 

 

the safari on ipad ios shows up grey.. hmmm

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, yes that's correct. The navbar gradient is cross browser code, so you'll need to add all the different lines for each browser. The full spectrum of the code used I've copied an example below for you.

 

.navbar.pl-color-black-trans { background-color: rgba(0, 0, 0, 0.12);
background-image: -moz-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: -ms-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: -webkit-gradient(linear,0 0,0 100%,from(rgba(0, 0, 0, 0.8)),to(rgba(0, 0, 0, 0.9)));
background-image: -webkit-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: -o-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-repeat: repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’rgba(0,0,0,0.8)’, endColorstr=’rgba(0,0,0,0.9)’, GradientType=0);
border-top: 1px solid rgba(0, 0, 0, 0.9);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′,EndColorStr=’#222222′);

}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

aaahhhh.

 

got it...

thank you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you want to make your life easier, you should just use LESS CSS and the gradient mixin.

 

.my class {

     #gradient > .vertical(red, blue);

}

 

The #gradient > .vertical() will generate all browser compatible CSS, saving you a lot of time and effort.

 

http://docs.pagelines.com/advanced/less-css

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0