CODEWITHSUNDEEP
htmlcsswebstylesheet
Administrateur
Administrateur

Reputation: 901

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?

Upvotes: 2

Views: 817

Answers (4)

luckyamit
luckyamit

Reputation: 749

you have to also give line-height in your anchor's tag

here is the complete solution //HTML

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

    </li>
    <li><a href="#">Mnu Itm 1</a>

    </li>
    <li><a href="#">Mnu Itm 2</a>

    </li>
</ul>

//CSS

* {
margin: 0;
padding: 0;
 }
.div_mn {
text-align: center;
position: relative;
padding: 10px;
min-width: 200px;
}
.div_mn ul {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
}
.div_mn ul li {
float: left;
list-style: none;
}
 .div_mn ul li a {
font-family: Arial;
font-size: 12px;
padding: 11px 35px;
text-decoration: none;
display: block;
color: #FFFFFF;
line-height:20px; ////give line height approx or exact your image height
background: -webkit-linear-gradient(top, #0176B4, #005e90 49%, #005e90 50%, #00527d);
background: -moz-linear-gradient(top, #0176B4, #005e90 49%, #005e90 50%, #00527d);
background: -ms-linear-gradient(top, #0176B4, #005e90 49%, #005e90 50%, #00527d);
background: -o-linear-gradient(top, #0176B4, #005e90 49%, #005e90 50%, #00527d);
background: linear-gradient(to bottom, #0176B4, #005e90 49%, #005e90 50%, #00527d);
}

update Fiddle

Upvotes: 0

Sudharsun
Sudharsun

Reputation: 761

While increasing the height of the image add inline style to the li to reduce the top padding that will fix your problem

FIX

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

Upvotes: 0

Alberto Rivas
Alberto Rivas

Reputation: 80

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

Upvotes: 3

Vladimir
Vladimir

Reputation: 387

add to your li items next code

li {
display: block;
float: left;
}

This must prevent your issue

Upvotes: 1

Related Questions