Question

I’ve been working on making my website compatible with not only chrome, but firefox as well, and it’s not turning out so well as I hoped it to be. Even with Firefox 9 (that i downloaded today), advertised by themselves to be the “best” browser that is compatible with more css—css3 in specific, however there were unexplainable errors, probably on my part, with some non-working css.

My first problem is with gradients. I had two gray-gradient dividers that uses the same gradient code, but produces very different results.

1. background-image: -moz-linear-gradient(bottom, rgb(58,58,58) 0%, rgb(85,85,85) 100%);
   was the one that really worked.

2. background-image: -moz-linear-gradient(bottom, rgb(42,42,42) 100%, rgb(25,25,25) 0%); however, did not. In fact it showed nothing at all. I put the first one in this one to test if it works, and it did, but this one specifically would not.

Using Firebug, it changed my line of code into: background-image: -moz-linear-gradient(center bottom , #2A2A2A 100%, #191919 0%);
So was there a mistake I made somewhere? Because I can’t see the difference between example 1 and 2.

My second error is not CSS3, but it is adding padding:20px; in the tags in a table. it works very well in chrome, but no padding showed up in firefox. Is there an alternative for this other than border properties, because I’m also using borders in the tags.

Thanks again for helping me! I appreciate it a lot, because this bug has been bugging me for the past hour or two, and I still haven’t figured anything out.

Answer 1

As you found out yourself, you cannot make a gradient from 100% to %0, so the gradient steps must be ordered with the percentage rising. (even though some browsers seem to display it, you should always keep to the standards!)

Regarding the <tr>, this tag does not take a padding attribute, see https://developer.mozilla.org/en/HTML/Element/tr

Try to achieve what you want using the cellpadding and cellspacing html attributes on the <table> or CSS padding on the <td>s.