Re: IE7 problem

[screencat]

First of all I would try to put the #banner inside the #content div. Then you will also need to change its "top"-property to auto (or remove it) and change its "margin"-property to something like "0 auto 25px" for a better bottom-spacing.

Other solution (you can leave the div where it is) which I was actually able to test myself with the developer toolbar (I hope you have this) and which works in IE7 (no other browser tested):

Code:

#banner {
width: 956px // full width (960px) minus (2x) 2px border
}

#banner img {
left: 30px; // this will center the images again
}

But I would go for the first solution if I were you.

I think the problem has something to do with the width of the #wrapper-div which gets messed up by IE and to be 100% sure I would need to FULLY inspect your markup and css. Speaking of your markup/css, I think you use many unneeded properties and also at least some unneeded html markup. Doing so always makes things more complicated.

How I found out: Setting "display: none" to suspicious elements in the developer toolbar in IE7. Doing that with the #banner-div removes the problem kinda and you can go on from there. It’s always a good idea to (temporarily) remove chunks of html/css to test/find bugs which break the "frame" of a site so you can target the div/elements.