Navigation height

[davy_yg]

index.php

<link rel="stylesheet" href="css/styleT.css"> <!-- Resource style -->

<div id="navigation"><!-- <img src="images/navigation bar.jpg" alt="nav bar"> --></div> 

<div id="navcontainerbar">
<ul>

<li style="height: 20px;"><a href="index.php">Home</a></li>
    <li>

    <ul id="nav">
        <li><a class="fly" href="#">SIP</a>
            <ul class="dd">
                <li><a href="portfolio.php">Web Porfolio</a></li>
                <li><a href="marketing-portfolio.php">Marketing Portfolio</a></li>             
            </ul>
        </li>     
    </ul>

    </li>    
<li class="service"><a href="services.php">LMS</a></li>
<li><a href="blog.php">Library</a></li>
<li><a href="contact.php">Roomplus</a></li>
<!--<li><a href="career.php">CAREER</a></li>
<li><a href="feedback.php">#</a></li>-->

</ul>
</div>

styleT.css

/* navigation */

#navigation {margin: -5px 0 0 -150px; min-width: 100%; height: 40px; background-color:#655700; border-radius: 0; position: fixed; z-index:2;}

#navcontainerbar { height: 40px; margin: 50px 0 0 250px; position: fixed; z-index:2; }
#navcontainerbar ul { height: 40px; margin: 0 0 0 0; list-style-type: none; margin: 0; padding: 0; text-align: center; }

#navcontainerbar ul li { height: 40px; display: inline; font-family:arial; }
.service{ margin: 0 0 0 120px; position: relative; display: inline; font-family:arial;}
#navcontainerbar ul li a { height: 40px; text-decoration: none; /*padding: .2em 1em;
*/ padding: 50px 10px 40px 10px; color:white;  background-color: #655700;height: 109px; }
#navcontainerbar ul li a:hover { height: 40px; color:white; background-color:#fef900; }

/* navigation pop up */

/* main menu styles */
/*
#nav,#nav ul {
    background-image:url(./images/tr75.png);
    list-style:none;
    margin:0;
    padding:0;
}
*/
#nav {
    margin-left:-150px;
    height:20px;
    padding-left:5px;
    padding-top:5px;
    position:absolute;
    top: -20px;
    left: -310px;
    z-index:2;
}
#nav ul {
    left:-9999px;
    position:absolute;
    top:10px;
    width:auto;
}

#nav ul ul {
    left:-9999px;
    position:absolute;
    top:0;
    width:auto;
}

#nav li {
    margin: 150px 0 0 250px;
    float:left;
    margin-right:5px;
    position:relative;
}
#nav li a {
    margin: -180px 0 0 140px;
    background:#655700;
    /*background:#c1c1bf;*/
    color:#000;
    display:block;
    float:left;
    font-size:16px;
    padding:0px;
    text-decoration:none;
    width: 85px;
    height: 110px;
}
#nav > li > a {
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    -o-border-radius:0px;
    border-radius:0;
    overflow:hidden;
}
#nav li a.fly {
    /*background-color: #c8fa7f;*/
    background-color: #655700;
    z-index: 2;
}
#nav ul li {
     margin: 30px 0 0 0;
     top: 75px;
}
#nav ul li a {
     background-color: #e1d2a2;
     color:#000;
     padding: 10px 10px 15px;
     width:150px;
}
#nav ul li a.fly {
    padding-right:10px;
}

/*hover styles*/
#nav li:hover > a {
    background-color: #fef900;
    color:#000;
}

/*focus styles*/
    #nav li a:focus {
    outline-width:0;
}

/*popups*/
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
    left:0; z-index: 2;
}
#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
    left:140px;
}

/* navigation pop up end */

I have been trying to make the li box height smaller but unable to do so - I wonder why? I have try adding height to the css and also inserting css in the : <li style="height: 20px;">

and still unable to change the height in the actual.

[hericles]

you should use the line-height option on the <ul> element. Height has no effect

[davy_yg]

I have tried using line-height for all of them. None, of them change the line-height correctly. I cannot makes the line height as small as I want.

[hericles]

I'm not sure what you're doing wrong then but line-height applied to the <ul> element affects the height of each <li> in the list.
I just tried it on your own code and I could alter the line-height. With a line-height of zero they all compacted on top of each other, which is as small a line-height as you can get.

[davy_yg]

I still do not get it. Can you please post the code that works ? or from my own code that you have revised ?

[hericles]

Sure, I added:
line-height: 20px; // or whatever you need
to the <ul> element.

[Violet_82]

Sorry to batter in, can you not use the height applied to the list item instead, rather than messing around with the line-height?