[SOLVED] Backgrond image problem

[coldkill]

::BUMP::

Still really need help...

 

I've tried the above solution 3 times now on the div menu and still nothing.

 

::EDIT::

The solution above in IE7 actually pushed the content background to the right even more.

[mainewoods]

I think your problem is related to ie default padding and ff default padding settings.  ff uses the standards value of 0 for padding if padding is not specified whereas ie uses 2px for the default value if not specified(and in quirks mode).  Hence your 4 pixel difference.  This difference applies to virtually every element in the page including the body tag as well.  The way to fix this is to make sure both use the same defaults to start:

/* css wildcard selector below */
* { 
        padding: 0px; 
        margin:0px; 
}

 

There is another problem that you might be having as well, the ie box model problem.  If you set a div to a width, in ie it refers to content+padding+borders but in ff it refers to only the width of the content area. Have not got an easy solution for that one.

[coldkill]

In IE it's still being pushed to the right.

 

><

[mainewoods]

If you are setting the width of a div or table, then you could be running into the ie box model width problem I talked about. That problem involves the borders as well as paddings.

 

A partial solution is to set padding to zero and set borders to zero as well since that is where the box model width difference is.  You would then substitute the margin setting for your padding choice.  You would not be able to use any borders with that.

 

If you want to use a border, then you would have to use a cross browser hack to deliver a different width value for the div to ie. 

 

Another strategy that might work is to wrap the div in an outer div that actually sets the width value you want and uses a margin of 0 and padding of 0 and a border of 0.  That should effectively equalize the width value for ie and ff.  The inner div would use no width value making it expand to the size of the outer div and would set its border attribute for the border you want.

[coldkill]

Ok I've solved it. I took off the width definition in the #content id and set the width in the overall wrapper.

 

So the code now looks like this:

/*
*	Main Site Wrap centers the site
*/
#wrap 
{
position:relative;
width: 901px;
margin: 0px auto 0px auto;
display:block;
padding: 0px;

}

#content
{
background-image:url(images/backgrounds/conbg.png);
background-repeat:repeat-y;
font-size:11px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 70px;
margin-left: 130px;
margin-right: 0px;
vertical-align:top;
}

 

Cold