0

hi i just wanted to code a site like BBC just for practice while doing this i got an error in li item of a ul i don't know the problem but when i give it a border-right the border take more height then the original menu, i'm pasting my code here please check it and help me??

<html>
<head>
<title>BBC</title>
<style>
body{
    margin:0;
    font-family:Arial,Helvetica,freesans,sans-serif;

    }

#top{
    width:100%;
    height:50px;

    }
.keepcenter{
    width:1100px;
    margin: 0 auto;
}
#logo{
    border-right:1px solid #CCCCCC;
    float:left;
    padding-right:5px;
    height:100%;
    }
#signin{
    font-weight:bold;
    font-size:0.9em;
    border-right:1px solid #CCCCCC;
    width:200px;
    height:100%;
    float:left;
}
#signin img{
    position:relative;
    top:5px;
    margin-left:15px;
    }

#signin p{
        display:inline;
        position:relative;
        top:1px;
        padding-left:5px;
}
#menutop{
    float:left; 
}
#menutop ul{
    list-style-type:none;
    margin:0;
    padding:0;

}
#menutop li{
    padding:15px 20px 10px 20px;
    display:inline;
    font-weight:bold;
    font-size:0.9em;
    float:left;
    border-right:1px solid #CCCCCC;
    height:100%;

}
</style>
</head>

<body>
<div id="container">
    <div id="top">

    <div class="keepcenter">

   <div id="logo">
   <img src="images/logo.jpg" />
   </div>
   <div id="signin">
   <img src="images/signicon.png" /><p>Sign In</p>
   </div>
   <div id="menutop">
   <ul>
   <li>Home</li>
   <li>Home</li>
   <li>Home</li>
   <li>Home</li>
   <li>Home</li>
   </ul>
   </div>

   </div>
</div>


</div>

</body>

</html>

Edited by vampz

2
Contributors
1
Reply
21
Views
2 Years
Discussion Span
Last Post by bigtalk
0

Adding the border -right is not what is effecting the height of the li tags.
The div #top has a defined height of 50px. Everything within that is inheriting that height by having their heights set at "100%".
The div #menutop is inheritting that height because it is a div with display:block (default display for a div). The li tags within it are set to have a height of "100%". That sets their height to 50px. You are then adding 15px padding to the top of the li tags and 10px padding to the bottom of the li tags. A total of an additional 25px. This makes the height of the li tags 75px.
When you add the border -right to the li tags, the border is showing you that 75px of height.
To fix this, take into account the padding inside the li tags when setting the height.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.