Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 782
  • Last Modified:

CSS Gradient Not showing in Safari

Hello

I have the following code from Jquery Mobile whch is not rendering the gradient properly in Safari. Can you provide some help with whats missing?
.ui-bar-a {
	border: 1px solid #2A2A2A;
	background: 			#111111 url('-webkit-gradient(linear,left%20top,left%20bottom,%20color-stop(0,%20#3c3c3c))');
	color: 					#ffffff;
	font-weight: bold;
	text-shadow: 0 -1px 1px #000000;
	background-image: -moz-linear-gradient(top, #3c3c3c, #111111);
	-msfilter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#3c3c3c, EndColorStr=#111111); background-image:url('-webkit-gradient(linear,left%20top,left%20bottom,%20color-stop(0,%20#3c3c3c')
}

Open in new window

0
jfergy
Asked:
jfergy
  • 2
  • 2
1 Solution
 
jtwcsCommented:
Have a look at this site for help with gradients, http://webdesignerwall.com/tutorials/cross-browser-css-gradient

0
 
jfergyAuthor Commented:
Unfortunately that doesn't help. I have tried that style and many others with the jquery mobile code I posted in questions and still shows flat. Obviously missing something but not sure what it is. If you have other ideas regarding the code posted specifically Im all ears.
0
 
jtwcsCommented:
Do you have a link to the page/site?

Just going by the code above, you may not be declaring the gradient correctly.  Have you tried this?

background: #111111;
background: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111111)); /* for webkit browsers */

Another option would be to use an image for the gradient.
0
 
jfergyAuthor Commented:
It must be something to do with the JS for the mobile and not the CSS. If I try this outside the jquery framework its fine. But then again Jquery Mobile is in beta.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now