CSS design un-even?

Question

Alright, I'm launching this website (beta) in an hour but I've just noticed an ugly bug. I've added a new counter (1, 2, 3, etc..) was previously using <ol>.

Look at this picture the before:

everything was even, the vote up button, the text all the way down.

Now the live version after adding new counter: www.leapfm.com is un even. (when it becomes double digits)

Please use FireBug or Chrome Developer Tools, if you need any further code I will provide it ASAP.

original code:

.subtext1 {
font-family: Verdana;
font-size: 7pt;
color: #828282;


}

.song {
    height: 42px;
}
.counter {
float: left;
margin-right: 2px;
font-size: 14px;


}
.subtext {
font-family: Verdana;
font-size: 7pt;
color: #828282;

}

.title {
font-family: Verdana;
font-size: 10.3pt;
color: #828282;

}

Answer 1

(I'm adding an answer because I can't preview my code with a comment and they're not giving me enough space.) Yes, an ol (or table) would've worked. But a quick-fix solution would be to give the counter a fixed width (say 30px). The only problem with this would be if you started having a lot more digits.

If you wanted to fix this using JavaScript (which would work forever), use code like this (jQuery).

 <script type="text/javascript">
      var counters = $(".counter");
      var counterLen = counters.length; //one based
                                 //convert to zero based
      var largestWidth = counters[counterLen - 1].offsetWidth + "px";

      //WAY ONE: DO IT WITH A STYLESHEET (I recommend this)

      var stylesheetDiv = $("<div>");
      stylesheetDiv.html("<style type=\"text/css\">.counter{width: " + largestWidth + "}</style>");

      $("head").append(stylesheetDiv);

      //WAY TWO: DO IT WITH A JQUERY LOOP
      counters.css({width: largestWidth});
 </script>

I used way one before. I'm pretty sure I have to do the div with a stylesheet inside for IE8.

Answer 2

• For .subtext1, give it a margin-left: 15px.
• For .counter, give it a height of 100% or 22px.
• And delete the multiple   between .title and .subtext1.