IE/Firefox Win, Safari/FireFox Mac, float & margin issue

Hi there,

I'm working on some tricks to display menus a little differently in Mambo. Because the menus are dynamic, the only way to have a different colour/image in each menu is to assign it in the backend. They are processed as an img src, within either the <li> or <td> depending on whether you use tables or a list to create the menu. They're not background images and cannot be set to be so. There is no way to set a different css class to each individual menu item in a given dynamic menu.

So I've got the menu functioning the way I want it in Mac Safari and Firefox, setting an individual image for each menu item, but letting the css handle the rest of the style for each <li> and <a>

However it breaks in two different ways in IE and Firefox on Windows.

This is the demo site where I play around with these sort of ideas:

http://www.thinksync.com.au/demo

For those of you who don't have a Mac, it looks like this:

And on Windows IE:

and on Windows Firefox:

and my css file for just this style:

.moduletable_test1 {
	font-family:"Century Gothic", Verdana, Arial, sans-serif;
	font-weight:bold;
	font-size:125%;
	color:#FFFFFF;
	padding:0px 0px 0px 10px;
	}
	
.moduletable_test1 ul {
	list-style-type:none;
	white-space:nowrap;
	margin:0px;
	padding:0px;
	text-align:left;
	}

.moduletable_test1 li {
	float:left;
	margin-left:0px;
	border-left:10px solid #FFFFFF;
	}
	
	
.moduletable_test1 a:link {
	margin-left:-50px;
	color:#FFFFFF;
	font-size:100%;
	font-weight:bold;
	}
	
.mainlevel_test1 {
	padding:60px 0px 0px 0px;
	vertical-align: top;
	position:absolute;
	height:60px;
		
	}

And the code that Mambo generates for the menu:

<table cellpadding="0" cellspacing="0" class="moduletable_test1">
  <tr>
    <td>
	<ul id="mainlevel_test1">
        <li><img src="http://www.thinksync.com.au/demo/images/stories/purple_bg.gif" border="0" alt="Test 1"/> <a href="#" class="mainlevel_test1" >Test 1</a>
        </li>
        <li><img src="http://www.thinksync.com.au/demo/images/stories/ltgreen_bg.gif" border="0" alt="Test 2"/> <a href="#" class="mainlevel_test1" >Test 2</a>
        </li>
       </ul>			
    </td>
  </tr>
</table>

(I've reflowed the above code to read a little easier)

If anyone can help at all, I'd much appreciate it!