[SOLVED] Centering a horizontal list in Firefox

masonbarge · #1 Nov 17th, 2007, 15:36

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 · #2 Nov 17th, 2007, 18:11

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 · #3 Nov 18th, 2007, 12:03

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 · #4 Nov 18th, 2007, 12:35

Quote:

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 · #5 Nov 18th, 2007, 13:36

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 · #6 Nov 18th, 2007, 14:16

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 · #7 Nov 19th, 2007, 12:43

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.)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
horizontal list navigation breaks when load times are slow	sch3dana	Web Page Design	14	Mar 19th, 2008 12:56
centering content div in firefox	Roland	Web Page Design	7	Jun 28th, 2007 20:48
Horizontal list	Krakatoa	Web Page Design	4	May 16th, 2006 13:16
Horizontal drop down list	Ranko	Web Page Design	8	Oct 23rd, 2004 10:25
Tip : Vertical and Horizontal Centering - Solved!	gwx03	Web Page Design	0	Dec 15th, 2003 06:11

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Centering a horizontal list in Firefox