float right in a Unordered list....

Posted: Thu, 2008-07-24 10:08

Hi Everyone,

I want to display a username on the left and his status on the right in an Unordered list.

Here's a screenshot to show what I mean (browser: Safari -> Mac)

As you can see, it works perfectly well in Safari, but only in Safari! In Firefox and IE it's all cluttered

Here's how it looks in Firefox 3 (mac)

This is what I've used:

XHTML

<li class="alternate">Jermaine<div class="float_right">
  Currently <span class="online">Online</span></div></li>
	
<li>Ryan<div class="float_right">
  Currently <span class="online">Online</span></div></li>

<li class="alternate">Earl<div class="float_right">
  Currently <span class="online">Online</span></div></li>

CSS

#list {
      margin:0;
      margin-top:10px;
      padding:0;
      list-style-type: none;
      width:90%;
    }

#list li {
     margin:0;
     padding:8px;
     padding-left:10px;
     border-bottom:1px solid #ccc;
     font-weight:bold;
    }

.float_right {
     font-weight:normal;
     font-size:12px;
     float:right;
}

Any Tips, Tricks or suggestions to solve this problem?

Many thanks in advance!

Grtz,

- Jermaine