Дизайн CSS нечетный?

Question

Хорошо, я запускаю этот сайт (бета) через час, но я только что заметил уродливую ошибку. Я добавил новый счетчик (1, 2, 3 и т. Д.), Который ранее использовал <ol>.

Посмотрите на этой картине перед:

все было даже кнопка голосование вверх, текст весь путь вниз.

Теперь в режиме реального времени после добавления нового счетчика: www.leapfm.com нет. (когда он становится двузначным числом)

Пожалуйста, используйте FireBug или инструменты разработчика Chrome, если вам нужен какой-либо дополнительный код, я предоставил его как можно скорее.

исходный код:

.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

(я добавляю ответ, потому что я не могу просмотреть свой код с комментарием, и они не дают мне достаточно места.) Да, ол (или таблица) работал бы. Но решение быстро исправить было бы дать счетчику фиксированную ширину (скажем, 30 пикселей). Единственная проблема с этим была бы, если бы у вас появилось намного больше цифр.

Если вы хотите исправить это с помощью JavaScript (который будет работать вечно), используйте такой код (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> 

Я использовал способ один раньше. Я уверен, что мне нужно сделать div со стилем внутри IE8.

Answer 2

• Для .subtext1, дайте ему margin-left: 15px.
• Для .counter, дайте ему высоту 100% или 22px.
• И удалите несколько   между .title и .subtext1.