title: Telerik Date Picker in IE <8
body: <p>I'm using the Date Picker from the Telerik MVC library.  It appears and works fine in Firefox and IE8+ in standards mode.</p>
  
  <p><img src="https://i.stack.imgur.com/HIpVD.jpg" alt="Correct display"></p>
  
  <p>In IE6, IE7, and IE8 in Quirks or IE7 Standards modes the <code>input</code> field is displayed, but not the calendar icon.</p>
  
  <p><img src="https://i.stack.imgur.com/wJOG9.jpg" alt="Incorrect display"></p>
  
  <p>I think I've narrowed it down to a problem rendering the span that contains the icon.  The HTML for this span is:</p>
  
  <pre><code>&lt;span class="t-icon t-icon-calendar" title="Open the calendar"&gt;Open the calendar&lt;/span&gt;
  </code></pre>
  
  <p>and the CSS applied to the <code>span</code> is:</p>
  
  <p><img src="https://i.stack.imgur.com/HT9Jx.jpg" alt="css rules"> </p>
  
  <p>The problem seems to be that the <code>span</code> 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?</p>
  
  <p>I've tried setting <code>font-size</code> and <code>line-height</code> to <code>12px</code>, but it didn't help.</p>
  
  <p><strong>Answer Update</strong></p>
  
  <p>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.</p>