CSS menu gaps on hover

Question

I am having trouble getting my navigation hover option to hover seamlessly. There is a 1-2 pixel size gap between my menu links. I have looked at the css and used the inspect element option in Firefox but I can't seem to find what is causing this issue. Any help with resolving this would be greatly appreciated and I will mention that I am a beginner when it comes to css so some of the css might not be "standard practice".

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="IM3._0._Default" %>
<link href="StyleSheet1.css" rel="stylesheet" />
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div class="TopContainer">
            <div class="Header">

            </div>
            <div class="BumperBar1">

            </div>
            <div class="NavBar">
                <ul id="navlist">
                <li><asp:LinkButton ID="LinkButton1" runat="server" CssClass="LinkButtons">Link 1</asp:LinkButton></li>
                <li><asp:LinkButton ID="LinkButton2" runat="server" CssClass="LinkButtons">Link 2</asp:LinkButton></li>
                <li><asp:LinkButton ID="LinkButton3" runat="server" CssClass="LinkButtons">Link 3</asp:LinkButton></li>
                <li><asp:LinkButton ID="LinkButton4" runat="server" CssClass="LinkButtons">Link 4</asp:LinkButton></li>
                <li><asp:LinkButton ID="LinkButton5" runat="server" CssClass="LinkButtons">Link 5</asp:LinkButton></li>
                <li><asp:LinkButton ID="LinkButton6" runat="server" CssClass="LinkButtons">Link 6</asp:LinkButton></li>
                <li><asp:LinkButton ID="LinkButton7" runat="server" CssClass="LinkButtons">Link 7</asp:LinkButton></li>
            </ul>
        </div>
    </div>
    <div class="MainContent">

    </div>
</form>
</body>
</html>

body {
    background-color: #D9D9D9;
    padding: 0px;
    margin: 0px;
}

.TopContainer{
    background-color: white;
    width: 100%;
    border-bottom: 1px solid;
    border-bottom-color: Black;
    height: 100px;
    display: table;
}

.Header{
    background-color: White;
    width: 1000px;
    margin: auto;
    height: 67px;
    display: block;
}

.BumperBar1{
    height: 3px;
    width: 100%;
    background-color: #999;
    display: block;
}

.NavBar{
    background-color: White;
    width: 1000px;
    margin: auto;
    height: 30px;
    display: block;
}

#navlist{
    margin: 0;
    padding-left: 10px;
}

#navlist li{
    display: inline-block;
    height: 30px;
    margin: 0;
    padding: 0;
}

#navlist li:hover{
    background-color: #57A1D3;
}

#navlist li a{
    height: 30px;
}

.MainContent{
    background-color: White;
    width: 1000px;
    margin: auto;
    min-height: 800px;
}

#form1{
    margin: 0;
}

.LinkButtons{
    padding-right: 13px;
    padding-left: 13px;
    line-height: 30px;
    margin: 0;
    color: #57A1D3;
    text-decoration: none;
}

.linkbuttons:hover{
    color: white;
}

score 3 · Accepted Answer · answered Aug 27 '14 at 20:46

3

Inline elements are sensitive to white space, so you need to remove it by either:

Removing the white space between the li elements in your code, ex </li><li>
Floating the list item elements left
Using HTML comments to occupy the space between list elements, ex </li><li>
Setting the font size on the <ul> to zero, and then resetting it to whatever you need on the <li>

answered Aug 27 '14 at 20:46

j08691

190,436
28
232
252

Yeah the float: left; fixed it. I knew it must have been something simple but just couldn't see it. Thanks for the help with this! – cdouglas10683 Aug 27 '14 at 20:52

score 1 · Answer 2 · answered Aug 27 '14 at 20:48

1

Try adding float: left to #navList li

#navlist li{
    display: inline-block;
    height: 30px;
    margin: 0;
    padding: 0;
    float: left;
}

See it work here: http://jsfiddle.net/zmawbhvq/

answered Aug 27 '14 at 20:48

allen1

704
4
11

CSS menu gaps on hover

2 Answers2