CSS - Menu Displaced Center Column

Hello! I am in need of some help with my css. I know, I am a total newbie but need some help with getting the css working properly. It seems that some parts work for IE and other parts work for Firefox. It seems like my left bar shows differently in IE and Firefox. Furthermore I have checked with IE on Mac and the main body doesn't show correctly either. It is displayed too short, doesn't fill the box. If anyone please could take a look at the code and see if they can help me I would appreciate it.

Please anyone help me. You can see the page at:
http://www.galakse.no/test/index.php/tscm/news
The css is located he
http://www.galakse.no/test/design/tscm/stylesheets/tscm.css

Any and all help is very much appreciated!

Thank you!

Hey all,

I have been working on a site in CSS which looks pretty much how we want it to look in FF, however IE is giving me all sorts of problems.

If you look at the following page http://www.mobileshop.com/3phones.com/viewphone.php in firefox you can see that the middle (white) column rests nicely between the two side columns, however, if you change to IE and look at the very same page then the middle column drops below the left side column.

This is my first time at a css design and i cant work out why it is doing it, also the main logo is supposed to be centered, in IE it is left aligned.

If you are viewing the source, you will see a tag soup of tables in the middle of the nice CSS, this is due to the fact that we pick up a feed and it dumps the data into our page. This will change to be pure CSS but i am running out of time to get the site launched first.

One final question, i downloaded the Tidy HTML validator for firefox. I managed to get my pages passed the W3c online checker, but tidy claimed there was still errors. I went through and fixed all them to get a happy green tick but then when going back to W3C validation some things failed. I was under the impression that Tidy was developed by W3C, so why do they give varying results regarding validation?

Thank you for your time.

I am working on this website and it shows correctly in FF mac and win, Safari mac and win, opera, netscape...etc, but in IE 7 and IE 6 ...the main content column is displaced below.


#left is floating left and #text is floating right
widths are correct. I even extended the width of the containers that wrap those two divs. Nothing.

Since it's a site with Joomla framework, I waded through the code trying to look for a table within the #text div that could've been causing this. I set all tables to 80%width for IE.

Already figured it out.
So thank you.

Hi all,

I'm trying to achieve the following:

<div id="left">This column is of blue background, and stretches all the way to the left.</div>

<div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div>

<div id="right">This column is of red background, and stretches all the way to the right.</div>

Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this?

I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code:
Code:

	#left {
		background-color: blue;
		float: left;
		margin: auto;
		position: absolute;
	}
	#center {
 		background: #DFDFEB url(../images/body/top.jpg) no-repeat;
		width: 760px;
		margin: 0 auto;		
	}
	#right {
		background-color: red;
	}

Thanks in advance!

Hi, i have a styling problem. The page looks well in normal view in IE and firefox but when you zoom in the page (Ctrl++) the menu bar part of the page gets displaced from its position (right and left corner). your help and guidance wil be much appreciated. The page is at dev.cddimensions. com . Plz try to zoom in and notice the menu bar.

hello. I am currently using a simple horizontal top menu with a vertical drop down. I would like to change the vertical drop down to be horizontal, multi column, and should accomodate more than one line, if possible. The example I'm going for is used as top navigation he
nfl - baltimore ravens home page
and he
ge home page

Here is the code I'm using currently (would like it to be all CSS).
####

ul#mainNavigation
{
padding-left:185px;
}
ul#mainNavigation li
{
padding:0 16px;
float: left;
display:inline;
position: relative;
list-style: none;
color:White;
_width:1px;
}
ul#mainNavigation li.Seperator
{
padding:0px;
_width:1px;
}
ul#mainNavigation li.over
{
background-color:white;
}
ul#mainNavigation li.over a
{
color:Red;
}
ul#mainNavigation li a
{
color:White;
text-transform:uppercase;
text-decoration:none;
font-weight:bold;
display:block;
}
ul#mainNavigation a:hover {
color: Red;
}
ul#mainNavigation li a
{
display: block;
}
ul#mainNavigation li p
{
height:19px;
}
ul#mainNavigation li ul
{
display: none;
position: absolute;
background-color:Black;
opacity:.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
margin-left:-16px;
}
ul#mainNavigation li.over ul
{
display: block;
z-index:999;
}

