Search code examples
htmlcsswebstylesheet

CSS menu item getting misaligned

I have this CSS menu strip: http://jsfiddle.net/CgGBL/1/

enter image description here

It works fine, but if I try to use an image that is a bit larger on the first <li> the first menu item gets misaligned. For example, I added this height and width to the image's tag:

height="20" width="22"

... now the first menu item is misaligned (even though the image is still smaller than the first <li> height and width):

enter image description here

How can I fix my code to allow me to use a larger image and keep all menu items aligned?

Solution

  • The problem is due the anchor's css position. Include the following style to ".div_mn ul li a":

    display: block;

    And reduce the padding top and bottom in anchors with img inside.

    <a href="#" style="padding-top: 7px; padding-bottom: 7px;"><img height="20" width="22" src="http://images.wikia.com/uncyclopedia/images/7/7d/Icons-flag-us.png" alt="Smiley face" /> </a>

    The final code:

    http://jsfiddle.net/MxtK6/

    Hope it helps