Как остановить неупорядоченные списки после прыжка?

Question

Действительно борется с другим вопросом на моей временной шкале для компании, в которой я работаю, и буду благодарен за помощь. все работает по мере необходимости, единственная проблема, с которой я сталкиваюсь, заключается в том, что элементы списка продолжают прыгать при наведении курсора. Я пробовал все, что знаю в моем CSS, от фиксированных высот и ширины до разных позиций, т.е. фиксированное, относительное и абсолютное ничего не работает. Я знаю, что эта временная шкала была раньше, и я ценю всю предыдущую помощь, но это нечто другое.

JSFIDDLE http://jsfiddle.net/Jason1975/9tskrf9q/11/

CSS

* { 
      margin: 0; 
      padding: 0; 
     } 

     body { 
      background: #ffffff; 
      font-family: 'open sans', sans serif, arial; 
      font-weight: lighter; 
      color: #808080; 
      font-size: 14px; 
     } 
     /* Type */ 
     h1,h2,h4,h5,h6 { 
      text-align: center; 
      color: #ccc; 
      margin-bottom: 5px; 
     } 
      h1 { 
       font-size: 18px; 
      } 
      h2 { 
       font-size: 14px; 
      } 
      .section-title, .portfolio-title { 
      text-align: center; 
      font-size: 36px; 
      font-weight: 100; 
      text-transform: lowercase; 
      margin: 0; 
     } 
     a { font-size: 14px; text-decoration: none; color: #666666; } 
     a:hover { font-size: 14px; color: #F47C00; } 
     /* Timeline */ 
     #master { width: 989px; 
        height: auto; 
        margin: 0 auto; 
     } 
     #container { position: relative; 
         width: 100%; 
         height: 80px; 
         margin: 0 auto; 
         overflow: hidden; 
         white-space:nowrap; 
         background:url(http://www.valueportfolio.co.za/jsfiddle/line.png) center 50% repeat-x; 
     } 
     ul#new { display: inline; 
        position: relative; 
        width: 100%; 
        left: 0; 
        top: 0 
     } 



     .block-up { position: relative; 
         display: inline-block; 
         list-style:none; 
         width: 130px; 
         height: 80px!important; 
         margin: 0!important; 
         top: 0; 
         background: url(http://www.valueportfolio.co.za/jsfiddle/dot.png) center 50% no-repeat; 

     } 
     .block-down { position: relative; 
         display: inline-block; 
         list-style:none; 
         width:130px; 
         height: 80px!important; 
         margin: 0!important; 
         top: 0; 
         background: url(http://www.valueportfolio.co.za/jsfiddle/dot.png) center 50% no-repeat; 

     } 
     .block-down a { font-size: 14px; } 
     .block-down a:hover { font-size: 14px; } 
     .date-up {  padding-bottom: 20px; 
         text-align:center; 
     } 
     .event-up {  padding-top: 20px; 
         text-align: center; 
         font-size: 14px; 
         color: #F47C00; 
         visibility: hidden; 


     } 
     .date-down { padding-top: 20px; 
         text-align:center; 


     } 
     .event-down { padding-bottom: 20px; 
         text-align: center; 
         font-size: 14px; 
         color: #F47C00; 
         visibility:hidden; 


     } 
     #grad_left, 
       #grad_right { 
        width: 100px; 
        height: 350px; 
        position: absolute; 
        top: 0; 
       } 
        #grad_left { 
         left: 0; 
         background: url('http://www.valueportfolio.co.za/jsfiddle/left-grad.png') repeat-y; 
        } 
        #grad_right { 
         right: 0; 
         background: url('http://www.valueportfolio.co.za/jsfiddle/right-grad.png') repeat-y; 
        } 

       #next, 
       #prev { 
        position: absolute; 
        top: 0; 
        font-size: 24px; 
        width: 24px; 
        height: 47px; 
        background-position: 0 0; 
        background-repeat: no-repeat; 
        text-indent: -9999px; 
        overflow: hidden; 
       } 
     #next, #prev { 
      top: 15px; 
     } 

        #next { 
         right: 0; 
         background-image: url('http://www.valueportfolio.co.za/jsfiddle/right.png'); 
        } 
        #prev { 
         left: 0; 
         background-image: url('http://www.valueportfolio.co.za/jsfiddle/left.png'); 
        } 
         #next.disabled, 
         #prev.disabled { 
          opacity: 0.2; 
         }    

Answer 1

Просто добавьте

vertical-align:top; 

к вашему .block-up класса

обновление fiddle