ul#mainNavigation li.over ul li
{
float: none;
background:none;
border:none;
white-space:nowrap;
padding:0px;
}
ul#mainNavigation li.over ul li a
{
color: white;
padding:5px;
border-bottom:solid 1px black;
}

ul#mainNavigation li.over ul li a:hover
{
background: #3d1f6e;
color: white;
}
~~~~~~~ HTML ~~~~~~~~~~~~~~

<ul id="mainNavigation">

<li>
<p><a href="Mainlink1.html">Mainlink1</a></p>
<ul>
<li><a href="link2.html">LINK 2</a></li>
<li><a href="link3.html">LINK 3</a></li>
<li><a href="link4.html">LINK 4</a></li>
<li><a href="link5.html">LINK 5</a></li>
<li><a href="link6.html">LINK 6</a></li>
<li><a href="link7.html">LINK 7</a></li>
</ul>
</li>

<li>
<p><a href="Mainlink2.html">Mainlink2</a></p>
<ul>
<li><a href="link2.html">LINK 2</a></li>
<li><a href="link3.html">LINK 3</a></li>
<li><a href="link4.html">LINK 4</a></li>
<li><a href="link5.html">LINK 5</a></li>
<li><a href="link6.html">LINK 6</a></li>
<li><a href="link7.html">LINK 7</a></li>
</ul>
</li>
</ul>

####
Thank you, in advance!
~ lahddah

Hi,

For some reason I can't get the main menu to center, nor will the background color (light blue) extend all the way to the right. You can see what I mean he

http://www.granddistraction.com

Any help would be appreciated.

Thanks.

The menu left aligns - from float left but even if I put the UL in a div and auto the borders it won't center.
Any ideas?

Code:

<div id="banner" align="center"><a href="mysite.com"><img src="images/top_banner.jpg" border="0"></a></div>
<ul id="menu">
	<li><a href="1.html" title=">1</a></li>
	<li><a href="2.html" title=">2</a></li>
	<li><a href="3.html" title=">3</a></li>
	<li><a href="4.html" title=">4</a></li>
	<li><a href="5.html" title=">5</a></li>
    	<li><a href="6.html" title=">6</a></li>
</ul>

I then have the following CSS:

Code:

#banner {
	background: url("images/header_split.jpg") bottom right repeat;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
 
#menu {
	background: #5a5152;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
 
#menu li {
	float: left;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
 
#menu a {
	background: #5a5152 url("images/seperator.gif") bottom right no-repeat;
	color: #ccc;
	display: block;
	float: left;
	margin: 0;
	padding: 8px 12px;
	text-decoration: none;
}
 
#menu a:hover {
	background: #2580a2 url("images/hover.gif") bottom center no-repeat;
	color: #fff;
	padding-bottom: 8px;
}

The menu left aligns - from float left but even if I put the UL in a div and auto the borders it won't center.

Any ideas?

