[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 784
  • 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

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