A misaligned background on 1024*768 on IE7

Hello guys!
Please, I need your help… I just realized that this page is very bad on IE7 on a 1024x768 screen resolution (I didn’t notice before because I have a 1680x1050 resolution monitor and all seemed aligned)


The background image is misaligned, and there’s an horizontal scroller
I am sure that the fault is on “image-wrapper” or “car-used” divs, but I don’t know how to fix it…
Please, can you help? You can use conditional comments if you like, because all is fine in the other browsers and I’d prefer to not touch che main .css

I believe the problem is going to be with that AP’d div nested in your #sidebar.

IE6/7 will need a coordinate like right:0; to go with it.


#image-wrapper { position:absolute; z-index:-1; }

If you put a BG color on it you will see that it is 100% width and creating the horizontal scrollbar.

I would be tempted to pull it out of that floated sidebar position it from the main wrapping div.

Hi Rayzur,
Thanks for the answer! I’m trying to put the AP div just after the <div id=“wrapper”>, but it gets always misaligned :frowning:
I also tried to give the #image-wrapper a big width, so that it can nest the following div containing the background image, but the problem remains…
Please, can you help me?

Let me look through it again and see if I can find a solution for you.

Okay, there seemed to be a lot going on there that IE7 was not happy with. I have made several changes and I will try to highlight them the best I can recall. Nevertheless I seem to have a version that IE7 complies with.

I moved the body BG image to the wrapper and increased it’s width to accommodate the Image. IE7 kept wanting to center it with the AP #image-wrapper width included.

Here is a Live Example of what I came up with.

/*==== screen.css ====*/

html, body, a, p, h1, h2, h3, h4, h5, h6, ul, ol, li, form { margin:0; padding:0; border:0; outline:0; }
html, body { height:100%; }

[COLOR=Blue]html {overflow-x:hidden;}/*moved from body*/[/COLOR]

body { 
    font-family:Arial, Helvetica, sans-serif;
    [COLOR=Blue]background:#000; /*moved BG image to #wrapper*/[/COLOR]


body.c1 { background-image:none; }
p { line-height:1.5em; }
a { text-decoration:none; color:#F90; }
a:hover { color:#FFF; }
h1, h2, h3, h4, h5, h6 { font-weight:normal;}
h2 { color:#F90; margin:10px 0; line-height:1.5em; }

#wrapper {
    [COLOR=Blue]width:1024px;[/COLOR]/*BG image width (was 990px; this width is now on #main) */
    [COLOR=Blue]margin:0 auto; [/COLOR]
[COLOR=Blue]    background:url(http://www.stylcarsrl.com/siquis/css/images/bg.png) #000 no-repeat top center; [/COLOR]

#header { height:118px; }

#nav { 
    padding:0 24px; 
    font:14px Arial, Helvetica, sans-serif; 
#main {
 [COLOR=Blue]   width:950px;/*990px with padding*/
    padding:8px 20px 0; 
    [COLOR=Red]/*overflow:hidden; don't hide the AP car image*/[/COLOR]
[B]#main:after[/B] {[COLOR=Blue]/*float containment without overflow:hidden on #main*/[/COLOR]

/*#content { color:#000; }*/

#footer { text-align:center; font-size:12px; color:#BBB; padding:0; }
#header h1 { display:none; }
#nav ul { list-style:none; position:relative; height:48px; padding-left:8px; margin:0; overflow:hidden; }
#nav li { float:left; height:48px; }
#nav li.back { position:absolute; background:url(images/nav-selected.png) no-repeat right; z-index:8; }
#nav li.back .left { background:url(images/nav-selected.png) no-repeat left; }
#nav li a { position:relative; overflow:hidden; text-decoration:none; color:#444; height:34px; top:16px; z-index:10; display:block; margin:0 10px; }

/* default */
#centered { width:800px; margin:0 auto; }

/* home */
#cars { overflow:hidden; }
#cars p, #sidebar p { margin:8px 0 0 24px; font-size:16px; color:#F90; }
#cars a, #sidebar a { text-decoration:none; }
#cars a span, #sidebar a span { font-size:16px; }

/* auto nuove ed usate */
[B]#content[/B] { 
    color:#000; [/COLOR]
[COLOR=Red]/*#content.page { background:#EEE; }*/
/*#content.tab { background:#EEE; }*/[/COLOR]

[B].page[/B] { background:lime;/*#EEE;*/ }
[B].tab [/B]{ background:#EEE; }

#page { 
    margin:0 auto; 
    padding:10px 0;
   [COLOR=Red] /*position:relative; */[/COLOR]

#sidebar { 
[B]#image-wrapper[/B] {
[COLOR=Blue]    width:475px;/*[B]#car-new/used[/B] image width*/
    height:208px; /*[B]#car-new/used[/B] image height*/
    [B]#car-new[/B] { background:url(../images/sinistra.png) no-repeat; width:475px; height:208px; float:left; }
    [B]#car-used[/B] { background:url(http://www.stylcarsrl.com/siquis/immagini/home/destra.png) no-repeat; width:475px; height:208px; float:right; }

[B]#sidebar p[/B] { 
[COLOR=Blue]    position:relative;
    margin:0 0 0 24px;

[COLOR=Red]/*.image { position:relative; background-position:-40px 0!important; } removed this*/[/COLOR]

Ray, you saved my day!!! Thanks, thanks, thanks!
I only tweaked a very little your code to get the whole page a little more centered (the jquery effect on menu showed me that I had to move a little on the left), but everything wors PERFECTLY now!

Still many thanks, really! The solution was far away my CSS knowledge…

Your Welcome! :slight_smile:

Yes, it is working fine in IE7 now. As I had mentioned above IE7 was adding the width of the AP’d car div to the body element and then it was centering the BG image on the body which created all the chaos in IE7.

If you put a test outline on the #main it will show that AP’d div hanging out. But it causes no problem now since we have a width on the wrapper.

#wrapper[/B] {
    [COLOR=Blue]width:1024px;[/COLOR][COLOR=DarkGreen]/*BG image width (was 990px; this width is now on #main) */[/COLOR]
    margin:0 auto; 
    [COLOR=Blue]background[/COLOR]:url(http://www.stylcarsrl.com/siquis/css/images/bg.png) #000 no-repeat top center; 
#main[/B] {
    width:950px;/*990px with padding*/
    padding:8px 20px 0; 
    /*overflow:hidden; don't hide the AP car image*/
    [COLOR=Blue][B]outline[/B]:1px dashed red;[COLOR=DarkGreen]/*testing only*/[/COLOR]