Div height not working in IE | Coding Cluster - using asp.net, c#, mvc 4, iphone, php, ios, javascript, in asp.net mvc 3 & more
 

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)  

3 comments:

Dinesh said...

Nice..

Anonymous said...

I know this post is pretty old. But believe me you are my lifesaver. I have been struggling to fix similar issue and tried out all possible solutions but no luck. Your solution worked like a charm. Thanks again for sharing this to the world. It definitely helped me. Keep up the good work.

Coding Cluster said...

Thanks buddy...

Post a Comment

Share your thoughts here...

 
 
 

RECENT POSTS

Boost

 
Blogger Widgets