Can't get the CSS to make elements on same level

Can anyone tell me why in the image below the text information is not on the same level? As far as I'm aware, the exact same styles are governing both the email address and the other stuff, but they're not level...The only styles I've added are the ones printed below and then there's the default stuff that comes with the wordpress blogging software.

If you're willing to help, it might be easier if you visit the site. Thanks

www.dodomainer.com dodomainer.com

Links

<div class="topnav">

      <li><a href="http://dodomainer.com/"><span class="class6">||</span><span class="class7"> My abilities in 6 modern languages (中文, Deutsch, French, Spanish, 日本語 & English) can help you find new value in the daily drop list</span></a></li>
      <li><a href="http://dodomainer.com/"><span class="class7">mike@</span>
    <span class开发者_高级运维="class7">dodo</span><span class="class7">mainer</span><span class="class7">.com</span></a></li>
   </div>

CSS

.custom .topnav li { float: right; padding: 3px 10px 3px 0px; }
.custom .topnav li a { font-size: 1.5em; color: #000000; }

---

You can add line-height: 1.5em; to topnav DIV to fix the vertical alignment issue of the nav items.

But in reality you have bigger problems than that. Why are your list items not contained in a list? <li> should be inside a <ul> or <ol>.

UPDATE:

Now that you have a list wrapping your list items, you can get rid of the bullets by adding this to the list itself: list-style: none;

Also, are you really married to the idea of having such long double lines between the list items? If not, then remove font-size: 1.5em; from class6 and your alignment issues will be solved.

---

Well for a start your html is all messed up, you have <li>'s inside your top div with no <ul>.