CODEWITHSUNDEEP
htmlcss
Troy Cost
Troy Cost

Reputation: 67

Menu position in header section always leaves gap below buttons?

I have tried manipulating position, padding, margin but nothing works to reduce the gap below the floated ul menu. I am following Matthew Jame's Taylors perfect 3 column where he uses the following CSS for the menu 

        #header ul
{
        clear:left;
        float:left;
        width:100%;
        list-style:none;
        margin:10px 0 0 0;
        padding:0;

}
    #header ul li 
{
        display:inline;
        list-style:none;
        margin:0;
        padding:0;

}
    #header ul li a 
{
        display:block;
        float:left;
        margin:0 0 0 1px;
        padding:3px 10px;
        text-align:center;
        background:#eee;
        color:#000;
        text-decoration:none;
        position:relative;
        left:15px;
        line-height:1.3em;

}

However, when I try the same code my ul menu ends up floating below into the paragraph instead of being above the upper border of the paragraph that it should be flush against. Hence I have to use positioning first to raise it to the border with values like bottom : 20.2px, then I have to try to use things like padding values on the bottom of the buttons to try and make it sit flush. Here is my code:

#header ul
{
    margin : 0 ;
    padding : 0 ;
    float : left ; 
    clear : left ;
    list-style : none
}

#header ul li.headlist
{
    padding : 0 ;
    display : inline ;
    margin : 0 ;
    list-style : none
}

#header ul li.headlist 
{
    list-style-type : none ;
    margin : 0 
}

ul li.headlist a 
{
    text-decoration : none ;
    float : left ;
    display : block ;
    text-align : center ;
    font : 14px Arial "sans-serif" ;
    font-color : black ;
    background-color : #E9E9E9 ;
    padding : 6px 15px 0.5px ;
    border-radius : 4px 4px 0px 0px ;
    line-height : 1.0em ;
    position : relative ;
    left : 18px ;
    bottom : 20.2px ;
    margin : 0px 0px 0px 1px
}

ul li.headlist a span.headspan
{
    vertical-align : top ;
    margin : 0 
}

ul li.headlist a:hover
{
    background : #369 ;
    color : fff
}

I have been trying to figure this out for some time without posting a question, but nothing in the code explains why my menu floats down to the paragrapph and needs bottom : 20.2 while Matthew Taylor's doesn't seem to need any such positioning. Also, even if the padding and positioning make the buttons look flush in IE or Chrome, they are positioned differently in Firefox.

Here is my JS Fiddle

Upvotes: 1

Views: 47

Answers (1)

fanfavorite
fanfavorite

Reputation: 5199

Because the ul is floated, you need to clear the next element, which is the p tag:

#lower-head {
   clear: both;
}

Then you can remove the bottom positioning.

Upvotes: 1

Related Questions