div alignment in css on Chrome, FF and IE 7 on Windows XP

Question

Hello everyone,

i have problems with the alignment of divs.

My layout consists of one div view_central which contains three other divs namely view_central_top, view_central_left and view_central_right. Chrome and FF render the wanted result: a top div with a bannner, the navigaiton to the left and the content to the right.

IE 7 offsets the content div view_central_right 10 px to high thus covering part of the banner div view_central_top.

The css code looks like this:

.view_central
{
    position: relative;
    width: 827px;
    height: 100%;
}

.view_central_top
{
    position: absolute;
    top: 0xp;
    left: 0px;
    height: 118px;
    width: 828px;
}

.image_borderless
{
    border: 0px none;
}

.view_central_left
{
    position: relative;
    left: 0px;
    top: 118px;
    width: 187px;
    height: 683px;
    background: #C7D2EB;
    font-size: 11px;
}

.view_central_right
{
    position: relative;
    left: 0px;
    top: 118px;
    width: 640px;
    height: 683px;
    background: #FFFFFF;
}

Can anyone help me out. Thanks.

Answer 1

My first thought -- browser dependent padding or margins. A CSS reset (at least for div elements) might be worth trying.