I have an odd layout issue in IE7. Basically what happens is that, instead

Question

0

Asked: June 8, 20262026-06-08T06:37:02+00:00 2026-06-08T06:37:02+00:00

I have an odd layout issue in IE7. Basically what happens is that, instead

0

I have an odd layout issue in IE7. Basically what happens is that, instead of the content being aligned to the top left, where it should be, it aligned to somewhere in the middle.

It seems as if everything is displaying correctly but the main-bank-container is the one element out of place. I don’t really want to absolute position this as it means I would have to maintain the height of the containing div’s with jQuery instead of it being implicit.

I have setup a jsFiddle here to help.

Here is the code:

HTML

<div style="padding: 4px;" class="nopad" id="maincontent">
    <div id="summary-page-container">
        <div id="main-bank-container">
            <div id="bank1" class="bank-container">
                <div class="basicview">
                </div>
            </div>
            <div id="bank2" class="bank-container">
                <div class="basicview">
                </div>
            </div>
            <div id="bank3" class="bank-container">
                <div class="basicview">
                </div>
            </div>
            <div id="bank4" class="bank-container">
                <div class="basicview">
                </div>
            </div>
        </div>
        <div style="clear: both;">
        </div>
    </div>
</div>

CSS

#maincontent {
    overflow: hidden;
    text-align: center;
}
#summary-page-container {
    overflow: hidden;
    position: relative;
    width: 1400px;
}
#main-bank-container {
    width: 690px;
}
.bank-container, .bank-container-small {
    border: 1px solid #CFCFCF;
    border-radius: 5px 5px 5px 5px;
    color: #555555;
    height: 90px;
    margin: 10px;
    position: relative;
    text-align: left;
    text-shadow: 0 1px 1px #FFFFFF;
    width: 670px;
}
.basicview {
    background:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#ebebeb));
    background:-moz-linear-gradient(top,#ffffff,#ebebeb);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#ebebeb')"; /* IE8 */
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#ebebeb'); /* IE6 & IE7 */

    border-radius: 5px 5px 5px 5px;
    height: 90px;
    width: 100%;
}

Oh and if it matters here is mydoctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">