Question

I’ve been trying to change all my properties in my CSS in order to fix my current problem with my navigation bar buttons, but in vain.

When hovered over, the buttons exceeds the height of the navigation-bar background, which they aren’t supposed to.

http://www.mohrdevelopment.com

My HTML:

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

My CSS:

body {
        font-family:sans-serif;
        background: url(images/background3.png);
    }

    .navigation {
        background:#1841c8 url(Navigation/Navigation/nav_background.png);
        height:40px;
        margin-bottom:0px;
        font-size: 0; /*remove whitespace*/
        display:block;
        min-width:625px;
    }

    .navigation li{
        display:inline-block;
        line-height: 40px;
        font-size:16px;
            }

    .navigation li a{
        display:block;
        color:#FFFFFF;
        padding: 11px 5px 15px;
    }

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

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

    .navigation .current a {
        color:#FFFFFF;
        background:url(Navigation/Navigation/nav_hover.png);
        padding-bottom:11px;
    }


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

    }

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


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


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

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

    a {
      Color:blue;
      Text-decoration:none;
    }

    h1 {
        background: url(images/Header.png);
        text-indent:-9999px;
        width:1092px;
        height:132px;
        margin:auto;

    }


    .content, aside {
        height:600px;
    }

    .wrap {
          margin:auto;
          width:80%;
          background:yellow;
        }

    .content {
        background:teal;
        float:left;
        width:80%;
        height:auto;
        min-width:500px;
        display:inline;

    }

    aside {
        background:lightblue;
        float:left;
        width:20%;
        min-width:125px;
        display:inline;
    }

    aside ul {
        padding-left:1px;
        list-style:none;
    }


    ul a {
        text-decoration:none;
        color: #666;
    }

    ul a:hover {
        text-decoration:underline;
        color:black;
    }

    .sidebarli {
    }

    li {
        list-style:none;
        margin-bottom:20px;}

    label {
        display: block;
        cursor: pointer;
        color: #292929;
        font-family:sans-serif;
        padding-bottom:8px;
    }

    form ul {padding-left:0px;
    }

    textarea {
        width:400px;
        height:220px;

    }

Answer 1

I think issue lies in Navigation/Navigation/nav_hover.png image. You are applying repeat to your background image.

Please use

.navigation li a:hover 
{
    background: url("Navigation/Navigation/nav_hover.png") **no-repeat** scroll 0 0 transparent;
    color: #00CCFF;
    padding: 11px 5px 10px;
    text-decoration: none;
}

in style.css.

Let me know if this fixed the issue.