Describing this scenario is a bit tricky. The footer of the website I am working on appears fine on most browsers, except for IE7. You can see the issue in the screenshots below:
IE7 (shifted half-screen to the right)
The CSS code for the footer is as follows. Removing this CSS resolves the display problem:
#footer-holder
{
clear: both;
width: 100%;
position: fixed;
bottom: 0px;
*border: none;
z-index: 10000;
height: 30px;
/* For WebKit */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.1)), to(rgba(0,100,255,0.70)));
/* For Mozilla */
background: -moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(0,100,255,0.70));
/* For lt IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#01FFFFFF, EndColorStr=#A50064FF);
/* For gt IE8 */
background: -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#01FFFFFF, EndColorStr=#A50064FF)";
}
I have spent considerable time trying to make it compatible with IE7. Do you have any insights into what might be causing the issue?