[css] there must be a simple solution to this

programming web dev
1

hello,

i’ve made a bunch of block elements (for a lower navigational menu), and they are all aligned to the left at present. however, i’d like for all of the blocks to be centered on the page, and i need some help discovering how to do that. maybe my float: left is throwing it off?

plus, currently, FF shows the blocks in line and registered with the left and right edges of the body, while IE (for some reason) pushes everything about 50 pixels to the right.

the relative code is below, and the actual page can be seen here

my best,
david


<style type="text/css">

body {

    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
    font-size: small;
    background: #222;
    text-align: center;

    }

#main {

    width:720px;
    margin:0px auto;

    }


/* navigation */



#nav1 {

        float: left;

        width: 720;
        margin:0px auto; /* Right and left margin widths set to "auto" */
        text-align:left; /* Counteract to IE5/Win Hack */
        padding: 0;
        list-style: none;
        background: #000;

    }

#nav2 {

        float: left;

        width: 720;
        margin:0px auto; /* Right and left margin widths set to "auto" */
        text-align:left; /* Counteract to IE5/Win Hack */
        padding: 0;
        list-style: none;
        background: #000;

    }

#nav1 li {

        float: left;

        margin: 0;
        padding: 0;
        border-left-width:1px;
        border-left-style:solid;
          border-left-color:#333;
        }

#nav2 li {

        float: left;

        margin: 0;
        padding: 0;
        border-left-width:1px;
        border-left-style:solid;
          border-left-color:#333;
        }

#nav1 a {

        float: left;

        display: block;
        padding: 6px 16px 6px 16px;
        text-decoration: none;
        font-weight: normal;
        font-size: 11px;
        color: #999;
        background: #000;
        }

#nav2 a {

        float: left;

        display: block;
        padding: 6px 16px 6px 16px;
        text-decoration: none;
        font-weight: normal;
        font-size: 11px;
        color: #999;
        background: #000;
        }

#nav1 #nav_01 {border: none;}

#nav2 #nav_06 {border: none;}


#nav1 a:hover {
    color: #666;
    }

#nav2 a:hover {
    color: #666;
    }

</style>

</head>
<body onload="preloadImages();">

    <div id="main">
        <table width=720 border=0 cellpadding=0 cellspacing=0>
            <tr>
                <td width=360 height=120><img src="img/header_01.gif" width=360 height=120 alt="" /></td>
                <td width=105 height=120><a href="#services" onmouseover="changeImages('header_02', 'img/header_06o.gif'); return true;" onmouseout="changeImages('header_02', 'img/header_02.gif'); return true;"><img name="header_02" src="img/header_02.gif" width=105 height=120 border=0 alt="" /></a></td>
                <td width=110 height=120><a href="http://www.bradhenderson.com/philosophy.htm" onmouseover="changeImages('header_03', 'img/header_07o.gif'); return true;" onmouseout="changeImages('header_03', 'img/header_03.gif'); return true;"><img name="header_03" src="img/header_03.gif" width=110 height=120 border=0 alt="" /></a></td>
                <td width=105 height=120><a href="mailto:brad@bradhenderson.com" onmouseover="changeImages('header_04', 'img/header_08o.gif'); return true;" onmouseout="changeImages('header_04', 'img/header_04.gif'); return true;"><img name="header_04" src="img/header_04.gif" width=105 height=120 border=0 alt="" /></a></td>
                <td width=40 height=120><img src="img/header_05.gif" width=40 height=120 alt="" /></td>
            </tr>
        </table>

        <img src="img/splash.jpg" width=720 height=410 alt="" /><br>

            <ul id="nav1">
                <li id="nav_01"><a href="http://www.bradhenderson.com/mind.htm">the mind show</a></li>
                <li id="nav_02"><a href="http://www.bradhenderson.com/sorieeblack.htm">soiree</a></li>
                <li id="nav_03"><a href="http://www.bradhenderson.com/sleightblack.htm">sleight of hand</a></li>
                <li id="nav_04"><a href="http://www.bradhenderson.com/marketingblack.htm">entertainment marketing</a></li>
                <li id="nav_05"><a href="http://www.bradhenderson.com/seminarblack.htm">motivational seminars</a></li>
            </ul>
            <ul id="nav2">
                <li id="nav_06"><a href="http://www.bradhenderson.com/grad/">hypnotism</a></li>
                <li id="nav_07"><a href="http://www.bradhenderson.com/eventblack.htm">event suggestions</a></li>
                <li id="nav_08"><a href="http://www.bradhenderson.com/philosophy.htm">philosophy</a></li>
                <li id="nav_09"><a href="http://www.bradhenderson.com/quotesandclients.htm">references</a></li>
                <li id="nav_10"><a href="#">512 302 1956</a></li>
            </ul>


    </div>
<img src="img/x.gif" width=1 height=400 alt="" /></td>

</body>
</html>