This is my page

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>123</title>
<link href="oto.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
* {
margin : 0;
padding : 0;
}
html, body, #wrap {
height : 100%;
margin : 0 auto;
width : 980px;
background-color : #666666;
}
body > #wrap {
height : auto;
min-height : 100%;
width : 980px;
background-color : #333333;
}
a img {
border : none;
}
#main {
height : 200px;
background-color : #999999;
}
#nav {
height : 35px;
}
#sad {
padding-bottom : 200px;
background-color : #999999;
height : 500px;
}
#footer {
position : relative;
margin-top : -200px;
height : 200px;
clear : both;
background-color : #000000;
}
.clearfix:after {
content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden;
}
.clearfix {
display : inline-block;
}
* html .clearfix {
height : 1%;
}
.clearfix {
display : block;
}
.menu {
border : none;
border : 0;
margin : 0;
padding : 0;
font : 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
margin-left: auto;
margin-right: auto;
}
.menu ul {
background : #333333;
height : 35px;
list-style : none;
padding : 0;
}
.menu li {
float : left;
padding : 0;
}
.menu li a {
background : #333333 url("images/seperator.gif") no-repeat bottom right;
color : #cccccc;
display : block;
font-weight : normal;
line-height : 35px;
margin : 0;
padding : 0 25px;
text-align : center;
text-decoration : none;
}
.menu li a:hover, .menu ul li:hover a {
background : #2580a2 url("images/hover.gif") no-repeat bottom center;
color : #ffffff;
text-decoration : none;
}
.menu li ul {
background : #333333;
display : none;
height : auto;
padding : 0;
margin : 0;
border : 0;
position : absolute;
width : 250px;
z-index : 200;
}
.menu li:hover ul {
display : block;
}
.menu li li {
background : url('images/sub_sep.gif') no-repeat bottom left;
display : block;
float : none;
margin : 0;
padding : 0;
width : 250px;
}
.menu li:hover li a {
background : none;
}
.menu li ul a {
display : block;
height : 35px;
font-size : 12px;
font-style : normal;
margin : 0;
padding : 0 10px 0 15px;
text-align : left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background : #2580a2 url('images/hover_sub.gif') no-repeat center left;
border : 0;
color : #ffffff;
text-decoration : none;
}
.menu p {
clear : left;
}
-->
</style></head>

<body>
<div id="wrap">
<div id="main" class="clearfix">header</div>
<div id="nav">

<div class="menu">
                <ul>
	            <li><a href="#" ><img src="images/bth.png" alt="Oto Nautika"></a></li>
	            <li><a href="#">Aaaaaa</a>
			    <ul>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
			    </ul>
		        </li>
		        <li><a href="/faq.php">Bbbbbbb</a>
                <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                </ul>
                </li>
            	<li><a href="/faq.php">Cccccccccc</a>
                <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                </ul>
                </li>
            	<li><a href="/faq.php">Ddddddd</a>
                <ul>
                <li><a href="#">1</a></li>
                </ul>
                </li>
            	<li><a href="/faq.php">Eeeeeee</a>
                <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                </ul>
                </li>
            	<li><a href="/faq.php">Ffffff</a>
                <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                </ul>
                </li>
		        </ul>
</div>

</div>
<div id="sad">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>

I can't center the menu horizontally, I've tried a lot of methods.

The last one I tried was Matt James Taylor's on his blog, but to no avail.

I can't get it to work, so if anyone has ideas how to make the menu always in the center of the page....thanks

I'm embedding menumatic into a joomla 1.6 based website.
Menumatic is just a slick css suckerfish menu with some mootools effects. http://greengeckodesign.com/menumatic

Anyway, I've edited the CSS to look ALMOST right. The only problem is that I cannot get the menu as a whole to center correctly on the page.

Anybody have any ideas about how i can do this?
(In addition to the 100's of things I've tried, I've tried putting it in another set of div's and centering that div, but it didn't work )

below is all the code. I left the JS out, since it also runs (a bit less prettily) on pure css. Also, I have verified the CSS at w3. There are four lines that are not standard, but they are to do with the rounded corner borders, not the spacing or alignment.

Edit: A bit more playing around and I have think it is a conflict with floating the items left. They need to display:block in order to display correctly so they also need to float (left) since they would otherwise be on separate lines (I think).

Anybody have an idea about how to get around this?

I tried to justify the text (that would be fine for my purposes), but it didn't work either.


CSS:

Code:

#mainMenu{
background-color: #036;
padding: 0px;
font-size: medium;
text-align: center;
}

/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish 
 * Dropdowns by Patrick Griffiths and Dan Webb. 
 * http://carroll.org.uk/sandbox/suckerfish/bones2.html
 */

/* ----[ LINKS ]----*/

/* all menu links */
.menuMain a, #subMenusContainer a{
	text-decoration:none;
	display:block;
	padding:10px 20px;
	background-color:#036 ;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}

/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
.menuMain a{
	margin:0;
	float:left;
        color:#fff;
        
}

/* Just sub menu links */
#subMenusContainer a, .menuMain li li a{
	
}

/* All menu links on hover or focus */
.menuMain a:hover, .menuMain a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, .menuMain a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
	background-color:#06c ;
	color:#FFF;
}

