Help with Exploding Boy Port

Having some issues with the menu object in tab mode. I have created a menu based on the exploding boy templates and I have some strange hovering issues. i have been tweaking this thing for days and cannot find the solution.

Issue with IE 6
When hovering, the full menu item does not do an image rollover, just the part with the link in it. There is a 10 px padding on the left side of the .TabList li. See attachment 1

FireFox
When hovering over the link in the tab, the rollover works as intended. But if you hover over the left edge with the 10px padding,  it only rollsover the left edge. see attachment 2

Here is my CSS:

TabList { float:left; margin-top: 0px;}
.TabList ul { margin:0; list-style:none; display: inline; }
.TabList li { float:left; margin:0; display: inline; padding:0 0 0 10px; }
.TabList li a { font-family:"Trebuchet MS"; font-size:14px; voice-family: "\"}\""; voice-family:inherit; line-height:normal; }

select.TabList { border-left: #003366 1px solid; border-right: #003366 1px solid; border-top:  #003366 1px solid;
border-bottom: #003366 1px solid; background-color: #003366; color:#FFFFFF; font-weight:bold; font-size:80%; }

#navParent a { font-weight:bold; float:left; display:block; text-align:left; white-space: nowrap; text-align: center; padding:4px 8px 4px 0px; text-decoration:none; color:#ffffff; background:url(ebBlack/tabrightH.gif) no-repeat right top; }
#navParent a:hover, #navParent li.hover a { text-decoration:none; background-position:100% -42px; color: #FFFFFF; }
#navParent li { background:url(ebBlack/tableftH.gif) no-repeat left top; border-bottom: #999999 0px solid; }
#navParent li:hover, #navParent li.hover { background-position:0 -42px; }
#navParent .SelectedItem { background-position:0 -42px; }
#navParent .SelectedItem a { background-position:100% -42px; color:#FFFFFF; }

Thanks for any help provided. I tried swapping out a skincovered example too, but ran into the same problems.

Hi Erik,

This problem is because IE doesn't support the :hover psuedo class on an li element.

If you use the Hover NavType, then you will get onmouseover events injected for the list item elements.

There is also an IE behavior called csshover.htc which you can reference from your css file, if you want to continue using the "sliding-door" tabs.
It's included in the TopTabs samples.

You can also skip using those "old" methods and use the new templates to get total control.
The SilverTabHover sample has specific JS code for IE that will make the tabs work as expected, and the LI will also make the anchor hover in FireFox using CSS.

Thanks John. The template from the SilverTabHover worked perfectly.

Uh, I take that back. It works if I'm logged in only. Otherwise, same problem w/ IE. Is there a restriction based on unauthenticated users?