Div height not working in IE

Saturday

Div height is different in IE:


            In one of my client project (In ruby) I need a slider control for change the light's intensity The intensity range from 0 to 100.But don't allow the user to give intensity bellow 50.This means prevent the user to move the slider bellow 50.

           So I create two div elements,the first div contains the value 0...50 and its height is 4px(slider height) with green static background which means the user can't move the slider up to 50(a small trick!).The second div contains the original slider control and its value from 50...100.See the blow code(As per client requirement)


<table cellpadding="0" cellspacing="0" border="0" >
     <tr>
        <td style="vertical-align: bottom; padding-bottom: 1px;">
              <div style="font-size: 10px;">0</div>
               <div id="divDummySlider" class="dummySlider">&nbsp;</div>
          </td>
           <td>
                <div id="divSlider"></div>
            </td>
       </tr>
   </table>

With the following css

          .dummySlider
           {
                background-color: green;
                height: 4px;
                width: 50px;
           }


The above code work fine with all major browsers except IE. In IE the "divDummySlider" height is different from other browsers.See the image below...  


Before resolve div height in IE

After that I found the following solution to fix div height problem in IE .Look at the  dummy slider height is mingled with original slider control height (See the image below...)   

Div height after resolved  in IE 

                        
Solution:             
          .dummySlider
           {
                background-color: green;
                height: 4px;
                width: 50px;
                overflow:hidden; 
           }


                Just add "overflow:hidden;" property to the "divDummySlider" style.And finally I get relief from this problem.(Hope you also)