List item with number alignment

I am wanting to create a list item that has a number next to it but the number needs to have a background and be raised slightly above the corresponding text. I'm really struggling at present to get it looking correct cross browser (I realise the box will be squared off in IE7/8 - that's not a problem)

I have this code:

<ul>
<li><a href="#">Messages <span>100</span></a></li>
</ul>

and this css:

#subnav ul li {
display: inline-block;
font-size: 16px;
font-weight: bold;
line-height: 36px;
margin-right: 25px;
}

#subnav ul li a {
padding: 10px 12px;
}

#subnav ul li span {
font-size: 11px;
color: #fff;
background-color: #aba59e;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-bottom: 2px;
padding: 2px 5px;
vertical-align: top;
}

But because the smaller numbered span text remains on the same horizontal alignment as the larger text and I'm also adding a background to that span it then appears as though the span is below the main text.

It's also pretty bad in IE7 at present.

Any help or ideas would be much appreciated.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#subnav ul li {
   display: inline-block;
   font-size:16px;
   font-weight:bold;
   line-height:36px;
   margin-right:25px;
  }
#subnav ul li a {
   padding:0 12px;
  }
#subnav ul li span {
   float:right;
   line-height:1.2;
   font-size:11px;
   color:#fff;
   background-color:#aba59e;
   -webkit-border-radius:8px;
   -moz-border-radius:8px;
   border-radius:8px;
   margin-top:6px;
   padding:2px 5px;
 } 
</style>

</head>
<body>
 
<div id="subnav">
  <ul>
   <li><a href="#">Messages <span>100</span></a></li>
  </ul>
</div>

</body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#subnav ul li {
   display:inline-block;
   font-size:16px;
   font-weight:bold;
   line-height:36px;
   margin-right:25px;
  }
#subnav ul li a {
   display:block;
   padding:0 12px; 
   text-decoration:none;
  }
#subnav ul li a #m {
   text-decoration:underline;
  }
#subnav ul li a #n {
   float:right;
   line-height:1.2;
   font-size:11px;
   color:#fff;
   background-color:#aba59e;
   -webkit-border-radius:8px;
   -moz-border-radius:8px;
   border-radius:8px;
   margin:6px 0 0 5px;
   padding:2px 5px;
  } 
#subnav ul li a:hover{
   background-color:#797979;
   -webkit-border-radius:20px;
   -moz-border-radius:20px;
   border-radius:20px;
   color:#fff;
  }
</style>

</head>
<body>
 
<div id="subnav">
  <ul>
   <li><a href="#"><span id="m">Messages</span><span id="n">100</span></a></li>
  </ul>
</div>

</body>
</html>

List item with number alignment

greencode

birdbrain

greencode

greencode

birdbrain

lucy24

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week