css problen in IE 6-7

There is an asterisk in the css definition, display:inline defined twice.

#menu li.shopcart span {overflow:visible;text-indent:0px;  display:inline;zoom:1;*display:inline; float:right; margin-top:4px;}

hi tommyBoy
it is not working.you can check the following link for some minutes
http://ierotheos.selfip.com/test.html

Removing overflow:hidden from #menu li{} causes the (1) to show in IE7 but I cannot determine what it will do to the rest of the layout.

Removing the overflow:hidden is showin the span NOT INLINE.May be that's why it is not visible.
And the other result can you see on the link

To see it you must have the IE 6 or 7.
As i said the span is NOT showing inline.
The div is gettin a bigger height and a bigger part of the navbuttons.gif is visible

Your ColdFusion script appears to be producing different output for IE7 than it does for FF. The extra output is hidden in IE because the link containers are not wide enough to reveal it all. The (1) text is stuck at the end of the extra output and there is no way to move it next to the shopcart button using css.

Attached is a screen shot of your test page as it looks with all of the ColdFusion output revealed in IE. There appears to be two copies of the navigation button plus some extra text in the shopcart button that does not appear in the output as viewed through FF.
IE7-ColdFusion-output.jpg

I don't understand why coldfusion could producing different output.The source code is the same.
Now look at the two new screenshots.I did delete the background image from the css.The span in IE is in a new line.
<style type="text/css">
/*navbar */
ul#menu{margin-top:0; padding:0; list-style:none;}
#menu li{ overflow:visible; text-indent:-9999px;zoom:1; *display:inline; float:left; margin:0;height:21px; padding-bottom:20px}
#menu li a{ width:100%; height:100%; display:block;}

/* Home Button */
#menu li.home{width:70px; height:21px;}
#menu li.home a{background-position:0px 0px;}
#menu li.home a:hover{background-position:-189px 0px;}

/* Shopcart Button */
#menu li.shopcart{width:164px; height:21px;}
#menu li.shopcart span {overflow:visible;text-indent:0px;zoom:1;*display:inline; float:left; margin-top:4px; vertical-align:top; padding-bottom:20px; height:21px;}
#menu li.shopcart a{background-position:0px -21px;color: #600;}
#menu li.shopcart a:hover{background-position:-189px -21px;color:#333366}
#menu .divider { background:url('style/images/menu/divider.gif') no-repeat; width:10px; height:20px; margin-left:5px; padding-right:5px;}
/* end navbar */
</style>

<ul id="menu">
<li class="home"><a href="index.cfm?carttoken=506550Q051311104542">Home</a></li>
<li class="divider">&nbsp;</li>
<li class="shopcart"><a href="index.cfm?action=view&carttoken=506550Q051311104542">Shopcart <span>(1)</span></a></li>
</ul>
screen.gif

You forgot the background image.I did add this in the css and the result is not what  we expect.
(see screen.gif).
Your semifinal code was better.I did add a margin left and it is looking much better.
#menu li.shopcart span {overflow:visible;text-indent:9999px;zoom:1;*display:inline; margin-left:88px; vertical-align:top;}

It is not working in FF as you allready mentioned but this can be solved with a conditional comment for IE.
(i have a problemwith the too.Lookat the attached testcode.in my originalcode i'm using link tags to the css files.IE is not reading what is in the conditional comment.

<style type="text/css">
@charset "iso-8859-7";
/* CSS Document */
body {margin: 0px;font-size: 12px;color: #600;font-family: "Palatino Linotype", "Book Antiqua", Palatino,"Times New Roman", Times, serif;}
/*navbar */
ul#menu{margin-top:0; padding:0; list-style:none;}
#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin:0;padding:0;height:21px;}
#menu li a{background:url('style/images/menu/navbuttons.png') no-repeat; width:100%; height:100%; display:block;}

/* Home Button */
#menu li.home{width:70px; height:21px;}
#menu li.home a{background-position:0px 0px;}
#menu li.home a:hover{background-position:-189px 0px;}

/* Shopcart Button */
#menu li.shopcart{width:164px; height:21px;}
#menu li.shopcart span{overflow:visible;text-indent:0px;  display:inline; float:right; margin-top:4px;zoom:1;*display:inline;}
#menu li.shopcart a{background-position:0px -21px;color: #600;}
#menu li.shopcart a:hover{background-position:-189px -21px;color:#333366}
#menu .divider {background:url('style/images/menu/divider.png') no-repeat; width:10px; height:20px; margin-left:5px; padding-right:5px;}
/* end navbar */
</style>

<!-- [if IE]>
<style type="text/css">
@charset "iso-8859-7";
/*navbar */
ul#menu{margin-top:0; padding:0; list-style:none;}
#menu li{ overflow:visible; text-indent:-9999px;zoom:1; *display:inline; float:left; margin:0;height:21px;}
#menu li a{background:url('style/images/menu/navbuttons.gif') no-repeat; width:100%; height:100%; display:block;}

/* Home Button */
#menu li.home{width:70px; height:21px;}
#menu li.home a{background-position:0px 0px;}
#menu li.home a:hover{background-position:-189px 0px;}

/* Shopcart Button */
#menu li.shopcart{width:174px; height:21px;}
#menu li.shopcart span {overflow:visible;text-indent:9999px;zoom:1;*display:inline; margin-left:88px; vertical-align:top;}
#menu li.shopcart a{background-position:0px -21px;color: #600;}
#menu li.shopcart a:hover{background-position:-189px -21px;color:#333366}
#menu .divider { background:url('style/images/menu/divider.gif') no-repeat; width:10px; height:20px; margin-left:5px; padding-right:5px;}
/* end navbar */
</style>
<![endif]-->


<ul id="menu">
<li class="home"><a href="">Home</a></li>
<li class="divider">&nbsp;</li>
<li class="shopcart"><a href="">Shopcart <span>(14)</span></a></li>
</ul>

Select allOpen in new window

screen.gif

I did not forget about the background image, you deleted it in post ID:35762085. I thought it would be a good idea to leave it off until you worked out the problem with getting the (1) where you wanted it. It looks to me that you largely ignored my suggestions anyway. Your latest post shows the old markup and css with all of its problems. The background image is not the issue.

The (1) is not showing up where you want it because it is inside the anchor tag and you are setting the anchor tag to display -9999px off screen to the left. My suggestion was to put the anchor text, "Home" and "Shopcart" in separate span tags with class names so the words could be moved -9999px to the left while the (1), in its own span tag can be placed where you want it.

tommyBoy
I'm not ignoring your suggestions.I need to use this transparent backgoundimage.I can't do this using any font.
Because i saw that is was possible to get this work using your solution ID: 35762174 i tried to fix that this way.
There is for me a solution.Check users Browser server side and than decide what to use.
(the code inside the conditional comment or the other)
But why does the conditional comment  not do the job?

tommyBoy
I solved the problem using a  server side browser definition and the rest is very easy using your code from post ID: 35762174

Thank you very mush for your great help.
(I can understand that it was difficult for you)

Thank you
regards
panos

You're welcome. I was just looking at it again when you posted the good news. Glad you worked it out. Thanks for the points.