I've seen some references to this behavior, but haven't seen much that addresses it directly, so thought I'd post my observations for consideration. Of course if anyone has a fix please let me know.

In internet explorer (ie7), when a background (color or image) is set in a parent container (div, table, etc.), then the slider ticks and labels are not visible. They seem to be occluded as I can see bits of the labels peeking out from behind the confines of the container in some cases.

Safari and Firefox don't exhibit this behavior; they look fine.

Below is code for a page illustrating.

<code>

    <script type="text/javascript"

            src="dojotoolkit/dojo/dojo.js"

            djConfig="parseOnLoad: true"></script>

    <script type="text/javascript">

            dojo.require("dijit.form.Slider");

            dojo.require("dojo.parser"); // scan page for widgets

            function on(){

                  document.getElementById("sliderHolder").style.backgroundColor="#FFD";

            }

            function off(){

                  document.getElementById("sliderHolder").style.backgroundColor="transparent";

            }

      </script>

      <DIV id="sliderHolder">

            <DIV dojoType="dijit.form.HorizontalSlider" name="magnitude"

              onChange="dojo.byId('mag').innerHTML=dojo.number.format(arguments[0],{places:1,pattern:'#'});"

              value="0"

              maximum="100"

              minimum="-100"

              pageIncrement="200"

              discreteValues="2001"

              showButtons="true"

              intermediateChanges="true"

              style="width:100%; height: 20px; background-image:none;"

              id='magnitude'>

              <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"

                style="height:1.2em;font-size:75%;color:gray;" numericMargin="1">

                  <li>-100</li>

                  <li>-75</li> 

                  <li>-50</li> 

                  <li>-25</li> 

                  <li>0</li> 

                  <li>25</li> 

                  <li>50</li> 

                  <li>75</li> 

                  <li>100</li> 

              </ol>

              <div dojoType="dijit.form.HorizontalRule" container="topDecoration"

                count=17 style="height:5px;"></div>

              <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration"

                count=5 style="height:5px;"></div>

              <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration"

                style="height:1em;font-size:75%;color:gray;">

                <li>lowest</li>

                <li>middle</li>

                <li>highest</li>

              </ol>

            </DIV>

            <DIV id="mag" style='width:50px;'>0</DIV>

      </DIV>

      <input type="radio" name="onoff" onclick="on()"/>Background On

      <input type="radio" name="onoff" onclick="off()" checked/>Background Off

</code>