bug - MS gradient fails in IE8 strict mode

#1 (**permalink**) 10-23-2009

The custom Microsoft Gradient filter does not display as expected in strict
IE8 mode when the style includes a background color, using Internet Explorer
8.0.6001.18702 on Windows XP SP3. The gradient works in IE7 mode, or if the
element does not have a background color, or if the element is a button.

See the extended example below.

<html>
<head>
<title>Gradient test in IE</title>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style type='text/css'>
..grad
{
color:yellow;
filter

rogid

XImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr='white',EndColorstr= 'blue');
background-color:green;
}
</style>
</head>

<body>
<h1>Gradient test</h1>
This is a test for a bug in Internet Explorer 8.
We expect to see a blue gradient instead of a green block in the table.
This works if you change IE=8 to IE=7 for X-UA-Compatible
*or* remove the background-color from the stylesheet.
(You must also allow "active content".)
<table class="grad" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr height="55"><td>Hello, world!</td></tr>
</table>
Note that buttons have gradient in IE8 mode even with a background color:<br>
<input type="submit" value="Hello, world!" class="grad">
</body> </html>

----------------
This post is a suggestion for Microsoft, and Microsoft responds to the
suggestions with the most votes. To vote for this suggestion, click the "I
Agree" button in the message pane. If you do not see the button, follow this
link to open the suggestion in the Microsoft Web-based Newsreader and then
click "I Agree" in the message pane.

http://www.microsoft.com/communities...orer. general

#2 (**permalink**) 10-23-2009

http://blogs.msdn.com/ie/archive/200...rs-in-ie8.aspx

"hapless developer" <hapless developer@discussions.microsoft.com> wrote in
message news:B6620D3D-B528-4B4F-B8EC-9DA8CA0B6E7A@microsoft.com...
> The custom Microsoft Gradient filter does not display as expected in
> strict
> IE8 mode when the style includes a background color, using Internet
> Explorer
> 8.0.6001.18702 on Windows XP SP3. The gradient works in IE7 mode, or if
> the
> element does not have a background color, or if the element is a button.
>
> See the extended example below.
>
> <html>
> <head>
> <title>Gradient test in IE</title>
> <meta http-equiv="X-UA-Compatible" content="IE=8">
> <style type='text/css'>
> .grad
> {
> color:yellow;
> filter

rogid

XImageTransform.Microsoft.Gradient
> (GradientType=0,StartColorStr='white',EndColorstr= 'blue');
> background-color:green;
> }
> </style>
> </head>
>
> <body>
> <h1>Gradient test</h1>
> This is a test for a bug in Internet Explorer 8.
> We expect to see a blue gradient instead of a green block in the table.
> This works if you change IE=8 to IE=7 for X-UA-Compatible
> *or* remove the background-color from the stylesheet.
> (You must also allow "active content".)
> <table class="grad" cellSpacing="0" cellPadding="0" width="100%"
> border="0">
> <tr height="55"><td>Hello, world!</td></tr>
> </table>
> Note that buttons have gradient in IE8 mode even with a background
> color:<br>
> <input type="submit" value="Hello, world!" class="grad">
> </body> </html>
>
>
> ----------------
> This post is a suggestion for Microsoft, and Microsoft responds to the
> suggestions with the most votes. To vote for this suggestion, click the "I
> Agree" button in the message pane. If you do not see the button, follow
> this
> link to open the suggestion in the Microsoft Web-based Newsreader and then
> click "I Agree" in the message pane.
>
> http://www.microsoft.com/communities...orer. general

#3 (**permalink**) 10-23-2009

-ms-filter:"progid

XImageTransform.Microsoft.Alpha(op acity=50)";

filter

rogid

XImageTransform.Microsoft.Alpha(opa city=50);

"rob^_^" <iecustomizer@hotmail.com> wrote in message
news:70B1A30C-513A-46AF-BE2D-3562F0EDCD17@microsoft.com...
> http://blogs.msdn.com/ie/archive/200...rs-in-ie8.aspx
>
>
>
> "hapless developer" <hapless developer@discussions.microsoft.com> wrote in
> message news:B6620D3D-B528-4B4F-B8EC-9DA8CA0B6E7A@microsoft.com...
>> The custom Microsoft Gradient filter does not display as expected in
>> strict
>> IE8 mode when the style includes a background color, using Internet
>> Explorer
>> 8.0.6001.18702 on Windows XP SP3. The gradient works in IE7 mode, or if
>> the
>> element does not have a background color, or if the element is a button.
>>
>> See the extended example below.
>>
>> <html>
>> <head>
>> <title>Gradient test in IE</title>
>> <meta http-equiv="X-UA-Compatible" content="IE=8">
>> <style type='text/css'>
>> .grad
>> {
>> color:yellow;
>> filter

rogid

XImageTransform.Microsoft.Gradient
>> (GradientType=0,StartColorStr='white',EndColorstr= 'blue');
>> background-color:green;
>> }
>> </style>
>> </head>
>>
>> <body>
>> <h1>Gradient test</h1>
>> This is a test for a bug in Internet Explorer 8.
>> We expect to see a blue gradient instead of a green block in the table.
>> This works if you change IE=8 to IE=7 for X-UA-Compatible
>> *or* remove the background-color from the stylesheet.
>> (You must also allow "active content".)
>> <table class="grad" cellSpacing="0" cellPadding="0" width="100%"
>> border="0">
>> <tr height="55"><td>Hello, world!</td></tr>
>> </table>
>> Note that buttons have gradient in IE8 mode even with a background
>> color:<br>
>> <input type="submit" value="Hello, world!" class="grad">
>> </body> </html>
>>
>>
>> ----------------
>> This post is a suggestion for Microsoft, and Microsoft responds to the
>> suggestions with the most votes. To vote for this suggestion, click the
>> "I
>> Agree" button in the message pane. If you do not see the button, follow
>> this
>> link to open the suggestion in the Microsoft Web-based Newsreader and
>> then
>> click "I Agree" in the message pane.
>>
>> http://www.microsoft.com/communities...orer. general
>

#4 (**permalink**) 10-26-2009

Rob,

Thanks for pointers -- it was interesting to read about the official
ms-filter syntax for IE8. However, it doesn't solve my problem.

I still think this is a rendering bug in IE8:
1. the button *does* get the gradient, so the style clearly parses OK.
2. changing my example to the blessed syntax
-ms-filter:
"progid

XImageTransform.Microsoft.Gradient(Gradie ntType='0',StartColorStr='white',EndColorstr='blue ')";
has no effect on the outcome. I think that's because IE8
accepts the old format as "close enough".

So, does anyone know a workaround? Or is there any more direct way to
report this bug to Microsoft? From what I could tell, this newsgroup
is the approved channel, but I still don't quite believe it.

Thanks!

"rob^_^" wrote:

> -ms-filter:"progid

XImageTransform.Microsoft.Alpha(op acity=50)";
>
> filter

rogid

XImageTransform.Microsoft.Alpha(opa city=50);
>
> "rob^_^" <iecustomizer@hotmail.com> wrote in message
> news:70B1A30C-513A-46AF-BE2D-3562F0EDCD17@microsoft.com...
> > http://blogs.msdn.com/ie/archive/200...rs-in-ie8.aspx

#5 (**permalink**) 10-26-2009

Hi,

You include both syntaxes. If you are pedantic, you also include the syntax
for the other browsers.

style="display:block ; background-color:Red; color:White;
text-align:center;z-index:1;filter:alpha(opacity=00);-ms-filter:
'Alpha(Opacity=00)';opacity: 0.00;-moz-opacity: 0.00;filter:
alpha(opacity=00);-khtml-opacity: 0.00 ;clear:both"

Regards.

"hapless developer" <haplessdeveloper@discussions.microsoft.com> wrote in
message news:0ADC78ED-1E52-4492-BD29-71CA57507AB5@microsoft.com...
> Rob,
>
> Thanks for pointers -- it was interesting to read about the official
> ms-filter syntax for IE8. However, it doesn't solve my problem.
>
> I still think this is a rendering bug in IE8:
> 1. the button *does* get the gradient, so the style clearly parses OK.
> 2. changing my example to the blessed syntax
> -ms-filter:
> "progid

