VerticalSlider inside a Dialog: issue with IE

Question

In general, I have no trouble using a dijit.form.VerticalSlider (with right decorations). Everything usually works fine in Firefox, Safari, IE6 or IE7.

Things go pear-shaped in IE6 or IE7 when I try to put that VerticalSlider inside a dijit.Dialog. In that scenario, it still works great in FF and Safari, but in IE 6 and 7, there are a few annoying quirks:

1. the decoration lines are squashed to 0 width.
2. the increment button cannot be dragged, even though it's possible to change its position by clicking directly elsewhere on the slider.
3. While the list of labels should normally be displayed bottom to top ("zero" at the bottom and "two" at the top in my example below), not so in this quirky situation where IE6/7 put labels top to bottom.

Those quirks vanish when I place the slider directly on the page rather than in a Dialog.

Here is an example of the code injected into the Dialog's content:

<div class="sliderWrapper">
   <div id="slider" 
      dojoType="dijit.form.VerticalSlider" 
      minimum="0" maximum="2" discreteValues="3"
      showButtons="false"
      style="height:130px;"
   >
      <div dojoType="dijit.form.VerticalRule" container="rightDecoration" count="3" style="width:8px;"></div>
      <ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration" count="3" style="width:280px;text-align:left;">
         <li><span>zero</span></li>
         <li><span>one</span></li>
         <li><span>two</span></li>
      </ol>
   </div>
</div>

If I increase the VerticalRule's element-styled width, Firefox behaves accordingly (by lengthening the rules and moving further right the labels), but nothing happens in IE (either version).

Finally, in case this might be relevant, here's the stylesheet for style-class sliderWrapper:

.sliderWrapper {
   margin:15px auto;
   width:300px;
}

Does anyone know how to iron out those quirks and make the VerticalSlider usable in IE6/7 inside a Dialog?

(Using dojo 1.2.3)