/* sub menu links on hover or focus */
#subMenusContainer a:hover, 
#subMenusContainer a:focus, 
.menuMain a.mainMenuParentBtnFocused, 
#subMenusContainer a.subMenuParentBtnFocused,
.menuMain li a:hover,
.menuMain li a:focus{
	background-color:#06c ;
	color:#FFF;
}

/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{ 
	background: url(../ottest/templates/ot_template/images/arrow_right.gif) right center no-repeat;  
}

/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{ 
	background: url(../ottest/templates/ot_template/images/arrow_right_over.gif) right center no-repeat;  
}

/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{	
	 background: url(../ottest/templates/ot_template/images/arrow_down.gif) right center no-repeat; 
}

/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{	
	background: url(../ottest/templates/ot_template/images/arrow_down_over.gif) right center no-repeat; 
}

/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{ 
	display:none; 
	position: absolute; 
	overflow:hidden; 
	/*the 2px left & right padding lets you have a 1px border 
	  on the ul or ol inside since overflow is set to hidden*/
	padding:0 2px;
	margin:0 0 0 -2px;
}


/* All ULs and OLs */
.menuMain, .menuMain ul, .menuMain ol, #subMenusContainer ul, #subMenusContainer ol { 
	padding: 0;
	margin:0 20px 0 0;
	list-style: none;
	line-height: 1em;
}

/* All submenu OLs and ULs */
.menuMain ol, .menuMain ul, #subMenusContainer ul, #subMenusContainer ol {	
	/*border around submenu goes here*/	 
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	background:#036;	
	left:0;
}


/* List items in main menu --[for non-javascript users this applies to submenus as well]  */
.menuMain li { 

	/*great place to use a background image as a divider*/
	display:block;
	list-style:none;
margin:0 5px;
	position:relative;
	float:left;

}

#subMenusContainer li{
	list-style: none;
}

/* main menu ul or ol elment */
.menuMain{
	display:block;
	list-style:none;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:40px;
	margin-right:auto;
	z-index:5;
	text-align: center;
	display:block;
}

#subMenusContainer{	display:block; 	position:absolute;	top:0;	left:0;	width:100%;	height:0;	overflow:visible;	z-index:1000000000; }


/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
.menuMain li li{	float:none; }

.menuMain li li a{ /* Just submenu links*/	
	position:relative;
	float:none;
}

.menuMain li ul { /* second-level lists */
	position: absolute;
	width: 10em;
	margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	margin-top:2.2em;
}

/* third-and-above-level lists */
.menuMain li ul ul { margin: -1em 0 0 -1000em; }
.menuMain li:hover ul ul {	margin-left: -1000em; }

 /* lists nested under hovered list items */
.menuMain li:hover ul{	margin-left: 0; }
.menuMain li li:hover ul {	margin-left: 10em; margin-top:-2.5em;}

/* extra positioning rules for limited noscript keyboard accessibility */
.menuMain li a:focus + ul {  margin-left: 0; margin-top:2.2em; }
.menuMain li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
.menuMain li li a:focus {left:0;  margin-left:1000em; width:10em;  margin-top:0;}
.menuMain li li li a:focus {left:0; margin-left: 2010em; width: 10em;  margin-top:-1em;}
.menuMain li:hover a:focus{ margin-left: 0; }
.menuMain li li:hover a:focus + ul { margin-left: 10em; }

The menu html (an excerpt)
Code:

<html>
<head>
<link rel="stylesheet" href="MenuMatic.css" type="text/css" />
</head>
<body>
<div id="mainMenu" style="width:950px;">
					
<ul class="menuMain"> 

	<li id="item-101" class="current active"><a href="/ottest/" >Home</a></li>
	<li id="item-102" class="deeper parent"><a href="/ottest/currentissuemenu" >Current Issue</a>
		<ul>
			<li id="item-133"><a href="/ottest/currentissuemenu/test-item-menu" >Test item menu</a></li>
		</ul>
	</li>
	<li id="item-103"><a href="/ottest/otblogmenu" >OT Blog</a></li>
	<li id="item-104"><a href="/ottest/previousissuesmenu" >Previous Issues</a></li>
	<li id="item-105"><a href="/ottest/classifiedsmenu" >Classifieds</a></li>
	<li id="item-124"><a href="/ottest/contact-us" >Contact Us</a></li>
