CODEWITHSUNDEEP
javascripthtmlcssinternet-explorer-8kendo-ui
mswieboda
mswieboda

Reputation: 1026

How can I fix custom Kendo UI theme CSS which causes an IE 8 glitch?

Trying: Kendo UI Mendu demo with custom theme (Kendo UI Custom Themes or modified theme CSS)

I've customized the Bootstrap theme, and encountered a glitch in IE 8 when mousing over a menu item, only when using the custom theme CSS.

Customized Bootstrap theme example: http://jsbin.com/ovufef/1/edit (Glitch in IE 8)

Original Bootstrap theme example: http://jsbin.com/urinev/1/edit (works as expected)

Kendo UI Menu: 

<ul id="menu">
    <li>
        Stores
        <ul>
            <li>
                <div style="padding: 50px;">
                    <h2>Around the Globe</h2>
                </div>
            </li>
        </ul>
    </li>
</ul>
<script>
$(document).ready(function() {
    $("#menu").kendoMenu();
});
</script>

View the CSS in the jsBins, they are too long to include here since they are Kendo themes.

Basically the glitch is when you mouse over an item, it does not drop the sub item down immediately, you must move your mouse over where the sub item would display, and wiggle around until it weirdly and magically appears.

I'm unsure what is causing the IE8 glitch in my custom theme. The styles are so simliar, I can't figure out what's causing it. I have done a file diff on the CSS, and seems to me (after looking at the diff a few times) to be only background color, gradient, border color, etc changes.

If anyone could help me fix the custom CSS, it would be much appreciated.

Notes:

Upvotes: 3

Views: 2376

Answers (2)

mswieboda
mswieboda

Reputation: 1026

@Bundyo was correct, the issue does not happen in the jsBin new window. However, it was still reproducing on a site I was developing. I eventually figured out it was my gradient syntax for IE most likely causing the problem.

Changed to:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff, endColorstr=#00ffffff, GradientType=0);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff, endColorstr=#00ffffff, GradientType=0);

Originally I had startColorstr='#80ffffff', endColorstr='#00ffffff' with the single quotes, which may have been an issue.

fixed jsBin for reference: http://jsbin.com/ovufef/12/edit

Upvotes: 1

Bundyo
Bundyo

Reputation: 2193

Something happens in that jsBin iframe - if you open the bin in a new window - it works.

Upvotes: 2

Related Questions