CSS centering my slideshow in the header - css

Question

I have been trying to center the slider that I have inside the header. The header and the whole container is neatly centered, with just margin: 0 auto; Then I tried to include a slideshow inside the header, and tried by many ways to place it correctly. Yes, I succeeded for my own configuration by using position:aboslute and then playing with coordinates, but that will not work for the rest of the world.
The site (under construction) is www.hrcprojectconsulting.com
Since you ll be able to see all the CSS stuff, do you know how in heaven that can be positioned? I tried all margin combinations but I am kind out of options that I could think of.
A good news is that Internet Explorer 10 is also available now for Windows 7 so, CSS3 stuff and html5 placeholders work so I ll never code for backwards things anymore.
Note: if you happen to see everything ok, this is because you have the same kind of monitor and resolution than I do.
thank you
The code for the slider:
<style type="text/css" media="screen">
#slider {
width: 960px; /* important to be same as image width */
height: 150px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 960px; /* important to be same as image width or wider */
position: absolute;
top: 125px;
left:265px;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
The code for my homepage:
<style type = "text/css">
::selection{ background-color: #E13300; color: white; }
::-moz-selection {background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
body{
background:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 960px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
height: 300px; /*Height of top section*/
}

Answer 1

This is because the ul has a default padding. You will have to set the padding for your ul#sliderContent to 0:
#sliderContent {
padding:0;
margin:0;
}
Then you should remove the position: absolute from your stylesheet.
To place the sliderContent at the bottom you could do like this:
#topsection {
position: relative;
}
#slider {
position: absolute;
bottom: 0;
}
#sliderContent {
padding: 0;
margin: 0;
}