Tried everything - Cant center

Hi,

Im trying to center something on my website. Im trying to move the black rectangle at the bottom of the page here to sit in the middle:

http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=13

------------------------------------------------------

Ive tried the techniques on this page:

http://www.w3.org/Style/Examples/007/center

------------------------------------------------------

Here is my CSS:

#thumbs-container {
position: relative; /* Opera */
width: 100%;
margin: -110px auto 0;
padding: 6px 40px;
background-color: #000;
z-index: 100;
margin-left: auto;
margin-right: auto;
}

------------------------------------------------------

Can someone explain where I am going wrong please?

The following should do it.#thumbs-container {/*main.php...itemId=13 (line 31)*/
margin:-110px auto 0 auto;
padding-left:0;
padding-right:0;
text-align:center;
width:680px;
}

At present, you have #thumbs-container{
width:680px;
margin-left:0px;
padding-left:0px;
padding-right:0px;
text-align:center;
}

Thank you for the reply. Thats actually done something quite odd on my site. The black box seems to have disappeared, but things are still sitting in the same place. Is there some code conflicting or something?

Hi,

Quick update. I found that the previous coder has also repeated some of the css in a different template file. I think ive fixed it according to your spec.

It is sitting in the center now but the background black no longer shows. Do you know why this might be happening?

See http://jigsaw.w3.org/css-validator/validator?uri=http://www.zombiemod.com/rm/nina2/themes/ajaxian/theme.css and check the error at line 380
/* Thumbnails

#thumbs-container {
position: relative; /* Opera */
width: 100%;
margin: -110px auto 0;
padding: 6px 40px;
background-color: #000;
z-index: 100;
margin-left: auto;
margin-right: auto;
}


#thumbs-container {
margin:0 auto;
padding-left:0;
padding-right:0;
background-color: #000;
text-align:center;
width:680px;
}
*/ The comments are not closed properly. Better to remove that inner comment.

Hi,

Sorry to come back again! Well spotted, I fixed the problem and checked the HTML errors again (they are pretty much problems with the moz corners and opacity), but I still cant see the background color.

Is it something to do with the z-index perhaps?

Now, there's no background property applied. Make it like
#thumbs-container {/*main.php...itemId=13 (line 40)*/
background-color:#000;
margin:-110px auto 0;
padding-left:0;
padding-right:0;
text-align:center;
width:680px;
}

PS: Get firebug for your Firefox (http://getfirebug.com), to make your life easier.

Thank you so much for your help!