I have been working on a new drop-down control, using dropkick, and I have it working in Chrome/FF, but not in IE8, which is sadly still our target. I used a single-pixel background image with background-repeat:repeat-y and background-size:x% to get the desired effect.
I discovered too late that IE8 does not support background-size and my question is this: How do I emulate this effect in IE8?
My first thought is with some weird z-indexing and variable-width divs inside the li tags and behind the a tags, but my attempts at that have had less than spectacular results (largely because I have a hard time understanding css positioning). I am not sure how much it complicates things that this control resides on a draggable and resizable jQuery dialog, but for the sake of this question we can assume it won't move or change.
The end result is something like this:
The numbers in the parens as well as the fill percentage are filled in with the options via an AJAX call.
The code generated for the faux-dropdown is along these lines (truncated list):
<div class="dk_options" style="top: 19px;">
<ul class="dk_options_inner">
<li class=" ">
<a style="background-size:0%;" data-dk-dropdown-value=""> </a>
</li>
<li class="dk_option_current ">
<a style="background-size:6.6666666666666666666666666700%;" data-dk-dropdown-value="08:30AM">8:30 AM (1)</a>
</li>
<li class=" ">
<a style="background-size:13.333333333333333333333333330%;" data-dk-dropdown-value="08:45AM">8:45 AM (2)</a>
</li>
<li class=" ">
<a style="background-size:100%;" data-dk-dropdown-value="09:00AM">9:00 AM (15)</a>
</li>
<li class=" ">
<a style="background-size:0%;" data-dk-dropdown-value="09:15AM">9:15 AM (1)</a>
</li>
<li class=" ">
<a style="background-size:6.6666666666666666666666666700%;" data-dk-dropdown-value="09:30AM">9:30 AM (1)</a>
</li>
</ul>
</div>
</div>
And the relevant css is something like this:
.dk_options_inner li {
background:white;
}
.dk_options a {
background-image:url(./images/dot.png);
background-repeat:repeat-y;
}