IE7 Gradient Filter Ignored on Block Elements
The fancy CSS3 properties available in webkit and firefox (such as border-radius, text-shadow, box-shadow and browser generated gradients) that people seem to want so much on their sites tend to make an identical user experience across all browsers near to impossible without bringing unnecessary images (unnecessary for modern browsers) back into the layout. If an identical experience is not desired, or perhaps not in the budget, a reasonable degradation of the eye-candy is expected and, for the most part, can come out usable and in good taste.
IE (<=8), naturally being the most common cause of acute sharp pain, is the browser to suffer most from new features of modern browsers. Surprisingly, however, the browser has been outfitted with a gradient generator since version 5.5 (circa June 2000.) It is not robust, by any means, but can help smooth some of the irregularities between the intended layout and the IE rendering of it.
To the point: IE7 does not render gradient elements properly in some cases. The gradient filter (and perhaps other filters as well – will need to test that) is not rendered for bock elements, <div>, <h1>, <p> tags, that do not have an explicit width set in CSS. Both IE7 and IE8 will not render a gradient on an inline element, but will for an inline-block.
If, for whatever masochistic reason, you are using IE7 or have it on hand you can look at a gradient demo that shows the IE7 gradient issue and a potential solution.