</ul> 
	
</div>
</body>
</html>

I am trying to create a website for my business and I cannot seem to center the navigation at the top of the screen and have the areas to the left and right of the screen be filled with the same bg color as the UL. I know usually you would set the margins to 0 auto to center that element on the page but for some reason its not working and the UL is just sticking to the left part of the screen. If anybody knows how to get this centered or how to fix my html/css i would sincerely appreciate it. Here is my code (html then css):

<body>
<div class="wrap">
<div class="menu">
<ul>
<li><a href="products.html" target="_self" >Products</a>
<ul>
<li><a href="seaisland.html" target="_self">Sea Island Collection</a></li>
<li><a href="grandoak.html" target="_self">Grand Oak Collection</a></li>
<li><a href="airflow.html" target="_self">Air-Flow </a></li>
<li><a href="pure.html" target="_self">Pure Visor</a></li>
<li><a href="coldweather.html" target="_self">Cold Weather</a></li>
<li><a href="fahrenheit.html" target="_self">Fahrenheit Collection</a></li>
<li><a href="caddietowels.html" target="_self">Caddie Towels</a></li>
<li><a href="woventowels.html" target="_self">Woven Towels</a></li>
<li><a href="sunprotection.html" target="_self">Sun Protection</a></li>
<li><a href="" target=""></a></li>
</ul>
</li>
<li><a href="embelishments.html" target="_self" >Embellishments</a>
<ul>
<li><a href="embroidery.html" target="_self">Embroidery</a></li>
<li><a href="wovenlabels.html" target="_self">Woven Labels</a></li>
<li><a href="medallions.html" target="_self">Medallions</a></li>
<li><a href="laserappliques.html" target="_self">Laser Appliques</a></li>
<li><a href="ballmarkers.html" target="_self">Ball Markers</a></li>
<li><a href="ultrasuede.html" target="_self">Ultra Suede</a></li>
</ul>
</li>
<li><a href="specials.html" target="_self" >Specials</a> </li>
<li><a href="whatsnew.html" target="_self" >Whats New</a> </li>
<li><a href="order.html" target="_self" >Order</a> </li>
<li><a href="contact.html" target="_self" >Contact</a> </li>
</ul>
</div>


body{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
background-color:#b7b7b7;
padding: 0px;
overflow:auto;
border: #0F0 solid 5px;
margin: auto;
}

.wrap{
margin:0 auto;
background-color:b7b7b7;
border:0px;
padding:0px;

}

.menu{
border:0px;
padding:0px;
font: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
background-color:#F0F;
}
.menu ul{
background:#b7b7b7;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;

}
.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;

}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

I want to center a horizontal menu (not the words - the entire menu). Everything I read says I need to insert align-text: center into the #menu ul portion of my CSS. However, I've tried that and it doesn't work for me. I'm using Dreamweaver for my editing and I'm rather new to CSS.

The CSS code I have for the menu is:
Code:

#menuwrapper {width: 1280px;
              height: 25px;
              background: #FFC557 url(images/menu_background.jpg) repeat-x;
              color: #000;}

#menu, #menu ul {display: inline;
                 margin: 0;
                 padding: 0;
                 list-style: none;}

#menu li {display: block;
          float: left !important;
          padding: 0;
          margin: 0;
          line-height: 25px;
          position: relative;
		  left: 19px;}

#menu a {height: 25px;
         width: 85px;
         background: #FFC557 url(images/button.jpg) no-repeat;
         color: #000;
         display: block;
         font-size: 105%;
         font-weight: bold; 
         text-align: center;
         text-decoration: none;
         border-left: 1px solid #000;}

#lastbutton {border-right: 1px solid #000;}

#menu a:hover {background-position: 0 -25px;}

Now how the heck do I center the menu as opposed to having it aligned to the left???

