Centered navigation menu giving side scroll-bar...

[grandpa_shea]

I am trying to get my header's menu links looking closer to how I wish them to but am having trouble with centering...

At the moment I am using the list item tag and a left float for each link to line them horizontally. They are then put into some div tags with left 50% and -50% and such to center. How it is now I get a horizontal scroll-bar which grows as the menu links are added (cart and checkout). I have fiddled a bit but am only just getting my head around CSS and don't really know what exactly is going on.

The other thing I'm trying to do is have the "cart" and "checkout" links highlight in the same way the "shop" link does when you are on the appropriate page. I am not too fussed if I can't though.

This is the CSS for the menu I am using:

#menu {
	background-color: #191919;
	height: 45px;
	width: 850px;
	border: 0px;
	margin: 0 auto;
}

#center {
	float:left;
	position:relative;
	left:50%;
	text-align:left;
}

#menu ul {
	margin: 0 auto;
	padding: 0;
	bottom: 0;
	left: 0;
	position:relative;
	left:-50%;
	list-style: none;
}

#menu ul li {
	float:left;position:relative;/* ie needs position:relative here*/
}

#menu .page_item a {
	padding: 0px 15px 0px 15px;
	line-height: 42px;
	color: #868686;
	text-decoration: none;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	text-align:center;
	white-space:nowrap;
	float:left
}

#menu .current_page_item a, #menu .page_item a:hover {
	color: #fff;

	}

And this is the code from the Header PHP:

<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

<div id="headerWrapper">
<!--bof-navigation display-->

<div id="page">

<div id="menu">
	<div id="center">

    <ul>
		<li class="page_item"><a href="http://www.grandpastudios.com/v3html/home.html">home</a></li>
		<li class="page_item"><a href="http://www.grandpastudios.com/v3html/gallery.html">gallery</a></li>
        <li class="page_item"><a href="http://www.grandpastudios.com/blog">blog</a></li>
   	 	<li class="page_item <?php if (($_GET[main_page]=='index') && ($_GET[cPath]=='')) { ?>current_page_item<?php } ?>"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?>shop</a></li>
		<li class="page_item"><a href="http://www.grandpastudios.com/v3html/contact.html">contact</a></li>
        <li class="page_item"><a href="http://www.grandpastudios.com/v3html/links.html">links</a></li>

<?php if ($_SESSION['customer_id']) { ?>
    	<li class="page_item"><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    	<li class="page_item"><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li class="page_item"><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li class="page_item"><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li class="page_item"><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
</div>
</div>
<div class="navMainSearch forward"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

Here is the live test site.

If anyone has any ideas I would really appreciate them.

Thanks.

[kobra]

Looking at this in FireFox I do not see any scrool bars???
What browser and resolution do you see this at and maybe a link directly to the page where you see it would assist

[grandpa_shea]

Sorry, I should have specified that the problem is only apparent when using a small browser window. It 's happening on every shop page and my blog with both Firefox and Safari. Here are some screenshots to illustrate my problem more clearly.

[kobra]

Sorry, I should have specified that the problem is only apparent when using a small browser window.

Small browser window??? or resolution at 640X480...
Your mainWrapper is set to 850px....static so it is by default going to have scroll bars to allow seeing the remainder that can not be represented...

You could try setting the width to a % or ??em instead of 850px???

#mainWrapper {
text-align: left;
vertical-align: top;
width:850px; /* sets the width of the store */
background-color:#c4df9b; /* gives the store a green background */

[grandpa_shea]

I am well aware of how I have my wrapper set to a fixed width. The problem I am having is some of the divs in the navigation are protruding PAST the 850 wrapper, which is easily seen in the first screenshot of my last post. I wish to have it so the browser window can be sized close the the edges of the wrapper (the green colour's edges) without having the screen stealing scroll-bar.

This problem becomes even worse once an item is added to the cart due to the two added links in the menu (cart and checkout).



See that huge scroll bar to blank space?

[grandpa_shea]

All fixed! I should have just recoded it from scratch instead of modifying someone else's existing code... I was fighting against improper use of tags. Silly me. Thanks.