Hi all. Using Atahualpa 3.4.6 and WP 3.0.5 (Stable), I think it is.

I'm trying to place a CSS Sprite Rollover Menu over a background image...kind of practicing for the real project. I have 7 bottuns & links in the menu, but as you can see here, the last few are hitting a wall to the right and getting pushed down, but I can't figure out what's causing the wall. I've tried fiddling around with pretty much every line in the code but no fix yet.

Can one of you guys peak at this code and see if you can spot the fix? Thanks!

First, here's the unordered list in a DIV, which I placed at ATO>HTML&CSS Inserts>Body Top:

<div id="centeredmenu" style="margin: 370px; margin-left: 180px;">      
   <ul>
      <li id="button1"><a href="#">Home</a></li>
      <li id="button2"><a href="#" class="active">Firm Overview</a></li>
      <li id="button3"><a href="#">Attorney Profiles</a></li>
      <li id="button4"><a href="#">Client Services</a></li>
      <li id="button5"><a href="#">Testimonials</a></li>
      <li id="button6"><a href="#">Contact Us</a></li>
      <li id="button7"><a href="#">Videos</a></li>
   </ul>
</div>

and then here's the CSS, which I placed at ATO>HTML&CSS Inserts>CSS

#centeredmenu {
   float:left;
  
   background:transparent;
   
   overflow:hidden;
   
}
#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding: 0;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#centeredmenu ul li 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 35px;
   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 50px;
   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 50px;
   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 50px;
   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 50px;
   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/1-Hover-On.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:url(http://sayitwithgreen.com/wp-content/uploads/2011/02/2-Hover-On.jpg);
   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:url(http://sayitwithgreen.com/wp-content/uploads/2011/02/1-Hover-On.jpg);
   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:url(http://sayitwithgreen.com/wp-content/uploads/2011/02/1-Hover-On.jpg);
   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:url(http://sayitwithgreen.com/wp-content/uploads/2011/02/1-Hover-On.jpg);
   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:url(http://sayitwithgreen.com/wp-content/uploads/2011/02/1-Hover-On.jpg);
   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:url(http://sayitwithgreen.com/wp-content/uploads/2011/02/1-Hover-On.jpg);
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:transparent;
   font-weight:bold;
}

I'm not sure I totally understand the question, but here goes...

It looks like you've got a huge margin (370px) being established on the top, bottom and right. When playing around with the margin settings (specifically the right margin), I *think* I'm getting the results you're looking for.

Ok, I'm feeling a little dumb. Thank you so much, runner! I was paying more attention to the positioning in the CSS when the answer was pretty simple, thanks to you. That 2nd set of eyes comes up with many-a-cure, huh? I just threw in an adjusted margin-right, and walaa!!

Thanks very much again!

Mods, can I get a [solved]?

eric41,

Glad to help. You're so right that sometimes we can stare at the code for hours and sometimes days and not see it.

You can "solve" the thread yourself by using the Thread Tools dropdown (I think that's where that option lives).

Best of luck!

~runnerb0y