Search code examples
htmlcsscentercenteringorbit

Cross browser centering an image and a slider

now that my orbit slider works almost perfect, i discovered a new problem. I'm using a macbook pro 13 inch with chrome as main browser. Everything looks ok in chrome. However i did a browser test (on the well known website) and there it showed me that on several browsers my slider or page isn't centering like it should do.

Now my question, can someone help me solve this? so my page and slider are both centered. I'm using a webpage that consists of a single image because it's just a little test. but in order to complete the test it should be centered.

link to the site

CSS to position the body and content(content contains the image)

body
{
background-image: url("../afbeeldingen/bg.jpeg");
margin-left: auto;
margin-right: auto;
text-align:center; /*For IE6 Shenanigans*/
}

#content 
{
width: 100%;
}

and for the slider

#featured
{
position: absolute;
top: 152px;
left: 218px;
}

thanks in advance

Solution

  • First of all, remove the width and height from the body.
    Your orbit slider uses an absolute position which means it will find the parent relative position, which is your body. So let's change your content div into:

    #content { 
position: relative;
margin: 0 auto;
width: 1030px;
}

    You can also delete this whole line:

    #featured
{
position: absolute;
top: 152px;
left: 218px;
}

    See how that goes for now.