Center aero button menu

[fodo]

I am using the aero button menu and need to center it .
I have it within a footer div with margin 0 auto but this does not center it.
Any suggestion appreciated.
link http://217.46.159.226/e_cart22/index.php
css

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#footer {
width:800px; 
margin: 0 auto;
text-align:center;

}

.p footer  {
text-align: center;
font-weight: bold;
}

.aerobuttonmenu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: auto;
background: #F7F7F7; /*menu strip background*/
border: 1px solid gray;
padding: 4px 0;
border-width: 1px 0;
}

* html .aerobuttonmenu{ /*IE6 and below hack. Set explicit strip width*/
width: 100%;
}

.aerobuttonmenu a.aero{ /*aero button CSS*/
background: transparent url('../media/aeroleft.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Verdana, Trebuchet MS; /* Change 13px as desired */
line-height: 23px; /* This value + 8px should equal height of button background (default is 31px) */
height: 31px; /* Height of button background height */
padding-left: 10px; /* Width of left menu image */
text-decoration: none;
margin-right: 10px; /*spacing between buttons*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
opacity: 0.9;
-moz-opacity: 0.9;
}

.aerobuttonmenu a.aero:link, .aerobuttonmenu a.aero:visited, .aerobuttonmenu a:active{
color: white; /*button text color*/
}

.aerobuttonmenu a.aero span{
background: transparent url('../media/aeroright.gif') no-repeat top right;
display: block;
padding: 4px 10px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
}

.aerobuttonmenu a.aero:hover{ /* Hover state CSS */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
opacity: 1;
-moz-opacity: 0.99;
}

.aerobuttonmenu a.aero:hover span{ /* Hover state CSS (for text) */
color: yellow;
}

.black a.aero{
background-image: url('../media/aeroleftblack.gif');
}

.black a.aero span{
background-image: url('../media/aerorightblack.gif');
}

.aerobuttonmenu .rightsection{
float: right;
width: 100px;
position: relative;
top: 3px;
padding-right: 5px;
text-align: right;
}

.aerobuttonmenu .rightsection a{
color: navy;
}

Mark-up
function do_html_footer()
{
  // print an HTML footer
?>
		<!-- End of page-specific content. -->
	<div id="footer">
	
	<div class="aerobuttonmenu black">



<a href="about.php" class="aero"><span>About</span></a> 
<a href="faq.php" class="aero"><span>FAQ's'</span></a> 
<a href="terms.php" class="aero"><span>Terms</span></a> 
<a href="privacy.php" class="aero"><span>Privacy Notice</span></a> 
<a href="contact.php" class="aero"><span>Contact Us</span></a> 
<a href="index.php" class="aero"><span>Links</span></a>
</div>

	<p class="footer">&copy;
<?php
ini_set('date.timezone','Europe/London');
$startYear = 2006;
$thisYear = date('Y');
if ($startYear==$thisYear){
  echo $startYear;

}else{
  echo "{$startYear}-{$thisYear}";

}

?>
</p>
	<p><img border="0" src="images/New Hawkesley 134x60.jpg" width="134" height="60"onmouseover="Tip('We publish e-Book4U.<br />How to guides you can take anywhere', BALLOON, true, ABOVE, true,FADEIN, 600, FADEOUT, 600)"/></p>
</div><!-- End of Footer -->
</div><!-- End of WRAPPER DIV. -->

[riptide]

you need to add position:relative. and some thing like left: 80px.

[fodo]

Thanks. where do you suggest I add that?

[riptide]

.aerobuttonmen
add it to that class. you may need more or less distance from the left side of your page.

somewhere between 20 and 100.
there are other ways to center the text but your aerobutons are in a div footer. what is the name of your div footer

[fodo]

The div is named footer.

[fodo]

I have the buttons centered approximately by using magin-left on the a element.
However I cant keep the footer at the bottom of every page in FF.
Its Ok in IE 7.
I have added a clear float to the code.
I dont know where to start on this one so any ideas appreciated.

<div>
<div class="float-divider"></div>
</div>
</div><!-- End of Footer -->
</div><!-- End of WRAPPER DIV. -->

[riptide]

you could try textalign;center with the div footer.

but just moving your button container left seems like the beter idea.if your footer was at the bottom of the page before the float remove the float. and try text align

[fodo]

Hi thanks for comenting.
I already have text-align center in the footer div.
I am also getting another problem.
In ff on subsequent pages (click on a book) the footer doesnt stay at the bottom.
Any solution like float the footer right looses the wrapper background (white) that defines the page.
The page structure for the subsequent pages is:
Show the categories div id cats.
Float a div right to show the content - div right
call the footer function
Code as follows

<?php
  include ('book_sc_fns.php');
  // The shopping cart needs sessions, so start one
  session_start();

  $product_id = $_GET['product_id'];

  // get this book out of database
  $book = get_book_details($product_id);
  do_html_header();
  //display left hand block - categories, ads
	// get categories out of database
  $cat_array = get_categories();
 
  // display as links to cat pages
  display_categories($cat_array);
  
  
  ?>
  <div id="right">
  <h1 class="align-center"><?php echo $book['title'];?></h1>
  
  <?php
  
  display_book_details($book);
//display browse list via ajax

  // set url for "continue button"
  $target = 'index.php';
  if($book['cat_id'])
  {
    $target = 'show_cat.php?cat_id='.$book['cat_id'];
  }
  // if logged in as admin, show edit book links
  if( check_admin_user() )
  {
    display_button("edit_book_form.php?isbn=$product_id", 'edit-item', 'Edit Item');
    display_button('admin.php', 'admin-menu', 'Admin Menu');
    display_button($target, 'continue', 'Continue');
  }
  else
  {
    echo '<table width="600"><tr><td>';
	display_button("show_cart.php?new=$product_id", 'add-to-cart', 'Add '
                   .$book['title'].' To My Shopping Cart');
	echo '</td><td>'; 
    display_button($target, 'continue-shopping', 'Continue Shopping');
    echo '</td></tr></table>';
  }
  
  do_html_footer();
?>

[riptide]

PHP I don't know. your buttons look centered in ie7

try using <br/> to get your footer lower if you have to.
it also looks like.......

HU?
you need to use position. why aren't you using this with your layout this is the one thing behind all css.

#footer {
width:800px;
margin: 0 auto;
text-align:center;

}


try

#footer {
width:800px;
margin: 0 auto;
text-align:center;
position:absolute
top: 700px;
left:105px;
}

[fodo]

Thanks. It moves down but I loose the background and it doent sit on the bottom.
There is a ; missing on absolute, but no difference.
Is it the order of the divs do you think?