CODEWITHSUNDEEP
htmlcsshtml-lists
Tithos
Tithos

Reputation: 1437

Unordered list bug

I am having a layout problem in a ul. For some unknown reason the first li in my ul is being pushed down. See picture.

ul problem

Here is my html:

         <ul class="mobile-group">
            <li>
                <a href="#" class="link">
                    <span class="mag-glass">&#9906</span>
                </a>
            </li>
            <li>
                <a href="#" class="link">
                    <img src="http://placehold.it/50x40&text=LafLife"> &#8711;
                </a>
            </li>
        </ul>

and my css:

.mag-glass{
    color: #999;
    font-size: 2em;
    vertical-align:middle;
    display:inline-block;
    line-height: .5;
    box-sizing: border-box;
    clear: both;
    -webkit-transform: rotate(45deg); 
       -moz-transform: rotate(45deg); 
         -o-transform: rotate(45deg);
}

ul.mobile-group{
    float: right;
}

ul.mobile-group li{
    display: inline-block;
    list-style: none;
    height: 40px;
    padding: 0em .75em 0 .75em;
    box-sizing: border-box;
    border-left: 1px solid #888;
}

ul.mobile-group li a{
    color: #999;
    text-decoration: none;
}

Please, any help is great.

Upvotes: 0

Views: 71

Answers (2)

arnonate
arnonate

Reputation: 495

Was able to fix this with the following css....

ul.mobile-group {
    float: right;
}

ul.mobile-group li{
    display: inline-block;
    list-style: none;
    height: 40px;
    position: relative;
    padding: 0em .75em 0 .75em;
    border-left: 1px solid #888;
}

.mag-glass{
    position: absolute;
    top: -6px;
    color: #999;
    font-size: 2.2em;
    display: block;
    -webkit-transform: rotate(45deg); 
       -moz-transform: rotate(45deg); 
         -o-transform: rotate(45deg);
}

ul.mobile-group li a{
    color: #999;
    display: block;
    height: 40px;
    min-width: 16px;
    text-decoration: none;
}

I just positioned the mag-glass absolutely inside the link block because it seemed like the icon was actually taller than 40px and pushing the first block down.

Here is it working... http://codepen.io/anon/pen/Etxfz

Upvotes: 1

Joe Austin
Joe Austin

Reputation: 557

remove the line-height. That should do the trick

Upvotes: 0

Related Questions