[Whitechapel]

I'm working on a website for a friend's band. In the footer, I have four image links to Facebook, Twitter, Youtube, and MySpace. It displays perfectly in Chrome & Firefox, but IE shows it brokenly. I've tried commenting out code but it still chooses to display oddly. I've also monkeyed with the different widths and tried to make it more strict, but I've had no luck. The website to view is http://www.weepthebe...oiler/index.php

#footer {
	float:left;
	width:auto;
	background:#000;
	color:#000;
	height:auto;
	padding:5px;
	border-bottom-right-radius:50px;
	-moz-border-radius-bottomright:50px;
	border-bottom-left-radius:50px;
	-moz-border-radius-bottomleft:50px;

}

#footerfacebook {
	width:166px;  
    height:38px;   
    display: inline-block;  
    vertical-align: middle; 
	padding-right:20px;
}

#footertwitter {
	width: 164x;  
    height:38px;  
    display: inline-block;  
    vertical-align: middle;
	padding-right:20px;
}
#footeryoutube {
	width:133px;  
    height:38px;  
    display: inline-block;  
    vertical-align: middle; 
	padding-right:20px;
}

#footermyspace {
	width:169px;  
    height:38px;  
    display: inline-block;  
    vertical-align: middle; 
}

#footerwrapper {
	margin-left: auto;
	margin-right: auto;
	width:auto;
	overflow:hidden;
	text-align:center;
}

[gfeeley]

I.E. needs a hack because it doesn't understand inline-block so you need to add these two styles where you are using it.

zoom:1;
*display: inline;

NOTE: This will fix it for IE7, but IE8,IE9 should not need it and forget about IE6.

This post has been edited by gfeeley: 08 October 2012 - 05:16 PM

[Whitechapel]

Awesome, this works perfectly. Thanks so much for the help!