CSS Width percentage layout issues

I tried some of the work-arounds, to no avail =(

What is the usual solution for a percentage based navigation?  Or are the fixed-pixel widths preferred for exactly this compatibility reason?

I attempted to wrap the appropriate CSS in those conditional comments, but something still doesn't seem to be working right.  The widths are still being calculate off the main CSS:

#navcontainer {

     float:left;

     font-family: Arial, Helvetica, sans-serif;

     width: 1002px;

      background-color:#05406E;

      overflow:hidden;

}

 

/* to stretch the container div to contain floated list */

#navcontainer:after {

        display: block;

        line-height: 1px;

        font-size: 1px;

        clear: both;

}

 

<!- -[if IE 6]>

ul#navlist li {

     display: block;

     float: left;

      width:100px;

     margin: auto;

     padding: 0 0 0 0;

}

 

ul#navlist li a {

     display: block;

     width: 100px;

     padding: 0.4em;

     border-width: 3px;

     border-color: #05406E;

     border-style: solid;

     color: #FFFFFF;

     text-decoration: none;

     background: #003366;

}

 

<![endIf]-->

 

ul#navlist {

     list-style: none;

     padding: 0 0 0 0;

     margin: auto;

     /*width: 1002px;*/

     font-size: 10pt;

}

 

 

ul#navlist li {

     display: block;

     float: left;

    width:167px;

     /*width: 16.6%;*/

     margin: auto;

     padding: 0 0 0 0;

}

 

ul#navlist li a {

     display: block;

     width: 167px;

     padding: 0.4em;

     border-width: 3px;

     border-color: #05406E;

     border-style: solid;

     color: #FFFFFF;

     text-decoration: none;

     background: #003366;

}

 

#navcontainer>ul#navlist li a {

     width: auto;

}

 

ul#navlist li#active a {

     background: #003366;

     color: #FFFFFF;

}

 

ul#navlist li a:hover, ul#navlist li#active a:hover {

     color: #003366;

     background: #A8CBE9;

}

Did I do something wrong?

Yes I used the conditional comments:

<!--[if IE 6]>

ul#navlist li {

     display: block;

     float: left;

      width:100px;

     margin: auto;

     padding: 0 0 0 0;

}

 

ul#navlist li a {

     display: block;

     width: 100px;

     padding: 0.4em;

     border-width: 3px;

     border-color: #05406E;

     border-style: solid;

     color: #FFFFFF;

     text-decoration: none;

     background: #003366;

}

 

<![endIf]-->

I assume that by doing this, IE 6 will use these styles instead of the ones outside of the comments?  Or do I need to do something else?

Also, I placed them in the external stylesheet.  Does it need to be in the main HTML document?

EDIT: Didn't see your new post.  I tried it both externally and internally and it still didn't work.

This is what's occuring in IE6, by the way:

The widths aren't changing no matter how small I make them ( I dropped them as low as 30px with no change).

Actually, scratch my last post.  It does seem to be working with the IECC placed internally rather than in my external stylesheet.  Thanks so much for your help, once again =)