XImageTransform.Microsoft.Gradient(Gradie ntType='0',StartColorStr='white',EndColorstr='blue ')";
> has no effect on the outcome. I think that's because IE8
> accepts the old format as "close enough".
>
> So, does anyone know a workaround? Or is there any more direct way to
> report this bug to Microsoft? From what I could tell, this newsgroup
> is the approved channel, but I still don't quite believe it.
>
> Thanks!
>
> "rob^_^" wrote:
>
>> -ms-filter:"progid

XImageTransform.Microsoft.Alpha(op acity=50)";
>>
>> filter

rogid

XImageTransform.Microsoft.Alpha(opa city=50);
>>
>> "rob^_^" <iecustomizer@hotmail.com> wrote in message
>> news:70B1A30C-513A-46AF-BE2D-3562F0EDCD17@microsoft.com...
>> > http://blogs.msdn.com/ie/archive/200...rs-in-ie8.aspx
>

#6 (**permalink**) 10-26-2009

Right, I tried that, and it had no effect.

I still get a button with a pretty gradient, and a plain green background in
the table. Even though they're both supposedly displaying the same style.

If it was really a parsing issue as you suggest, shouldn't the gradient fail
to appear everywhere?

"rob^_^" wrote:

> Hi,
>
> You include both syntaxes. If you are pedantic, you also include the syntax
> for the other browsers.
>
> style="display:block ; background-color:Red; color:White;
> text-align:center;z-index:1;filter:alpha(opacity=00);-ms-filter:
> 'Alpha(Opacity=00)';opacity: 0.00;-moz-opacity: 0.00;filter:
> alpha(opacity=00);-khtml-opacity: 0.00 ;clear:both"
>
> Regards.

#7 (**permalink**) 10-28-2009

I don't know. I am not looking over your shoulder. You are the one holding
the keyboard.

Is you page error free otherwise? Do you have the IE8 compatibility view
error handling switched off?

Regards.

"hapless developer" <haplessdeveloper@discussions.microsoft.com> wrote in
message news:5850099D-FD4B-4B58-AA20-5BBCE4CD0575@microsoft.com...
> Right, I tried that, and it had no effect.
>
> I still get a button with a pretty gradient, and a plain green background
> in
> the table. Even though they're both supposedly displaying the same style.
>
> If it was really a parsing issue as you suggest, shouldn't the gradient
> fail
> to appear everywhere?
>
> "rob^_^" wrote:
>
>> Hi,
>>
>> You include both syntaxes. If you are pedantic, you also include the
>> syntax
>> for the other browsers.
>>
>> style="display:block ; background-color:Red; color:White;
>> text-align:center;z-index:1;filter:alpha(opacity=00);-ms-filter:
>> 'Alpha(Opacity=00)';opacity: 0.00;-moz-opacity: 0.00;filter:
>> alpha(opacity=00);-khtml-opacity: 0.00 ;clear:both"
>>
>> Regards.
>
>

#8 (**permalink**) 11-03-2009

Feel free to try the HTML case that I included with my original post -- it's
one way to "look over my shoulder" from wherever you are.

I think the page is otherwise error-free. I'm not sure what you mean my
"IE8 compatibility view error handling", but you can see in the original HTML
that I've explicitly told IE to read the page in IE8 "strict" mode.

The rendering inconsistency goes away in IE7 mode, but that does me little
good. I based my example case on a much more complicated page on which I
also have outlining, a feature that IE8 seems to only support in "strict"
mode. Can't tell if that's a different bug or Intended Behavior, but I've
been assuming the latter.

Thanks for your continued help and attention. Out of curiosity, is there
any more direct way of reporting a bug to Microsoft or is this as good as it
gets?

"rob^_^" wrote:

> I don't know. I am not looking over your shoulder. You are the one holding
> the keyboard.
>
> Is you page error free otherwise? Do you have the IE8 compatibility view
> error handling switched off?
>
> Regards.
>
> "hapless developer" <haplessdeveloper@discussions.microsoft.com> wrote in
> message news:5850099D-FD4B-4B58-AA20-5BBCE4CD0575@microsoft.com...
> > Right, I tried that, and it had no effect.
> >
> > I still get a button with a pretty gradient, and a plain green background
> > in
> > the table. Even though they're both supposedly displaying the same style.
> >
> > If it was really a parsing issue as you suggest, shouldn't the gradient
> > fail to appear everywhere?

bug - MS gradient fails in IE8 strict mode

microsoft.public.internetexplorer.general