Question

http://mohrdevelopment.com

As you can see, i have a problem with my navigation bar. The images are being cut off (stays on line with text), and i can’t figure out how to fix it.

            <ul class="navigation">
            <li class="navbar"><a href="index.html" class="navbarlink" ><em class="home"/><b>Home</b></a></li>
            <li class="navbar"><a href="second.html" class="navbarlink"><em class="photos"/><b>Photos</b></a></li>
            <li class="navbar"><a href="index.html" class="navbarlink"><em class="projects"/><b>Projects</b></a></li>
            <li class="navbar"><a href="index.html" class="navbarlink"><em class="about"/><b>About</b></a></li>
            <li class="navbar"><a href="index.html" class="navbarlink"><em class="contact"/><b>Contact</b></a></li>
        </ul>

CSS:

     .navigation {
        background:#1841c8 url(Navigation/Navigation/nav_background.png);
        height:40px;
        margin-bottom:0px;
        display:block;
    }

    .navbar {
        display:inline-block;
        line-height: 40px;
        margin-right:40px;
        }

    .navigation .navbar .navbarlink{
        color:#FFFFFF;
        padding: 11px 5px 11px;
    }

    .navigation .navbar .navbarlink b{
        padding-left:40px;
        padding-right:5px;
    }

    .navigation .navbar .navbarlink:hover{
        color:#00CCFF;
        background: url(Navigation/Navigation/nav_hover.png);
        text-decoration:none;
        padding: 11px 5px 11px;
    }



    /*Navigation bar icons*/
    .navigation .navbar .navbarlink em.home{
        background-image: url(Navigation/Icon_images/home.png);
        background-repeat: no-repeat;

    }

    .navigation .navbar .navbarlink em.photos{
        background-image: url(Navigation/Icon_images/Photo.png);
        background-repeat: no-repeat;
    }


    .navigation .navbar .navbarlink em.projects{
        background-image: url(Navigation/Icon_images/projects.png);
        background-repeat: no-repeat;
    }


    .navigation .navbar .navbarlink em.about{
        background-image: url(Navigation/Icon_images/about.png);
        background-repeat: no-repeat;
    }

    .navigation .navbar .navbarlink em.contact{
        background-image: url(Navigation/Icon_images/Contact.png);
        background-repeat: no-repeat;
    }

Would be happy if someone would help me troubleshoot it!

Answer 1

You need to set the height of the tags that your images are in! Unfortunately, inline-elements don’t allow you to set their height, so you need to change the display property as well. For starters, you’ll want to add:

.navigation .navbar .navbarlink em {
    height: 32px;
    display: inline-block;
}

You can actually remove all <b> tags from your code (you shouldn’t be using <b> anyway), and instead just add the padding into your em:

.navigation .navbar .navbarlink em {
    font-weight: bold; /* emulate the <b> tag */
    height: 32px;
    padding: 0 5px 0 40px; /* padding: top right bottom left */
    display: inline-block;
}

There are a couple things that will make your life a little easier. You can vertically center the image in the navbar by adding vertical-align: middle:

.navigation .navbar .navbarlink em {
    font-weight: bold;
    height: 32px;
    padding: 0 5px 0 40px;
    vertical-align: middle;
    display: inline-block;
}

And you can vertically-center the text by adding a background-position to the image. I also added some padding to the bottom to raise the text a little:

.navigation .navbar .navbarlink em {
    background-position: 0 50%;
    font-weight: bold;
    height: 32px;
    padding: 0 5px 6px 40px;
    vertical-align: middle;
    display: inline-block;
}