   [web] Weird IE7 error with 960 grid
  I've been developing a simple site for a company using 960 grid system. I tested the site in Opera, Chrome, Safari, FireFox, IE6 & IE8 and it was fine in all of them.However, much to my surprise when I looked at the site in IE7 (after uploading bah!) I found that the banner was totally off centre! I'd made the stupid mistake of assuming that IE6 & IE8 meant that it must also be fine in IE7.Now my issue is that I have to try and fix the error but I have no idea of the cause! Another lesson learned is that although the 960 grid system is awesome when you get a css issue it's hard to establish whether it's your problem or 960's.The markup and CSS are below, I've also included a link to the site and an image of the offending item in IE7.HTML - Fully compliant and tested<div class="grid_12 header"> <div class="clear"><div class="grid_12 nav_bar">CSS also compliant and testedbody{background:url('../images/background.png') repeat-y center;font-family:Arial, Helvetica, sans-serif;font-size:14px;background-color:#CCCCCC;background-color:#E0C1FF;}.header{height:300px;background:url('../images/banner.gif') no-repeat;}.nav_bar{height:25px;background:url('../images/navbar.gif') repeat-x;}The offending layout in IE7Notice how the banner and the purple bar are shifted to the left slightly?Finally the site: CitystyleAny ideas?[edit]I've just looked at another site I did with a similar layout and it works fine, CSS almost identical! I'm baffled!   
  I'm looking into the IE7 problem... I need to re-download my IE compatibility image for IE7 first, though.As an aside I can offer some minor criticisms:The background on body is centered 50% horizontally which causes it to be off by one pixel if the browser window size doesn't divide evenly by 2. Try resizing your browser slowly to see what I mean. Very minor, but I've had this problem before and it's irritating. You can fix it lots of ways, easiest would be to put the background on a different element with a fixed width.The header/banner is 5 pixels too short length-wise and doesn't line up with the rest of the 940-pixel elements on the page. An accident?Once I get IE7 up and running I'll be able to help a bit more...Edit: Got IE7 up. I don't think this is an IE7 problem specifically... I believe the problem is the background alignment after all. The browser is trying to position the background at 50% and it's causing it to be misaligned sometimes. The fix is as I stated above: put the background in an element with a fixed width and center the element. Your container_12 element should work fine for this task.[Edited by - Maxamor on June 9, 2010 10:12:50 PM];  Hi Maxamor,Thanks for the advice, I'm going to try sorting it out now!As for the banner, yeh I've ust noticed its a bit short, at higher resolutions (on my development machine) I didn't notice.Thanks again, I'll post again with results!edit It worked! This made sense after I read it, because the other site with a similar CSS layout that I was comparing it to had no background image.Thanks again, I'll keep this in mind in my future sites.[Edited by - Jonny_S on June 10, 2010 5:08:11 PM]