Good for you, Rodney! It always feels good to figure something out that you've been working hard at!
Using an unordered list is an interesting way to approach this problem. As long as it works, great! Make sure you test in any other browser your users might use. And if setting the text size to 0 works, I wouldn't worry about it seeming hacky. Again, just make sure it works the way you expect in other browsers too.
To make css editable from the text editor, you can use this format: <li><a class="login" href="#" title="" style="z-index:1; top:28px; left:553px; width:600px; height:56px">
You can't wrap text around a background image because it's not an html element. The image would have to be actually inserted in the html with the <img> tag. You can experiment with that, or you could try putting your unordered list inside a div tag and then wrapping your text around the div by styling the div with float:left. That will probably throw off all of your li absolute positions though and you'll need to adjust them.