[SOLVED] Centering a horizontal list in Firefox

[masonbarge]

This is embarrassing but I'm having some kind of brain fart.

I can't get my simple ul navigation centered.

http://www.collierhills.net/index.php

Code: Select all

        <div id="topnav">
          <ul>
            <li><a href="./index.php">Home</a></li>
            <li><a href="./about.php">Neighborhood</a></li>
            <li><a href="./chforum/index.php?action=calendar">Calendar</a></li>
            <li><a href="./newsletter.php">Newsletter</a></li>
            <li><a href="">Gallery</a></li>
            <li><a href="./chforum/index.php">Forum</a></li>
          </ul>            
        </div>

Code: Select all

#topnav {
    width: 766px;
    height: 30px;
    border-top: 1px solid #000;
    border-bottom:  1px solid #000;
    background: #333 URL('./../images/bg1.gif') repeat;
    color: #fff;
    margin: 0;
    text-align: center;
}
#topnav a:link {
    font-size: 9pt;
    line-height: 9pt;
    color: #fff;
    text-decoration: none;
}
#topnav a:visited {
    font-size: 9pt;
    line-height: 9pt;
    color: #eee;
    text-decoration: none;
}
#topnav a:hover {
    font-size: 9pt;
    line-height: 9pt;
    color: #cc9;
    text-decoration: none;
}
#topnav a:active {
    font-size: 9pt;
    line-height: 9pt;
    color: #ffb;
    text-decoration: none;
}

#topnav ul {
    height: 30px;
    width: 766px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    text-align: center;
    list-style-type: none;
}
#topnav li {
    font-size: 9px;
    line-height: 11px;
    width: auto;
    list-style-type: none;
    float: left;
    display: inline;
    padding: 8px 12px;
    font-weight: bold;
}

herlp!

[MikeHopley]

Have you tried using "margin: 0 auto" instead of "text-align: center"?

Text-align will centre the inline children of a block-level element; margins will centre blocks themselves (provided you set a width).

[nashultz07]

If what Mike said is not working you could revert to manually centering the div.

Example:

Code: Select all

<div id="topnav" align="center">

I know that this way is not the proper way, but that is how I center them if nothing else works. If there is another way to do this I would like to know as well.

Hope this helps!

[MikeHopley]

Originally Posted by nashultz07

If what Mike said is not working you could revert to manually centering the div.

Example:

Code: Select all

<div id="topnav" align="center">

I know that this way is not the proper way, but that is how I center them if nothing else works. If there is another way to do this I would like to know as well.

Hope this helps!

This is just admitting defeat. There is no circumstance where this deprecated method is necessary. Centring failures are always due to designer error (IE5 excepted!).

It might take longer to get the modern method working, but that's because you're learning how to do it the right way.

[masonbarge]

Yes, I tried setting left-right margins to "auto" on every possible and even impossible class/id. I apologize for posting a version without them.

I think where I'm going wrong is from Mike's statement "as long as you have set a width." Will auto-margins not center an element where you have [width: auto;]?

[Lchad]

Hey Mason, I just did a really simple horizontal list that is centered. Here's the code. I think by looking at this you'll be able to see what you have missing.

Code: Select all

<div id="nav">
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="contact.html">Contact</a></li>
   </ul>
  </div><!--end nav div -->

css

Code: Select all

#nav {
 width: 360px;
 margin: 0 auto;
 text-align: left;
 margin-bottom: 20px;
 }
#nav ul li {
 list-style: none;
 display: inline;
 padding: 2px 12px 2px 12px;
 text-decoration: none;
 font: normal 14px/30px Arial, Helvetica, sans-serif;
 color: #B90000;
 } 
#nav li a:link, a:visited{
 list-style: none;
 padding: 2px 12px 2px 12px;
 text-decoration: none;
 font: normal 14px Arial, Helvetica, sans-serif;
 color: #B90000; 
 } 
 
#nav li a:hover{
 list-style: none;
 display: inline;
 padding: 2px 12px 2px 12px;
 text-decoration: none;
 font: normal 14px Arial, Helvetica, sans-serif;
 color: #FFCC00;
 border-top: 1px solid #B90000;
 border-right: 0px solid #B90000;
 border-bottom: 1px solid #B90000;
 border-left: 0px solid #B90000;
 }

I hope that helps...

[masonbarge]

Thanks for the help. It was some weird bug that I still don't understand -- I've done dozens of these w/o any problem. I finally just tore it up and redid it, and it was fine.

I was getting all kinds of nutty stuff: wrong rollover effects, strange gaps and margins.

(I still don't get the inheritance rules for pseudo-class effects, but I just play around until they work.)