I have a horizontal nav menu I've created using <ul> and <li> inside a <div>

The problem is I can't get it to vertically center. I tried using padding and/or margin and it didn't work for all browsers.

Here is the html:
Code:

<div class="top_nav">
<ul>
<li><a href='/'>HOME</a></li>
<li><a href='menu'>MENU</a></li>
<li><a href='catering'>CATERING</a></li><li>DETAILS</li>
<li><a href='photos'>PHOTOS</a></li>
</ul>
</div>

and the CSS:
Code:

.top_nav {
	margin: 0 auto 15px auto;
    height: 25px;
    padding: 10px;
	clear: both;
}

.top_nav ul {
	list-style: none;
    text-align: center;
}

.top_nav li {
    padding: 0 25px;
    font-family: "Palatino Linotype", "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    display: inline;
    letter-spacing: 2px;
}

.top_nav li a {
    color: #FFF;
    text-decoration: none;
}
.top_nav li a:hover {
 	text-decoration: underline;
    border-bottom: 3px solid #660000;
}

It stays vertically positioned at the top

I'm simply trying to center a horizontal menu with a drop down.

The two methods I know of to align the list items in the top menu are 1) Code:

li { float: left; }

and 2) Code:

li { display: inline; }

.

The first method is needed for absolute positioning of the drop down list, but it left aligns the top menu.

The second method centers the menu (desired affect) but throws off the drop down placement because the it lacks the containing block.

Works, but left aligned: http://www.highgatecross.com/develo...ered_menu1.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Centered</title>
	
	<style type="text/css" title="style" media="all">
		#navigation {
			position: relative;
			margin: 0 auto;
			width: 800px;
			height: 30px;
			background: #9E9670 }	
			
		a {  
			font: 11px verdana, sans-serif;
			color: #54503B;
			text-decoration: none }
		
		#menu { 
			position: relative;
			margin: 0 auto;
			padding: 0; 
			width: 600px; 
			border: 1px solid #c00;
			text-align:center }
		
		#menu li { 
			float: left;
			list-style: none }
		
		#menu li a {
			display: block;
			padding: 7px 25px }
		
		#menu li a:hover {
			color: #F4E9AD }
		
		#menu li ul {  
			position: absolute;
			left: -1000em;
			z-index: 10 }
		
		#menu ul {
			float: left;
			width: 100px;
			list-style: none;
			padding: 0 }
		
		#menu ul li a {
			display: block;
			padding: 7px 10px;
			background-color: #C7BE8D;
			width: 100px }
		
		#menu ul li a:hover {
			background: #F4E9AD; 
			color: #54503B }

		#menu li:hover ul {
			left: auto }
	</style>
	
</head>
<body>
	<div id="navigation">
		
		<ul id="menu">
			<li class="top"><a href="Home">Home</a></li>
			<li class="top"><a href="About">About</a></li>
			<li class="top"><a href="Training">Training</a>
				<ul>
					<li><a href="Overview">Overview</a></li>
					<li><a href="Training_Schedule">Schedule</a></li>
					<li><a href="Training_Contact">Contact</a></li>
				</ul>
			</li>
			<li class="top"><a href="Events">Events</a></li>
			<li class="top"><a href="Contact">Contact</a></li>
		</ul>

	</div>	
</body>
</html>

Centers, but drop down is in the wrong place: http://www.highgatecross.com/develo...ered_menu2.html
Code:

#menu li { 
    display: inline; /* float: left */
    list-style: none }
		
#menu li a {
    display: block; /* delete this line */
    padding: 7px 25px }

Note: I normally have my closing } flush left, but trying to keep it clean for the forum. And yes, this is not IE compatible.

Question: How to I center the top menu and have the drop down placed correctly?

Thanks.

Hi!

I want to make a two-column menu with lists, is that possible, or do I need to make two UL's?

Code:

item 1 | item 2
item 3 | item 4
item 5 | item 6

<ul>
<li/>item 1
<li/>item 3
<li/>item 5
</ul>
<ul>
<li/>item 2
<li/>item 4
<li/>item 6
</ul>

Is there a better way?

/Chrille