IE6 and width:auto problems

[Seraph]

First of all, this is the site I am working on, for reference if needed:
Sailor Pens US


Now, the problem is this:

The page works fine in Firefox and IE7, etc.

But it doesnt work in IE6. The navbar gets messed up.

Here is the css for it:
<code>
/*Credits: Dynamic Drive CSS Library */
/*URL: Dynamic Drive CSS Library- Practical CSS codes and examples */

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font-size: small;
font-style: normal;
z-index: 50;

}

/* top level list items */
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
height: 1%;
background-color: #FFFFFF; /* overall menu background color */
}

/* top level link items */
.suckertreemenu ul li a, h2.widgettitle{
display: block;
width: auto;/*96%;*/ /* width of top level link items */
padding: 1px 8px;
border: 0; /*1px solid black;
border-left-width: 0;*/
border-top: 0;
text-decoration: none;
color: #000000;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
height: 1%;
}

/* 1st sub level menu */
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/* sub level list items (undo style from top level list items) */
.suckertreemenu ul li ul li{
display: list-item;
/*float: none;*/
float: left;
height: 1%;
}

/* all subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /* width of sub menu levels */
color: #000000;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

.suckertreemenu ul li a:hover, h2.widgettitle:hover {
background-color: black;
color: white;
cursor: pointer;
height: 1%;
}

/* background image for top level list links */
.suckertreemenu .mainfoldericon{
background-color: #FFFFFF;
/*background: #FFFFFF url(images/arrow-down.gif) no-repeat center right;*/
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
}

/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

/* background image for subsequent level list links */
.suckertreemenu .subfoldericon{
background-color: #FFFFFF;
/*background: #FFFFFF url(images/arrow-right.gif) no-repeat center right;*/
}

<script type="text/javascript">
<!--
//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: Dynamic Drive CSS Library- Practical CSS codes and examples

var menuids=["treemenu1","treemenu2"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
-->
</script>

<code>

I am almost positive that the problem is at the /* top level link items */ area where it is
width:auto;


I have read that this doesnt work in IE6. So I attempted to just use width:100%

This works in Firefox, too. But in IE6 it is setting each item to a width 100% of the entire bar area. If I set it to 50%, for example, then each item will take up 1/2 of a line of the bar area.

I am really a newbie at php and stuff of this sort. Any help would be greatly appreciated!

 

[office politics]

ie 7 on vista home basic

 

[Seraph]

Hmmm thats a new one for me...

 

[office politics]

on the orignal problem you may want to set a !doctype declaration. click the following link and read under the subheading labeled 'Fix the Box Instead of Thinking Outside It'

CSS Enhancements in Internet Explorer 6

 

[Seraph]

Im actually thinking about just scrapping the two files I have and replacing them with the original ones that they are based off of at Dynamic Drive CSS Library- Practical CSS codes and examples

It seems that everyone there has found them working fine on all types of browsers. I think tomorrow when I get back to my own computer Im going to just backup what I have and then try to redo them from the original.