Anyone with SharePoint CSS Experience???

[tudorH]

Hi Guys

I'm having an issue with styling the MySites in SharePoint and am wondering whether there is anyone here who has any experience with this...

Basically I am trying to move the top ribbon (Site Settings...) above the top navigation bar (My Site, My Newsfeed..), this is the code I am using but I can't seem to make it work, I'm not sure if the right way to do it is with relative positioning?? When I do that the Site Settings menu gets cut off (there should be a bunch more options after the two) as in the screenshot I attached.

http://i828.photobucket.com/albums/zz208/TooT3R/css_issue_ribbon.png

EDIT: I did try messing with the z-index for the top ribbon but it did not work

This is the CSS:

body {
    background-image: url(bg.png); 
    background-color: black;
    background-repeat:repeat-x; 
    background-attachment:fixed;
    background-position: left top;
}

/* ribbon color */
body #s4-ribbonrow 
{
    background-color:black;
    width: 1041px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
    top: -44px;
}


/* ribbon background */
.ms-globalnav {
    background-color: black !important;
    border-bottom: 1px solid #333333;
    height: 43px !important;
    width: 1041px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
    top: 130px;
}

/* font colors */
.s4-sn li.static > a:hover, .s4-sn li.static > a, .ms-contactcardtext1, .ms-newsfeedheader,  .ms-WPBody a, .ms-contactcardtext2, .ms-contactcardtext2 a {
    color: #f06b00 !important;
}

/* hide hover underline in top bar */
.s4-mysitetn a:hover {
    text-decoration: none !important;
}

/* remove the overflow scroll */
.customBodyHolder .customPageWidth {

}

/* change padding and height */
.customBodyHolder {
    min-height:200px;
    padding-bottom: 50px;
    width: 1041px;
}

/* light blue area at top of profile */
.s4-sn, .ms-profilepageheader {
    background-color:#efefef;
}

/* make the site actions colors match the branding */
.ms-siteactionsmenuinner  {
    background:url("/_layouts/images/bgximg.png") repeat-x scroll 0 -467px #313031;
    border-color:#313031;
}

/* main body area */
.s4-ca {
    float: none !important;
    margin: auto !important;
    width: 1041px !important;
}

body #s4-leftpanel {
    display:none;
}

body #s4-bodyContainer {
    margin: auto !important;
    width: 1041px !important;
}

Hopefully someone can help me out, I've been struggling with this and have no idea how to fix it. Thank You!