dynamic UL menu, 2 lines IE vs FF :( (PHP / CSS)

[gpigate]

I am about ready to put a bullet in this code.... For the life of me I can not figure out how to get this blasted UL / LI on the same line. I have 2 of them and they need to be on the same line but have an area of space between them for a logo that comes down into the nav menu.

when I first got close, it showed the background image that I have for the UL (a tab) all the way across. So I decided to break it into 2 UL's and that works in FF but not in IE. In IE it shows the UL's on 2 separate lines even with the floats

any help would be appreciated

.chromestyle ul   { background: repeat-x center; text-align: center; margin: 0; padding: 0px; width: 1000 }	

.chromestyle ul li {float: left; display: inline; background: url(../../images/tab.gif); padding: 7px 20px; overflow:hidden; clear:none; list-style:none}
.chromestyle ul.r li {float: right; display: inline; background: url(../../images/tab.gif); padding: 7px 20px; clear:none; list-style:none;}

.chromestyle ul li a    {display:inline; color: #FFFFFFF; text-decoration: none; margin: 0; padding: 8px 8px }

.chromestyle ul li a:hover  { color: #ec3d07; background: repeat-x center }

echo "<div class=\"chromestyle\" id=\"chromemenu\">\n";
echo "<ul>\n";
$nav1Sql = mysql_query("SELECT * FROM nav_table ORDER BY nav1_order");
$cnt = 0;
while ($nav1 = mysql_fetch_array($nav1Sql)) {
	$cnt++;
	$menuitems[] = $nav1['nav1id'];
	
	$relative = ($nav1['nav1_path']=="#") ? " rel=\"dropmenu".$nav1['nav1id']."\"" : "";
	if ($cnt==4) {echo  "</ul><ul class=\"r\">";}
	echo "<li><a href=\"".$nav1['nav1_path']."\"".$relative.">".$nav1['nav1_title']."</a></li>\n";
}
echo "</ul>\n";
echo "</div>\n";

so what I am doing is breaking the UL after the 3rd link is pulled from the database. Then I need some space for the logo to appear then the 2nd UL to start



If you want to see what it is doing go here http://outdoorsindoors.net/DEV/GRIP/index.php

[gpigate]

somewhat got it working by playing around with the css options. wasn't fun and isn't clean but hey, it works.

only problem now is that IE doesn't support hovers on anything other than anchors

[Moshambi]

what I usually do to display a menu using <ul>'s inline is this:

ul li
{
  display: block;
  float: left;
}

and as for your IE hovering problem...if you are trying to make it so the whole <li> will be like a link then just do something like this:

ul li a
{
  display: block;
  width: insert width of the <li> here;
  height: insert height of the <li> here;
}

Those are 2 examples of what I usually do. I hope this post helped you.