title: background image height cut
body: <p>I´m trying to figure out why the background image on my a:selected class is being cut both bottom and top. I´ve tried assigning <code>height:!important;</code> and <code>min-height;</code> to <code>.main_menu ul li</code> and <code>.main_menu ul li a.selected</code>, but seems like something else is limiting the background image size (17x21px)</p>
  
  <p>I wanted to provide an image, but since I´m new they won´t let me do so :(
  The image is a circle and it´s being sliced bottom and top, just as it was to fit into a smaller container</p>
  
  <p>Here´s the code, thanks for any suggestion!</p>
  
  <pre class="lang-css prettyprint-override"><code>.menu_container{
      position: absolute;
      float: left;
      width: 270px;
      margin-top: 220px;  
  }
  .main_menu ul { 
      padding: 0px; 
      margin:0px;
      list-style-type: none;  
  }
  .main_menu ul li {
      font-family:Arial, Helvetica, sans-serif; 
      font-size:11px; 
      letter-spacing:4px;
      text-align:right; 
      line-height:35px;  
      list-style-type:none;
  }
  .main_menu ul li a  {
      padding-right: 25px;  
      text-decoration:none;  
      color:#999; 
  } 
  .main_menu ul li a.selected {
      color: #bc4c9b;
      font-weight:bold; 
      background: url(images/circle.gif) right center no-repeat;
      height: 35px!important;  
  }   
  .main_menu ul li:hover {
      text-decoration:none;  
      color:#999;  
      font-weight:bold;  
      background:url(images/circle_grey.gif) right center no-repeat;
  }  
  </code></pre>