Help! Table issues

Here's my code:

(from stylesheet) -

    
#navcontainer
{
    text-align: center;
    margin: 0 auto;
    float: left;
    clear: both;
    width: 100%;
}

#navbar table
    {
        color: #FFFFFF;
        padding: 0;
        margin: 0;
        border-spacing: 5;
        border: 0;
        height: 30px;
        width: 900px;
    }
    
    #navbar td
    {
        text-align: center;
        cursor: pointer;
        height: 30px;
        width: 220px;
        min-width: 220px;
        background: url('images/tab.png');
    }

Code (markup):

And this is from my homepage:

    

<div id="navcontainer">
    <div id="navbar" align="center">
        <table id="navigation" align="center">
        <tr>
        <td><a href="index.php">Home</a></td>
        <td><a href="protips.php">Pro Tips</a></td>
        <td><a href="contact.php">Contact Us</a></td>
        <td><a href="faqs.php">FAQS</a></td>
        </tr>
        </table>
    </div>
    </div>

Code (markup):

You can see the problem at http://lowestrake.com

The issue is this, I want the table to remain at a fixed width once the window size decreases below 984px. Basically, I don't want the table cells to get all scrunched up if the window is minimized! In the past I've fixed this with min-width in my stylesheet, but as you can see this isn't working here! What am I doing wrong?

 

Still haven't found a way to fix this... anyone got any suggestions?

 

Use the following: