1 reply [Last post]
davidmichaelangelo
davidmichaelangelo's picture
Offline
newbie
Last seen: 10 years 9 weeks ago
Timezone: GMT-4
Joined: 2011-12-20
Posts: 4
Points: 6

I used a CSS button generator to create the following code:

.blueGradient{
	background-color: #0137a3 !important;
	background: #0137a3 !important; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff7f04 0%, #003399 100%) !important; /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7f04), color-stop(100%,#003399)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ff7f04 0%,#003399 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #86aeff 0%,#3b7cff 0%,#003399 80%,#0137a3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ff7f04 0%,#003399 100%); /* IE10+ */
	background: linear-gradient(top,  #ff7f04 0%,#003399 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7f04', endColorstr='#0137a3',GradientType=0 ); /* IE6-9 */
}

The styling works perfectly for Firefox but does not work for Chrome or IE Puzzled
Any obvious errors in what I have done? I am currently using Chrome version 20 and am hoping to get the code to work for IE 8 and 9 and currently it doesn't work for either version.

You can see what I am talking about on the test page I created here: http://www.bluelinkerp.com/test.asp
(gradient should be orange and blue, which is displayed in Firefox but not in the other browsers)

P.s. I used extreme colours for illustrative purposes.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 31 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Stymied

I don't expect IE to work until v10 is out, but I don't see why Chrome is failing.

See linear gradients live demo. Chrome does work; just not for me.

Here is my test. Obviously I have made an error, I just don't see it. this test works for Opera and Firefox, but not Chrome; and it should.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" 
	  content="text/html; charset=UTF-8" />
 
    <title>Test</title>
 
    <style type="text/css">
 
      html, body {
        background-color: white;
        color: black;
        font: 100%/1.25 sans-serif;
        margin: 0; 
        padding: 0;
        }
 
      p {
        font-size: 1em;
        text-align: center;
        }
 
      a.button {
        background-color: darkblue;
        color: white;
        font-size: 1.125em;
        font-weight: bold;
        padding: 3px 5px;
        border-radius: 5px;
        text-decoration: none;
        }
 
      a.gradient {
        background: -moz-linear-gradient(to bottom, orange, blue);
        background: -webkit-linear-gradient(to bottom, orange, blue);
        background: -o-linear-gradient(to bottom, orange, blue);
        background: -ms-linear-gradient(to bottom,orange, blue);
        background: linear-gradient(to bottom, orange, blue);
        }
 
      a.gradient:hover {
        background: -moz-linear-gradient(to top, orange, blue);
        background: -webkit-linear-gradient(to top, orange, blue);
        background: -o-linear-gradient(to top, orange, blue);
        background: -ms-linear-gradient(to top,orange, blue);
        background: linear-gradient(to top, orange, blue);
        }
 
      #wrapper {
        border: 1px dotted gray;
        margin: 20px auto 0;
        width: 90%;
        }
 
    </style>
  </head>
 
  <body>
    <div id="wrapper">
      <p><a href="#"
	    class="gradient button">
	  Test Button</a>
      </p>
    </div>
  </body>
</html>

Maybe you can spot my error and all will come together.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.