Unordered list bug

Question

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.

arnonate · Accepted Answer · 2013-11-09 20:27:53Z

1

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

answered Nov 9, 2013 at 20:27

arnonate

4954 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tithos Over a year ago

why is what i am seeing in code pen working and what is on my site not?!

arnonate Over a year ago

You must have some other styles over-riding the menu styles. Are you using bootstrap? Can you use an inspector to see if something else in your stylesheet is conflicting?

Joe Austin · Accepted Answer · 2013-11-09 19:52:57Z

0

remove the line-height. That should do the trick

answered Nov 9, 2013 at 19:52

Joe Austin

5577 silver badges25 bronze badges

1 Comment

Tithos Over a year ago

that fixed the first li, but pushed down the last one. with no line height, how can i vertically aligne the mag glass?

Collectives™ on Stack Overflow

Unordered list bug

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related