Msg#: 4401697 posted 5:33 pm on Dec 27, 2011 (gmt 0)
Oh ok it's centered even without the margin auto when theres no images involved. The problem is that I have images making up the borders of the container.
The images are rounded corners with outer glows, and the background is a gradient. So the images include the background.
My border images:
1. Top of container, 1px wide repeated across x axis 2. Left and right of container, each include the top corner and go down until the gradient stops 3. A repeated 1px tall image for the left and right sides of the container 4. Bottom-right and bottom-left corner images 5. A repeated bottom image, 1px wide repeated across x axis
It would be much easier if I could just show you the link but isn't that against the rules on this forum?
Msg#: 4401697 posted 7:00 pm on Dec 27, 2011 (gmt 0)
Hi MisterMaster and welcome to WebmasterWorld :),
Yes, posting links is against the rules for the reasons explained in the posts pinned to the top of the forum, and the sticky mail I have just sent. Thank you for respecting the forum policy and helping to make WebmasterWorld a stronger community.
Ok, back to code. I think the first issue is to understand the behaviour of the div with the background images.
As penders has identified, on the provided code it should not be centred. If it is centred as you say, there is something else affecting it, and that may also be causing the unequal margins once the images are added.
So first examine what is affecting the div. For example, have you set text-align:center and/or a padding on the parent?
Second, which browsers and versions are pushing the div across? This is important because legacy versions behave differently to modern versions, and the cause and solution may need to be different. Finally, can you confirm you are using a full doctype.