Div alignment issue in IE7

Hey everyone,
So I'm having an alignment issue with a div element (#sidebar) in IE7. Not worried about ie6. The div aligns correctly in safari, ie8 and FF. Obviously wouldn't be to worried unless client was yanking me over the coals over this issue... So you see my dilemma. =0

Here's the site: http://dcpowersupport.com/

The sidebar on the left, in ie7 seems to want to be raised a little higher. I've tried tweaking the css for #sidebar but have had no luck. So here I am.

Any ideas or documentation that might help are appreciated.

Thank you.

Remove overflow:hidden; from #main

Remove overflow:hidden; from #main

Thanks for the input, I did remove that attribute, but there still seems to be some issue with the alignment.

I tried making position relative and modifying z-indexes, but still didn't want to work for me...

Okay. So I think I'm just going to use a snippet of css to target only ie7 browsers as I can't seem to make this work any other way. Let you know how it turns out.

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Assignining a height of 176px to #flashBanner seems to sort IE7 without causing any issues with FF.

Assignining a height of 176px to #flashBanner seems to sort IE7 without causing any issues with FF.

I haven't tried that yet. However, what I did do was this:
#main {
background:url("images/sidebar_extended_bg.png") repeat-y scroll left center transparent;
margin-top:0px;
*margin-top:4px; /* This attribute is passed to ie7 and lower */
}


This seemed to do the trick and it seems to work well in ie7, 8, ff and safari.

Thanks for the help!