CODEWITHSUNDEEP
htmlcss
user2190690
user2190690

Reputation: 2034

Mysterious space between two divs

I'm creating an HTML navigation menu that's displayed when a touch event occurs.

Between what is going to be the button to toggle on/off the menu and the menu list is a gap that I can't get rid of, or even work out why it's there!

What's weird (to me) is if I add a 1px border to the menu list's containing block <div id="navContent"/> the gap disappears.

I've put a demo of the CSS and HTML issue into jsfiddle at the following URL http://jsfiddle.net/ufvmj4n9/

#container {
    position:relative;
    top: 0px;
    width:100%;
    height:100%;
}
#mobileMenuBtn {
    display: block;
    position: relative;
    opacity: 0;
    width:290px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    background-color:#00F;
    height:23px;
}
#navContainer {
    display:block;
    position: absolute;
    top:95px;
    width:100%;
    height:auto;
}
#navContent {
    /*border:1px solid green;*/
    position:relative;
    top:0px;
    height:350px;
    width:290px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(51,102,204,0.8);
}
#navList {
    position:relative;
    top:30px;
    list-style-type: none;
    width:100%;
    margin-left: 30px;
    text-align: left;
    padding:0;
}
.navText {
    position: inherit;
    display: list-item;
    left:0px;
    font-family: Verdana, "Trebuchet MS", Arial;
    font-size: 1.1em;
    font-weight: normal;
    color: #FFF;
    margin-bottom:30px;
    outline: none;
    text-align: left;
}
nav a {
    text-decoration: none;
}


<div id="container">
    <nav id="navContainer">
        <div id="mobileMenuBtn" style="opacity: 1;"></div>
        <div id="navContent">
            <ul id="navList">
                <li><a class="navText selectDisable" id="navItem5" tabindex="0" data-name="home">home</a></li>
                <li><a class="navText selectDisable" id="navItem4" tabindex="1" data-name="solutions">solutions</a></li>
                <li><a class="navText selectDisable" id="navItem3" tabindex="2" data-name="experience">experience</a></li>
                <li><a class="navText selectDisable" id="navItem2" tabindex="3" data-name="equipment">equipment</a></li>
                <li><a class="navText selectDisable" id="navItem1" tabindex="4" data-name="training">training</a></li>
                <li><a class="navText selectDisable" id="navItem0" tabindex="5" data-name="contact">contact</a></li>
            </ul>
        </div>
    </nav>
</div>

I firstly would love to know why this gap exists as I can't find a margin associated with it (I've used Chrome and Safari Developer Tools). Secondly how best to remove it (I'm presuming(hoping) without a negative 'top' value applied to the element id "navContent").

Thanks in advance for any help.

D

Upvotes: 0

Views: 131

Answers (2)

Benjamin
Benjamin

Reputation: 2670

The ul will hold a default margin value of 1em. You have to make it zero.

Try this

#navList{ 
   margin: 0; 
}

DEMO

Upvotes: 2

webkit
webkit

Reputation: 3369

You forgot to zero up your ul default styles:

#navList { margin-top: 0; }

Good luck!

Upvotes: 6

Related Questions