Hey guys. Using Atahualpa 3.4.6 and WP 3.0.5

I got some great help here yesterday from runnerboy, and now I have another problem. I'm pretty new to CSS, and I'm sure that's easy to see.

I've put some code at ATO>HTML&CSS Inserts to create a CSS Sprite Rollover Menu. The main page image is a background image added via the "Custom Post Background" plugin. So I'm basically superimposing this Sprite Menu over the background image.

The background image is being pushed way to the left of the footer in FIREFOX, as you can see hereif you scroll the page horizontally. In IE8, space is being created vertically between the background image and the footer.

Here is the DIV part of the Menu:

<div id="centeredmenu" style="margin-top: 370px; margin-left: 180px;">      
   <ul>
      <li id="button1"><a href="#" style="font-family: Nyala; font-weight: normal; font-size: 1.2em; ">HOME</a></li>
      <li id="button2"><a href="#" style="font-family: Nyala; font-weight: normal; font-size: 1.2em; " class="active">FIRM OVERVIEW</a></li>
      <li id="button3"><a href="#" style="font-family: Nyala; font-weight: normal; font-size: 1.2em; ">ATTORNEY PROFILES</a></li>
      <li id="button4"><a href="#" style="font-family: Nyala; font-weight: normal; font-size: 1.2em;">CLIENT SERVICES</a></li>
      <li id="button5"><a href="#" style="font-family: Nyala; font-weight: normal; font-size: 1.2em;">TESTIMONIALS</a></li>
      <li id="button6"><a href="#" style="font-family: Nyala; font-weight: normal; font-size: 1.2em;">CONTACT US</a></li>
      <li id="button7"><a href="#" style="font-family: Nyala; font-weight: normal; font-size: 1.2em;">VIDEOS</a></li>
   </ul>
</div>

And here is the CSS:

#centeredmenu {
   float:left;
   background:transparent;
   overflow:hidden;
   position:relative;
}





#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding: 0;
   position:relative;
   left:50%;
   text-align:center;
   background:transparent;
}



#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}




#centeredmenu ul li#button1 a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:transparent;
   color:#fff;
   text-decoration:none;
   line-height:1.3em;
}



#centeredmenu ul li#button2 a {
   display:block;
   margin:0 0 0 24px;
   padding:3px 10px;
   background:transparent;
   color:#fff;
   text-decoration:none;
   line-height:1.3em;
}



#centeredmenu ul li#button3 a {
   display:block;
   margin:0 0 0 35px;
   padding:3px 10px;
   background:transparent;
   color:#fff;
   text-decoration:none;
   line-height:1.3em;
}



#centeredmenu ul li#button4 a {
   display:block;
   margin:0 0 0 50px;
   padding:3px 10px;
   background:transparent;
   color:#fff;
   text-decoration:none;
   line-height:1.3em;
}



#centeredmenu ul li#button5 a {
   display:block;
   margin:0 0 0 33px;
   padding:3px 10px;
   background:transparent;
   color:#fff;
   text-decoration:none;
   line-height:1.3em;
}



#centeredmenu ul li#button6 a {
   display:block;
   margin:0 0 0 30px;
   padding:3px 10px;
   background:transparent;
   color:#fff;
   text-decoration:none;
   line-height:1.3em;
}



#centeredmenu ul li#button7 a {
   display:block;
   margin:0 0 0 30px;
   padding:3px 10px;
   background:transparent;
   color:#fff;
   text-decoration:none;
   line-height:1.3em;
}








#centeredmenu ul li#button1 a:hover {
   background:url(http://sayitwithgreen.com/wp-content/uploads/2011/02/homerollover2.jpg);
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:transparent;
   font-weight:bold;
}






#centeredmenu ul li#button2 a:hover {
   background:transparent;
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}





#centeredmenu ul li#button3 a:hover {
   background:transparent;
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:transparent;
   font-weight:bold;
}





#centeredmenu ul li#button4 a:hover {
   background:transparent;
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:transparent;
   font-weight:bold;
}




#centeredmenu ul li#button5 a:hover {
   background:transparent;
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:transparent;
   font-weight:bold;
}



#centeredmenu ul li#button6 a:hover {
   background:transparent;
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:transparent;
   font-weight:bold;
}



#centeredmenu ul li#button7 a:hover {
   background:transparent;
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:transparent;
   font-weight:bold;
}

Thanks so much for any help!

1) Why are you putting 'body' styles in your posts"
2) review your sidebar code

Juggledad, I included the code in my original post because there are some positioning attributes there that I thought might be causing the problem, such as margins, but as I said, I'm pretty new to all this.

As far as the sidebars, I'm not quite sure what you mean. I actually have the sidebars turned off altogether at this point, with both set to 0px. And the fact that IE8 is showing space below the background image instead of to the side, made me think it's not a sidebar issue.

Could you clarify or be a bit more specific? Thank you!

forget the sidebar, my mistake.

Forget your code for the menu.

Why do you have POSTS with <style...> in them? expically a style with a 'body' selector?

Well, what is most appropriate to use there to move this menu around on the page and place it precisely where I want it? I thought "style" attributes were ok to use in a div container or general html. Should I be using CSS to position it? And if so, can you tell where in the code I should put it or maybe scribble down a small sample of code that could be used for placing the menu?

Juggledad, thanks as always for your expertise! It seemed you were leading me to the answer without giving me the answer; maybe you were trying to get me to figure it out on my own. I finally got it looking like I want it for the moment.

Here's what I did:

I realized that trying to position the menu with 'style' stuff in the html was making things really tough. That is clearly not the way to go. So, I took that junk out, changed the "position:relative" in the CSS block that styles the overall menu to "position:absolute" and then added margin-top and margin-left attributes to the CSS blocks that control the individual button links, and that seemed to do it, not to mention gave me complete flexibility with moving the menu one button at a time until I got them exactly where I wanted them.

I don't know if that makes any sense, and I'm not even certain it's THE best way to go about it, but so far, it seems to have to done the trick!

Thanks for your suggestions, Juggledad.