I'm trying to display a span A if the browser is IE 6 or lower or a span B if the browser is greater than IE 6 or is not IE.
<!--[if lte IE 6]><!--><span>You're using IE 6 or lower.</span><!--<![endif]-->
<!--[if (!IE)|(gt IE 6)]><!--><span>You're using IE 7 or greater or another browser.</span><!--<![endif]-->
This works perfectly in every Internet Explorer version I have, but in Chrome and in Firefox both of the spans are displayed. I'm guessing that they don't recognize this conditionals as they are Microsoft-specific.
Is there a way to this without recurring to JavaScript?
Your first conditional comment should be:
<!--[if lte IE 6]><span>You're using IE 6 or lower.</span><![endif]-->
This is a single comment (<!-- … -->), and will be treated as such by most browsers. Only IE will see it as anything other than a comment, and only IE <= 6 will display the span.
Compare that to what you have now:
<!--[if lte IE 6]><!--><span>You're using IE 6 or lower.</span><!--<![endif]-->
This is two comments (<!--[if lte IE 6]><!--> and <!--<![endif]-->) with some markup in between them. Since only IE understands that the comments are in any way special, other browsers will display the content but not the two comments.
You can find a very thorough guide to conditional comments on Quirksmode.