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?

[riptide]

it's not sitting on the botom. keep adding more px to the top:700px
change it to 750 or 800 and see what number is best. I think you should change it to position:relative and see if you get the background back.

[fodo]

So i have palyed with relative and absolute and get different results in ff and Ie.
Also both dont work although relative seems to retain more of the wrapper.
What I dont understan is if the footer is within the wrapper why does the wrapper not extend to the bottom?

[riptide]

is the wraper problem happening in both browser with position relative.

you sould keep it relative by the way.

[fodo]

It only happens in ff3. I have not tested ie6.Its oK in ie 7.
currently I have bodged it with background and <br />. Most unsatisafactory.