[Solved] Calendar icon not showing in IE <8

[Andrew]

I'm using the Date Picker from the Telerik MVC library. It appears and works fine in Firefox and IE8+ in standards mode.

In IE6, IE7, and IE8 in Quirks or IE7 Standards modes the input field is displayed, but not the calendar icon.

I think I've narrowed it down to a problem rendering the span that contains the icon. The HTML for this span is:

<span class="t-icon t-icon-calendar" title="Open the calendar">Open the calendar</span>

and the CSS applied to the span is:

The problem seems to be that the span is being rendered with width and height of 0px, regardless of what's specified in the CSS. Why is this happening, and what can I do to fix it?

I've tried setting font-size and line-height to 12px, but it didn't help.

Answer Update

It turns out that the styling on the span wasn't the problem at all. I had some styling on the input element (float: left) which caused the span containing the image to end up behind the input.

[Dimo]

Hello Andrew,

The display:block style, which you can observe in the above styles, is not correct. It should be "inline-block" for modern browsers and "inline" for IE7 and below. Please check what causes this. It might be due to some offending custom styles on the page or invalid HTML or CSS markup.

All the best,
Dimo
the Telerik team

[Andrew]

Thanks.  Turns out the styling on the span wasn't the problem.  See my update in my question.

[cheekl]

Hi,

I having the same problem. Same page using telerik date picker working fine in IE9 and Chrome but not IE8.
Our client insists to use IE8 as corporate browser. Please advice the solution.

[Andrew]

It's been a while, so I can't remember exactly what I did.  I had a look through my stylesheet, though, and found the following code, which I think was the fix.

.t-filter-options .t-datepicker
{
    float:none
    margin:0 0 4px
}