Geek Answers Handbook

Linear Gradient Artifacts in Mozilla Firefox

I have a linear gradient problem in Mozilla Firefox 16. firefox linear-gradient artifact

A bad thing is visible on the screens (bad line at the bottom of the block).

the code:

<a href="#">Button Text</a>

And the CSS part:

 a { background: -moz-linear-gradient(center top , #88EB52, #3CA82D); border: 1px solid #399A29; border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: block; float: left; font-size: 16px; font-weight: bold; line-height: 54px; margin-bottom: 20px; margin-top: 20px; text-align: center; text-decoration: none; width: 376px; }

I changed the line-height property in the screenshot.

Can anyone describe what this line is and how to hide it ?!

Thanks. Sorry for my English.

+7
source share
2 answers

Tested in FF16 and works as expected. Perhaps if you specify a line height value when a problem occurs, we can track the error. I suspect this is due to the aspect ratio, if the problem occurs at all.

This is not an error, but for consistency try using percentages or values ​​for gradient lines:

 background: -moz-linear-gradient(center top, #88EB52 0%, #223312 100%);

Here is a working fiddle: http://jsfiddle.net/FVcdu/1/

+2
source

I also stumbled upon this strange error in Firefox. This took some time, but I narrowed it down to a declaration missing from css.

When you make gradients, you should try and have all the different browser standards to make your gradients look the best in all browsers. I can recommend using Ultimate CSS Gradient Generator , which will provide you with css delcerations for all available browsers.

The only ad missing for me , and which ultimately solved it, was the W3C standard: linnear-gradient ().

 background: linear-gradient(to bottom, #CCCCCC 0%,#EEEEEE 100%);

So, adding that in your code you can solve the problem with the bottom 1px line in your gradients, as it was for me.

Final CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/

+1
source

More articles:


All Articles