Why are the text sticking below the image inside a CSS unordered list menu

Question

I have this JSFiddle which works correctly (the CSS is just a barebone): http://jsfiddle.net/b6w9yfq3/1/

HTML:

<div id="navMenu" class="navMenu hidOverflow">
                            <ul class="brClear">
                                <li><a href="#portfolio" class="jumplink"><span class="navIcon"><img src="theImages/portfolio.png" /></span>Portfolio</a></li>
                                <li><a href="#about" class="jumplink"><span class="navIcon"><img src="theImages/about.png" /></span>About</a></li>
                                <li><a href="#contact" class="jumplink"><span class="navIcon"><img src="theImages/contact.png" /></span>Contact</a></li>
                                <li><a href="#forum" class="jumplink"><span class="navIcon"><img src="theImages/forum.png" /></span>Forum</a></li>
                            </ul>
                        </div>

Also, How do I make it so the extra space at the end of the menu isn't there. I originally had 5 entries but when I shortened it to 4, the 5th space is still showing up.

How do I resolve the issue.

Answer 1

This is very straightforward. The image used for Contact has 21px of height, the rest of the icons all have 26 px of height.

Simply add 5px of padding to the bottom of that particular icon, or stretch it, up to you.

For part 2, change the width of the li elements from 20% to 25%.

.navMenu ul li{
    display: block;
    float: left;
    width: 25%;
}

That should do it.