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
dual slider layout
Dec 5th, 2007, 21:35
Similar Threads
