Height of a div is not getting adjusted automatically in IE7

I have a table rendered inside a div. Following styles are applied to the outer div.

 width:auto;
 background-color:white;
 overflow:auto;
 height: auto;
 scrollbar-face-color:#E0EEEE; 
 scrollbar-arrow-color:#33ccff; 
 scrollbar-track-color:#EEFFFF; 
 scrollbar-shadow-color:#EEFFFF; 
 scrollbar-highlight-color:#EEFFFF; 
 scrollbar-3dlight-color:#EEFFFF; 
 scrollbar-da开发者_Python百科rkshadow-Color:#EEFFFF;

In IE8 the outer div appears perfectly fine with a horizontal scrollbar but in IE7 both scrollbars are shown and the outer div is not adjusting the height automatically. I want this to look the same as in IE8. Can somebody suggest something?

Following is a link to the screenshots in both versions of IE:

http://img692.imageshack.us/img692/6374/81306247.png

---

Since you only what the overflow happen in one direction set overflow-x: auto instead of overflow: auto.

---

Different browsers have different ideas on default margins and padding, etc. Try adding a reset stylesheet before your stylesheet to normalise the browsers and see if that solves the issue for you. You may need to make subtle adjustments to your existing stylesheet to incorporate this but they should be minor and will reflect equally in all browsers.

http://meyerweb.com/eric/tools/css/reset/