Hi Tee,
Unfortunately, this is a known issue.
Basically, this MS gradient filters will "drown out" or over-ride borders. You
can see this more dramatically if you apply an MS gradient filter to a box that
also has a border-radius defined. The MS gradient filter will render a gradient
background as a square box - over-riding the round corners entirely.
Bottom line: these MS filters are very crude, and also cause performance issues
- making page load much slower.
Apologies if this was just a rough test, but if you were going to try and make
these gradients cross-browser, you would need to do something like this
(excluding the MS filter in sample below):
#c td
{
background-image: -webkit-gradient(linear,left top,left
bottom,from(#fff),to(yellow));
background-image: -webkit-linear-gradient(#fff,yellow);
background-image: -moz-linear-gradient(#fff,yellow);
background-image: -ms-linear-gradient(#fff,yellow);
background-image: -o-linear-gradient(#fff,yellow);
background-image: linear-gradient(#fff,yellow);
}
The first one if for the current version of webkit - which uses the oldest
syntax
The second one is for Chrome and the upcoming webkit versions (using the W3C
syntax)
The third one is obviously mozilla (using a slightly older syntax, but works
with the W3C syntax)
The fourth is for IE10 (using the W3C syntax)
Then Opera (using the W3C syntax)
And last, the actual W3C version
Aren't vender-specific extensions a joy :(
Be careful abut using the "center" keyword to define the start position/angle
as this is really only supported by Mozilla (which uses a slightly older
syntax). All other browsers support the W3C syntax, which allow the start
position/angle to be defined using four options:
Option 1 - leave blank
You can actually leave the start point or angle undefined, and the browser
will use the initial value “top” as the start point.
Option 2 - single keyword
You can define the start point/angle using a single keyword: " left",
" right", " top", "bottom"
Option 3 - two keywords
You can define the start point/angle using two keywords: " left top", " left
bottom ", "right top", " right bottom"
Note: "center" is not permitted.
Option 4 - angle
You can define the start point/angle using any positive or negative angle:
"0deg", " 90deg", " -50deg" ... etc
I prefer option 1 where possible (simplest to write) or option 4 (can define
exact angle).
HTH
Russ
On 10/07/2011, at 8:54 AM, tee wrote:
> Is this an IE9 bug?
>
> http://jsbin.com/acawat
>
> First table has -ms-filter: "progid:DXImageTransform.Microsoft.gradient" for
> th and td, border lines are gone except the first (border-top for th) and the
> last {border-bottm for td).
>
> Thanks!
>
> tee
>
> *******************************************************************
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> *******************************************************************
>
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
