dual slider layout

[pesho318i]

hi guys,

I trying to use a dual slider implementation.
However, I didn't manage to get the CSS to display it the same way in Firefox and IE 7. Basically it consists of a background line and two movable "pins"(handles). On the top I'd like to display its name, and on the bottom - the feedback of the movement.
I tried to play around with the padding, border and margins of the components, but I couldn't get the same picture under IE and Firefox

The visual components of the slider should be arranged as follows:

SliderName
-||--------------||-
min= max=

My CSS behaves ok with IE 7. However, with Firefox, the SliderName goes below the slider controls !?!?!?!?!

Here is my HTML:

HTML: Select all

<div class="priceSlider">
       <strong>SliderName</strong> 
        <div>
             <div id="sliderContainerDiv"> 
                   <div id="leftHandleDiv"></div>
                    <div id="rightHandleDiv"></div>  
             </div>
        </div>
        <span class="minPrice">min=</span>
        <span id="output1"></span>                                                         
        <span class="maxPrice">max=</span>
        <span id="output2"></span>
</div>

Here is my CSS:

Code: Select all

.choice-column-box div.priceSlider strong{ 
    position: relative;
    float:left;
    width:95%;
    margin:15px 0 15px 15px;
    color:#4f4e4e;
    font:bold 1.4em/1.0em Arial, Helvetica, sans-serif;
}

#sliderContainerDiv
 {    
     position: relative;
     margin-left: 15px;
    width:200px; height:18px;
    background: url('../images/Slider_Bar.png') 0 0 no-repeat; 
 }
#leftHandleDiv
 {
     position: absolute;
    width:15px; 
    height:16px;
    background-image: url('../images/Slider_Pointer.png');
    border: 0;
 }
#rightHandleDiv
 {
     position: absolute;
    width:15px; 
    height:16px; 
    background-image: url('../images/Slider_Pointer.png');  
    color: #F00;
    border: 0;
 }
 
 #output1
 {
     padding-bottom: 50px;
     margin-left: 3px;
     float: left;
     font:bold 1.0em Arial, Helvetica, sans-serif;
 }
 
 #output2
 {
     padding-bottom: 50px;
     margin-right: 9px;
     float: left;
     font:bold 1.0em Arial, Helvetica, sans-serif;
 }

Thanks in advance,
Pesho

[Stuart]

Hmm... I suggest you use a span instead of strong for your SliderName. The css seems to not recognize "div.priceSlider strong"...

[karinne]

Could you post a link or an example of what you are trying to achieve!?! 'Cause I have no idea what you mean by sliders.