jquery - Link Spacing Issue in CSS -


basically menu, on hover, separate image appear on both sides on link. got far can't seem rid of white spacing on link. there should no white space above link on hover. can't seem figure out i'm missing!?

<li><a href="#" class="button">button 1</a></li> <li><a href="#" class="button">button 2</a></li> <li><a href="#" class="button">button 3</a></li>      $(document).ready(function(){     $(".button").hover(function() {         $(this).before('<div class="buttonimgleft"></div>');         $(this).after('<div class="buttonimgright"></div>');                 }, function() {         $(".buttonimgleft, .buttonimgright").remove();     }); });   body {      margin: 0; }  li {      list-style: none;     display: inline-block;     margin-right: 15px; } .buttonimgright {      display: inline-block;     background: #cc0000 url('insert-right-image.png');     width: 15px;     height: 20px; }  .buttonimgleft {      display: inline-block;      background: #cc0000 url('insert-left-image.png');     width: 15px;     height: 20px; }   {      height: 20px;     color: #000;     background: #cc0000;     font-size: 16px; } 

here's fiddle: http://jsfiddle.net/vexg3/1/

add vertical-align:top; links , image divs.

jsfiddle example

.buttonimgright {     display: inline-block;     background: #cc0000 url('insert-right-image.png');     width: 15px;     height: 20px;     vertical-align:top; } .buttonimgleft {     display: inline-block;     background: #cc0000 url('insert-left-image.png');     width: 15px;     height: 20px;     vertical-align:top; } {     height: 20px;     color: #000;     background: #cc0000;     font-size: 16px;     vertical-align:top; } 

Comments

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

Enable autocomplete or intellisense in Atom editor for PHP -