firefox linear-gradient issue

Greg White

unread,

May 13, 2013, 12:58:04 PM5/13/13

to support...@lists.mozilla.org

I am trying to add a gradient to my website. The gradient works like it should in IE9 but in firefox 20 I get repeating gradient bars like http://www.css3files.com/wp-content/themes/css3files_v2/img/examp/repeatinglineargradient1.png
In IE I get the proper view. If I add background-size 1% 1000% then firefox shows the proper gradient.

Am I doing something wrong? I don't understand why I have to add background-size and have the valve of 1000% to get it work.

Thanks,

html {
margin: 0;
padding: 0;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#E3B74A), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #E3B74A 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #E3B74A 0%, #ffffff 100%); /* FF3.6+ */
background: -o-linear-gradient(top, #E3B74A 0%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #E3B74A 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #E3B74A 0%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E3B74A', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background-size: 1% 1000%; /* to fix Firefox */
}

Bill Braun

unread,

May 13, 2013, 1:49:19 PM5/13/13

to

Not sure this is helpful but it appears to lay out the specifics.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients

Bill

WaltS

unread,

May 13, 2013, 2:03:26 PM5/13/13

to

This newsgroup is for stylesheet problems.

comp.infosystems.www.authoring.stylesheets

--
openSUSE 12.3 (64-bit) KDE 4.10.2
Thunderbird Daily 23.0a1

Sailfish

unread,

May 13, 2013, 2:22:05 PM5/13/13

to

My bloviated meandering follows what Greg White graced us with on
5/13/2013 9:58 AM:

> I am trying to add a gradient to my website. The gradient works like it should in IE9 but in firefox 20 I get repeating gradient bars like http://www.css3files.com/wp-content/themes/css3files_v2/img/examp/repeatinglineargradient1.png
> In IE I get the proper view. If I add background-size 1% 1000% then firefox shows the proper gradient.
>
> Am I doing something wrong? I don't understand why I have to add background-size and have the valve of 1000% to get it work.
>
>

> html {
> margin: 0;
> padding: 0;
> background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#E3B74A), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
> background: -webkit-linear-gradient(top, #E3B74A 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
> background: -moz-linear-gradient(top, #E3B74A 0%, #ffffff 100%); /* FF3.6+ */
> background: -o-linear-gradient(top, #E3B74A 0%,#ffffff 100%); /* Opera 11.10+ */
> background: -ms-linear-gradient(top, #E3B74A 0%,#ffffff 100%); /* IE10+ */
> background: linear-gradient(to bottom, #E3B74A 0%,#ffffff 100%); /* W3C */
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E3B74A', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
> background-size: 1% 1000%; /* to fix Firefox */
> }
>

I believe the problem is two-fold. First, the above styles need to be
encased within a <STYLE></STYLE> tag and second, you need to give the
background a size. Try this:

<html>
<head>
<style>
body {
margin: 0;
padding: 0;
width:100%;
height:100%;

background: -webkit-gradient(linear, left top, right bottom,
color-stop(0%,#E3B74A), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #E3B74A 0%,#ffffff
100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #E3B74A 0%, #ffffff
100%); /* FF3.6+ */
background: -o-linear-gradient(top, #E3B74A 0%,#ffffff 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #E3B74A 0%,#ffffff 100%);
/* IE10+ */
background: linear-gradient(to bottom, #E3B74A 0%,#ffffff
100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#E3B74A', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

</style>
</head>
<body>
</body>
</html>

--
Sailfish - Netscape Champion
Mozilla Contributor Member - www.mozilla.org/credits/
Netscape/Mozilla Tips: http://www.ufaq.org/ , http://ilias.ca/
Rare Mozilla Stuff: http://www.projectit.com/

Greg White

unread,

May 13, 2013, 3:50:48 PM5/13/13

to support...@lists.mozilla.org

> I am trying to add a gradient to my website. The gradient works like it should in IE9 but in firefox 20 I get repeating gradient bars like http://www.css3files.com/wp-content/themes/css3files_v2/img/examp/repeatinglineargradient1.png
> In IE I get the proper view. If I add background-size 1% 1000% then firefox shows the proper gradient.
>
> Am I doing something wrong? I don't understand why I have to add background-size and have the valve of 1000% to get it work.
>

> Thanks,

>
>
> html {
> margin: 0;
> padding: 0;
> background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#E3B74A), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
> background: -webkit-linear-gradient(top, #E3B74A 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
> background: -moz-linear-gradient(top, #E3B74A 0%, #ffffff 100%); /* FF3.6+ */
> background: -o-linear-gradient(top, #E3B74A 0%,#ffffff 100%); /* Opera 11.10+ */
> background: -ms-linear-gradient(top, #E3B74A 0%,#ffffff 100%); /* IE10+ */
> background: linear-gradient(to bottom, #E3B74A 0%,#ffffff 100%); /* W3C */
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E3B74A', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
> background-size: 1% 1000%; /* to fix Firefox */
> }

I was missing the height attribute. Once I added height:100%; to html it worked perfectly.
Thank you.

Mark Filipak

unread,

May 13, 2013, 4:05:55 PM5/13/13

to support...@lists.mozilla.org

If possible, I would apply those styles to the body element as our Sailfishy
friend suggested. The html element is really just a container.
--
The Insect Hall of Fame:
Thunderbird Bug 121947 - 11 years and counting.

cwdjrxyz

unread,

May 13, 2013, 4:51:30 PM5/13/13

to

On May 13, 1:22 pm, Sailfish

<NIXCAPSsailf...@NIXCAPSunforgettable.com> wrote:
> My bloviated meandering follows what Greg White graced us with on
> 5/13/2013 9:58 AM:
>
>
>
>
>
>
>

> > I am trying to add a gradient to my website. The gradient works like it should in IE9 but in firefox 20 I get repeating gradient bars likehttp://www.css3files.com/wp-content/themes/css3files_v2/img/examp/rep...

> Netscape/Mozilla Tips:http://www.ufaq.org/,http://ilias.ca/

> Rare Mozilla Stuff:http://www.projectit.com/

Although I have not tested this on a page on my server, it is likely
that the code you give will work.

My comments concern what I consider a much better way for creation of
images than that used. Notice that you have to use exceptions for
several different browsers, and who knows what future browser upgrades
will bring. It was easy to create images with color gradients using
JavaScript many years ago. The down side was that some people turned
script off and that new updates for browsers sometimes would cause
certain scripts to fail to create an image. A better method is to use
php which has long had an extension for image creation which is well
understood. The advantage is that all of the php script is done on the
server and a viewer of the page will not have problems on different
browsers. In fact the viewer can not even see the php script or modify
it. To illustrate, see my page at http://www.cwdjr.net/video7/RoscoeGreetings.php
. The image for the selection buttons at the top of the page has a
color gradient . In addition it has several red lines, and text is
generated to label the buttons. The php code code to create the image
(less start and end php tags) is below.

$image_height = 30;
$image_width = 315;
$image = imagecreate($image_width, $image_height);
$back_color = imagecolorallocate ($image, 200, 200, 200);

$w = 315; // width of rectangle
$h = 30; // height of rectangle
$x1 =0; // upper left corner rectangle
$x2 = w; //width of rectangle
$y1 = 0; ; // start y of rectangle
$y2 = h; // end y of rectangle
$ym = round($h/2); // mid y of rectangle
$con = 3.141592654/$h ;

for ($i=0;$i<$h;$i++) {
$y=$i;
$ys = $y - $ym;

$rd = round(255*( cos($ys*$con))) ; $bl= 0 ; $gn = round(200*( cos($ys*
$con))) ;
$linecolor = imagecolorallocate ($image, $rd, $gn, $bl);
imageline ($image, $x1, $i, $w, $i,$linecolor);

}

$font_number = 5;
$text_color = imagecolorallocate ($image, 0, 0, 0);
$text ='STOP HTM5 SWF QT WMP REAL SMIL';
imagestring($image, $font_number, 6, $h/2 -$font_number-2, $text,
$text_color);
imagesetthickness ($image,6);
$end_color = imagecolorallocate ($image, 255, 0, 0) ;
imageline ($image, 0, 0, 0, $h,$end_color);
imageline ($image, 45, 0, 45, $h,$end_color);
imageline ($image, 90, 0, 90, $h,$end_color);
imageline ($image, 135, 0, 135, $h,$end_color);
imageline ($image, 180, 0, 180, $h,$end_color);
imageline ($image, 225, 0, 225, $h,$end_color);
imageline ($image, 270, 0, 270, $h,$end_color);
imageline ($image, 315, 0, 315, $h,$end_color);
imageline ($image, 0, 0, $w, 0,$end_color);
imageline ($image, 0, $h, $w, $h,$end_color);

imagecolortransparent($image, $back_color);

header ('Content-Type: image/png');
imagepng ($image);
imagedestroy ($image);

If you only wanted a color gradient, the code would be much shorter.

Sailfish

unread,

May 13, 2013, 5:43:27 PM5/13/13

to

My bloviated meandering follows what cwdjrxyz graced us with on
5/13/2013 1:51 PM:

> On May 13, 1:22 pm, Sailfish
> <NIXCAPSsailf...@NIXCAPSunforgettable.com> wrote:

> Although I have not tested this on a page on my server, it is likely
> that the code you give will work.
>
> My comments concern what I consider a much better way for creation of
> images than that used. Notice that you have to use exceptions for
> several different browsers, and who knows what future browser upgrades
> will bring.

The last entry should handle future browser upgrades (see below) since
it is the final accepted standard.

background: linear-gradient(to bottom, #E3B74A 0%,#ffffff 100%); /* W3C */

Also, the ColorZilla add-on, http://www.colorzilla.com/, removes most of
the tedium and guesswork for creating just about any gradient one might
want along with the proper styles needed to ensure its maximum
compatibility.

The problem I see with using the server is that it becomes dependent
both on the need for non-portable PHP and it takes server cycles;
whereas, CSS3 has a wide variety of patterns one can create and only
uses client browser cpu cycles, see:

http://lea.verou.me/css3patterns/

followup mozilla.general

--
Sailfish - Netscape Champion

Mozilla Contributor Member - www.mozilla.org/credits/

Netscape/Mozilla Tips: http://www.ufaq.org/ , http://ilias.ca/

Ron K.

unread,

May 13, 2013, 5:45:37 PM5/13/13

to

Greg White on 5/13/2013 3:50 PM, keyboarded a reply:

Since linear-gradient is now official, FF no longer needs the -moz.
When it was an expermental capability of Gecko, -moz was appended to
proposed CSS style attributes.

--
Ron K.
Who is General Failure, and why is he searching my HDD?
Kernel Restore reported Major Error used BSOD to msg the enemy!

Sailfish

unread,

May 13, 2013, 6:03:43 PM5/13/13

to

My bloviated meandering follows what Ron K. graced us with on 5/13/2013
2:45 PM:

REF:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient?redirectlocale=en-US&redirectslug=CSS%2Flinear-gradient

I believe it's still needed for Fx 10 ESR version.

background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%),
#bada55); /* For old Fx (3.6 to 15) */

Ron K.

unread,

May 13, 2013, 9:36:23 PM5/13/13

to

Sailfish on 5/13/2013 6:03 PM, keyboarded a reply:

Good catch. I wrote my comment based on seeing warnings in Error
Console for the depreciated -moz CSS.