overflow:hidden not working in IE8

hi. i really need help because i'm new to web building. i've been trying to figure out the overflow:hidden thing for 2 weeks now, but can't solve it. i've searched the web like crazy, but none of the suggestions seem to work for me. the site works perfectly with FF, Safari, Chrome, and Opera. you can see exactly what i'm talking about when you view my site bondedgroup.com/index-2.html. please let me know what i'm doing wrong. thank you so much.




here's my css:

/* CSS Document */

* {
font-size:100%;
overflow: inherit;
padding-left: 0;
}

body{
background:#FFFFFF url(images/top_tile.gif) top repeat-x;
text-align:center;
}

img {vertical-align:top;}
a img { border:0;}

ul { list-style:none;}

.left { float:left;}
.right {float:right;}
.clear { clear:both;}


html, input, textarea
{
font-family:Arial;
font-size:0.75em;
line-height:1.3em;
color:#6e7e84;
}

input, select { vertical-align:middle; font-weight:normal;}

a:link{color:#00aeef;}
a:visited {color:#CCCCCC}
a:hover{text-decoration:none;}
a:active{color:#CC3333}
p {
padding-top:4px;
}

/* ============================= main layout ====================== */

.more {background:url(images/more_bg.gif) no-repeat 0 5px; padding-left:12px; color:#B9C0C7; text-decoration:none;}
.more:hover {text-decoration:underline;}

li {
background:url(images/list_bg.gif) no-repeat 0 5px;
padding-left:20px;
padding-bottom:14px;
}
.last {padding-bottom:0;}

.list li{
background:url(images/list_bg.gif) no-repeat 0 7px;
padding:0 0 0 12px;
}
.list li a {line-height:1.667em;}

.imgindent {margin:0 16px 0 0; float:left;}
.title {margin-bottom:7px;}
.title2 {margin-bottom:20px;}
.title3 {margin-bottom:26px;}
.rss {margin-left:10px;}

.button {background:#d2004d url(images/button_right_bg.gif) top right no-repeat; display:block; float:right; text-decoration:none; margin-right:18px; font-size:1.083em;}
.button span {background:url(images/button_left_bg.gif) top left no-repeat; display:block; padding:10px 15px 9px 16px; text-transform:uppercase; color:#fff; font-weight:bold;}

.button:hover {background:#e982a8 url(images/button_right_bg_hover.gif) top right no-repeat;}
.button:hover span {background:url(images/button_left_bg_hover.gif) top left no-repeat;}

/* ============================= header ====================== */

#header .left {padding:28px 0 0 45px;}
#header .right {padding:39px 78px 0 0;}
.login {float:right; background:url(images/loging_bg.gif) no-repeat 0 0; color:#fff; text-decoration:none; padding-left:21px;}
.login:hover {text-decoration:underline;}
.menu {padding:41px 0 0 57px;}

.slogan1 {margin:107px 0 0 90px;}
.slogan2 {margin:107px 0 0 440px;}

/* ============================= middle ====================== */
.main_indent {padding:30px 58px 39px 56px;}
.main_indent2 {padding:30px 58px 59px 56px;}
.box {background:#f1f6f6; padding:19px 20px 25px 17px;}

.row1 {
padding:38px 0 0 0;
height: auto;
overflow: hidden;
}
.box2 {
border-bottom:2px solid #bec7d1;
border-top:2px solid #bec7d1;
background:url(images/box_bottom_line.gif) bottom right no-repeat;
height: 370px;
}
.box2 .corner_bottom_left {
background:url(images/box_bottom_line.gif) bottom left no-repeat;
height: 370px;
}
.box2 .corner_top_right {
background:url(images/box_top_line.gif) top right no-repeat;
height: 370px;
}
.box2 .corner_top_left {background:url(images/box_top_line.gif) top left no-repeat; width:100%;}
.box2 .indent {
padding-top: 5px;
padding-right: 17px;
padding-bottom: 22px;
padding-left: 15px;
}
.box2 .indent2 {padding:21px 17px 22px 24px;}
.box2 .indent3 {padding:20px 17px 12px 15px;}

.ul1 {margin:1px 0 5px 9px;}

.row2 {padding:28px 0 0 0;}
.row2 .indent1 {
padding-top: 7px;
padding-right: 25px;
padding-bottom: 15px;
padding-left: 4px;
}
.row2 .indent2 {padding:7px 0 0 34px;}

.img_block {padding-top:31px;}
.img_block2 {padding-top:14px;}
.img_block3 {padding-top:22px;}
.padding1 {padding-top:14px;}
.padding2 {padding-top:38px;}
.col_pad1 {margin-right:30px;}
.col_pad2 {margin-right:40px;}
.phone {float:right; margin-right:90px;}


.column_padding {padding-right:10px;}


/* ============================= forms ====================== */

form {color:#201f1e; padding-bottom:40px;}
form .rowi {height:30px;}
form .button {margin:5px 0 0 6px;}
form .col1 {font-size:1.083em; line-height:2em;}

.input {width:235px; height:23px; border:1px solid #7f7f7f; background:none; padding:0 0 0 5px; font-size:1em; margin:13px 0 9px 0; color:#201f1e;}
.input2 {width:235px; height:23px; border:1px solid #7f7f7f; background:none; padding:0 0 0 5px; font-size:1em; color:#201f1e;}
textarea {width:235px; height:82px; border:1px solid #7f7f7f; background:none; padding:0 0 0 5px; overflow:auto; font-size:1em; color:#201f1e;}

 

maybe try overflow-x

 

thank you for your input. i tried overflow-x and -y, but no luck. is there anything else someone can point out? thank you

 

try position:relative on your div with the overflow.

 

Remember that overflow: hidden works for the div in which it is implemented and not the div you want to hide. Or finally position relative