positioning problem with IE7

[bitt3n]

The page displays fine in FF/Chrome, but in IE7, the center block gets displayed too low.

The CSS for this block is

#registration_box {
width:700px;
height:330px;
border: 1px solid #7989b0;
border-bottom: 1px solid #003468;
background: white;
margin-left:150px;
padding:30px 23px 22px 40px;
}

A link to the full CSS file is <snip>.

Any advice on what I am doing wrong would be greatly appreciated.

[edited by: swa66 at 11:15 pm (utc) on June 11, 2009]
[edit reason] No personal URLs please see forum charter and ToS [/edit]

[SuzyUK]

Hi bitt3n,

one block of CSS code, out of context is not enogh for us to point you in the right direction. as it stands there is nothing wrong with that code.

What we/you would need to do is simplify the whole structure, remove the content, and just give us the HTML and CSS for the structural elements (main divs)

having seen an image representation of the problem what it's depicting is a classic IE "Float drop" and without the rest of the code it is not possible to see how best to help you fix this.

I could presume the left column is floating and the margin on the above registration is causing the 3px float jog but I never like to presume so if you can try stripping the code back to basics and repost I'm sure you'll get a clearer response

thanks
Suzy

[bitt3n]

thanks, I learned elsewhere that IE requires an extra 2 pixels width to the containing block in order to make it fit. (ie, the containing block must be x + 2 to contain a block of width x, unlike in FF/Chrome). this fixed the issue