IE8 rendering bug

[Wannes]

Hello everyone,

In IE8 (version: 8.0.7601.17514), the file input button is displayed in front of the "Select..." label, even though it clearly was styled to look transparent. From the CSS:

.k-upload-button input {

  ...

  filter:alpha(opacity=0);

  ...

}

As a work-around, the input button can be hidden and the click on the label can be forwarded to the file input button, like so:

$("#question-form-image-input").kendoUpload({

    // ...

});

 

// Fix for IE rendering bug:

if ($.browser.msie) {

    $("#question-form-image-input").hide().next("span").click(function () {

        $("#question-form-image-input").click();

    });

}

Please fix it if possible.

Best Regards,
Wannes.

[Dimo]

Hello Wannes,

I suggest you to read the following forum thread:

http://www.telerik.com/community/forums/aspnet-mvc/upload/upload-control---partially-visible.aspx

I noticed that the Kendo Upload still uses 500px font-size, so I reduced it to 200px.

Regards,
Dimo
the Telerik team

[Wannes]

I'm sorry, reducing the font-size doesn't fix the issue. It really is the apha filter that doesn't seem to work. I have attached a screenshot of what I am seeing. It's the same as on your KenoUI demo page.

On the Telerik demo page, it works perfectly, so I assume KendoUI beta2 doesn't yet contain that fix.

Best Regards,
Wannes.

[Dimo]

Hello Wannes,

Are you sure you have changed (overridden) the font-size correctly? I inspected the MVC and Kendo Uploads and this is the only notable difference in terms of styling. Anyway, I have already changed the font-size on our side and it will take effect for the official Kendo release.

Greetings,
Dimo
the Telerik team

[Wannes]

Hello Dimo,

You are right. There is almost no difference in the styling. What I tested next, was to skip the .kendoUpload() call and to just test the HTML itself. I tried putting a regular file input field inside your k-upload-button class:

<div class="k-button k-upload-button">

    <input type="file" name="someFile" style="filter: alpha(opacity=0) !important;" />

</div>

This reproduces the issue. However, when the <div> is removed, the input field is correctly transparent.

After some research, I found out that the DOCTYPE has an effect on alpha filters and also that IE8 requires the following CSS:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

Yet none of all this works. Since the Telerik example does work, it must be one of those obscure, unexplicable IE-specific bugs. I will retest this later for the next release. Maybe you can check the basic upload example from your website in IE8 for your latest development version, to see if there are any issues?

Best Regards,
Wannes.

[Wannes]

Update:
Yep, it's a IE version-specific issue. IE 8.0.6001.18702 on Windows Server 2003 seems to work properly.
Might be a new IE bug, might be a comination of IE security settings, virus scanners and Windows 7...

[Joel]

I have the same issue here.

IE version 8.0.7600.16385, on Windows 7

[Wannes]

The official 1.0 release fixes the issues.
Well done!

Best Regards,
Wannes.