I am setting up a navigation using an unordered list, but I am tearing my hair out trying to find an easy way that will work in all browsers to have one bit of text on the right hand side of the anchor tag and another bit on the left hand side of the anchor tag. So far all my attempts have failed. I've tried putting the text that I want on the right in a div and span tags (on separate attempts) and floating it to the right then adding a nevative bottom margin to push it up, but either Opera, Fire Fox or IE will show incorrectly when any of the other two display it correctly. It'd be nice to have a way to target Firefox in CSS like you can with IE becuse it's being such a pain.

I am looking for something like this

<ul>
<li><a>Text on the left Text on the right</a></li>
<ul>

I've tried putting the text on the right into a div tag and then floating it to the right, and then adding a negative bottom margin but Firefox doesn't like that and nor does Opera. When I take the negative bottom margin away, Opera displays it fine, and both bits of text are lined up horizontally, but not in IE or Firefox

<ul>
<li><a>Text on the left <div>Text on the right<div></a></li>
<ul>

I also tried something like this where the text to go on the right side goes in a div outside of the anchor tag (in the HTML) but when I float it to the right and use padding to line it up visually with the text on the left it works fine in Firefox and Opera, but not IE6

<ul>
<div>Text on the right<div>
<li><a>Text on the left</a></li>
<ul>

So any suggestions on how I can get one bit of text on the right hand side in an anchor tag and another bit on the left (obviously the width is such that there would be a gap in between) then I'd be grateful. Thanks so much in advance!

FredVaux.com | LightFused.net