css problen in IE 6-7

Panos
Panos used Ask the Experts™
on
Heilo experts.
I have  aproblem with the following menu.
The characters (1) in the shopcart list element are not visible in IE 6-7(tested with IEtester)
Any help?


<style type="text/css">
/*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.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:164px; height:21px;}
#menu li.shopcart span {overflow:visible;text-indent:0px;  display:inline;zoom:1;*display:inline; float:right; margin-top:4px;}
#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>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2015

Commented:
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;}

Author

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

Commented:
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.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
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

Author

Commented:
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
Top Expert 2015

Commented:
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

Author

Commented:
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
Top Expert 2015
Commented:
Try this:

In css #menu LI.shopcart SPAN

Remove float:left
Remove margin-top:4px

Add: text-indent:9999px
Top Expert 2015
Commented:
Never mind that last post, it breaks in FF.

The attached code works the same in all browsers including IE7.

Note that class names were added to the span tags.
<style type="text/css">
/*navbar */
ul#menu{margin-top:0;list-style:none;}
#menu li{ overflow:visible;zoom:1; display:inline; float:left; margin:0;height:21px}
#menu li a{ width:100%; height:100%; display:inline;}

/* Home Button */
#menu li.home{height:21px;}
#menu li.home span.linkTitle {margin:0 0 0 -9999px;}
#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.linkTitle {margin:0 0 0 -9999px;}
#menu li.shopcart span.index {overflow:visible;margin:0 0 0 9999px;zoom:1;display:inline; 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('hstyle/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"><span class="linkTitle">Home</span></a></li>
<li class="divider">&nbsp;</li>
<li class="shopcart"><a href="index.cfm?action=view&carttoken=506550Q051311104542"><span class="linkTitle">Shopcart</span> <span class="index">(1)</span></a></li>
</ul>

Open in new window

Author

Commented:
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>

Open in new window

screen.gif
Top Expert 2015

Commented:
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.

Author

Commented:
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?

Author

Commented:
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)

Author

Commented:
Thank you
regards
panos
Top Expert 2015

Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial