[css-d] Slider misplaced in IE

[Erik Olivier Lancelot]

Hi all,

I am working on this page: http://www.fileflow.com/cart-debug.php

When I set a 12 px left-margin on the slider, it looks right in all  
browsers except IE, where the slider is misplaced 6 px to the right.  
If I set the left margin to 0, it looks right in IE, but in all other  
browsers the slider is misplaced 12 px to the left. Help would be  
greatly appreciated, I seem to be stuck.

XHTML:

<div id="products">
   <div class="product">
     <?php $id = $products[0]['product_id']; ?>
     <span class="boxheader"><?php echo $products[0]['product_name'] ? 
 ></span>
     <div class="box" id="product_<?php echo $id; ?>">
       <img src="images/products/fastsend_small.gif" alt="FastSend" / 
 ><br />
       <div class="price_holder">
         Price: <span class="price" id="price_<?php echo $id; ?>"><? 
php echo 0+($products[0]['price']+$products[7]['price']); ?></span>  
&euro;
       </div>
       <div class="quantity">
         Quantity:
         <span class="display_holder" id="display_holder_<?php echo  
$id; ?>" >
         <span class="value_display" id="qty_<?php echo $id; ?>" >1</ 
span>           </span><br />
       </div>
       <select class="level" id="level_<?php echo $id; ?>"  
onchange="changePrice(<?php echo $id; ?>)">
         <option value="0" >No support</option>
         <option value="2" selected="selected">With support</option>
       </select>
     </div>
     <div class="horizontal_track" id="horizontal_track_<?php echo  
$id; ?>" >
       <div class="horizontal_slit" id="horizontal_slit_<?php echo  
$id; ?>" >&nbsp;</div>
       <div class="horizontal_slider" id="slider_<?php echo $id; ?>"  
style="left: 0px;" onmousedown="slide(event, 'horizontal', 95, 1, 10,  
10, 0, 'qty_<?php echo $id; ?>');">&nbsp;</div>
     </div>
   </div>
</div>


CSS:

html, body {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        background: #CAD4D9 url(../images/background.jpg) repeat-x fixed top;
        width: 100%;
        height: 100%;
        text-align: center;
        font-family:"Times New Roman", Georgia, Times, serif;
        font-sixe: 12px;
}

#products {
        border: dashed gray 1px;
        height: 245px;
        width: 680px;
        margin: 0 auto;
        padding:5px;
}

.product {
        float: left;
        margin:5px;
        padding: 10px 4px 4px 4px;
        text-align: center;
}

.box {
        background-position: center;
        background-repeat: no-repeat;
        width: 145px;
        height: 148px;
}

.price_holder {
        text-align: center;
}

.price {
        border: 0;
        padding: 0;
}

.quantity {
        text-align: center;
}

.level {
        width: 121px;
}


/* Slider */

*.horizontal_track {
        background-color: #ededed;
        width: 115px;
        /*margin-left: 12px;*/
        line-height: 0px;
        font-size: 0px;
        text-align: left;
        padding: 2px;
        border: 1px solid;
        border-color: #ddd #999 #999 #ddd;
}

*.horizontal_slider {
        background-color: #a6a6a6;
        width: 16px;
        height: 8px;
        position: relative;
        z-index: 2;
        line-height: 0;
        margin: 0;
        border: 2px solid;
        border-color: #b3b3b3 #666 #666 #b3b3b3;        
}

*.horizontal_slit {
        background-color: #808080;
        width: 105px;
        height: 2px;
        margin: 4px 4px 2px 4px;
        line-height: 0;
        position: absolute;
        z-index: 1;
        border: 1px solid;
        border-color: #ccc #fff #fff #ccc;
}

*.display_holder {
        width: 15px;
        height: 15px;
        text-align: center;
        background-color: transparent;
        padding: 0;
        border: 0;
}

.value_display {
        width: 15px;
        margin-right: 0px;
        margin-left: 0px;
        text-align: center;
        font-weight: normal;
        border: 0;
        padding: 0;
}


/* Shopping cart */

#cart {
        border: dashed gray 1px;
        height: 230px;
        width: 680px;
        padding: 5px;
        margin: 0 auto;
        text-align: left;
        position: relative;
}

Thanks in advance,

Erik

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/