Solved

CSS Gradient Not showing in Safari

Posted on 2011-03-07
4
779 Views
Last Modified: 2012-06-27
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
Comment
Question by:jfergy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 10

Expert Comment

by:jtwcs
ID: 35065953
Have a look at this site for help with gradients, http://webdesignerwall.com/tutorials/cross-browser-css-gradient

0
 

Author Comment

by:jfergy
ID: 35111531
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
 
LVL 10

Accepted Solution

by:
jtwcs earned 125 total points
ID: 35112949
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
 

Author Comment

by:jfergy
ID: 35113023
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question