Need help with a Joomla template rendering improperly in >=IE7

The URL of my site is http://www.maniacdigital.com/

I am having a problem with the header part of the site, it looks fantastic in all browsers except for Internet Explorer 7 and below where the search bar seems to push the logo down and makes the header twice the height. The site is fully XHTML compliant, and I have included screenshots of how it should display and how it is displaying.

Thanks,
any help would be appreciated

 

randomizer,
you might want to check your styles.ie7.css , on #header .module you've defined the width: 500px there

#header .module {
	width: 500px;
 }

Code (markup):

try to adjust that, or maybe scrap it out.. since its a block and you've floated it right. and after that check this margin you set at light4.css

#header .module {
float:right;
margin-left:325px;
}

Code (markup):

that margin-left could breed problem IMO. Btw, i don't think this layout for header need specific IE hacks.. ( separating css specific for IE could be frustrating when you handle lots of classes, only do that when really necessary )

Good luck.

 

I removed the width:500px, I don't know what that was for but it didn't seem to fix it. I will keep trying, thanks for the help. Also what are you using to view the css? I am using firebug for firefox to fix glitches but as far as I know you can't use that with IE.

 

Ok, I fixed it. I removed the width:500px and added this this to the ie file:

#sub-header{height:122px;margin:0;padding:0;}
#logo {top: 0; position: absolute;}

HTML:

 

Glad u've fixed it.
I'm using Internet Explorer Developer Toolbar to debug problems on IE.