div border positioning - css

Question

I am having trouble positioning a border in a div id. The border doesn't follow the text within the div.
My HTML looks like this:
<div id="menu-left-top">
<ul class="menu-left-top">
<li>Kategorier</li>
</div>
<div id="menu-left">
<ul class="menu-left">
<li>Lamper</li>
<li>Møbler</li>
<li>Kunst</li>
<li>Design</li>
</div>
And this is my CSS:
#menu-left-top {
width:195px;
height:1em;
margin-top:5px;
border-top-style:solid;
border-width:thin;
border-color: #999;
}
ul.menu-left-top {
list-style-type: none;
height:1em;
}
ul.menu-left-top li{
}
ul.menu-left-top li a{
color:#000;
font-size:12px;
text-decoration:none;
font-family: "Gill Sans light";
}
ul.menu-left-top li a:hover{
color:#cf0036;
font-size:12px;
text-decoration:none;
font-family:"Gill Sans light";
font-weight:300;
}
#menu-left {
width:195px;
max-height:4em;
margin-top:5px;
border-top-style:solid;
border-bottom-style:solid;
border-width:thin;
border-color: #999;
}
ul.menu-left {
list-style-type: none;
}
ul.menu-left li{
}
ul.menu-left li a{
color:#000;
font-size:12px;
text-decoration:none;
font-family: "Gill Sans light";
}
ul.menu-left li a:hover{
color:#cf0036;
font-size:12px;
text-decoration:none;
font-family:"Gill Sans light";
font-weight:300;
}
You can see the result here. It's the navigation to the left that is my current problem. As you can see, the div floating right also has faults, but I don't know if it has anything to do with my initial problem?

Answer 1

No issue buddy, but for this also we dont need to separate the first menu item from others,
check these,
your html code will be like this :
<div id="menu-left">
<ul class="menu-left">
<li class="first">Kategorier</li>
<li>Lamper</li>
<li>Møbler</li>
<li>Kunst</li>
<li class="last">Design</li>
</ul>
</div>
if you want it like this
then you can use this css :
.first { border:#000 solid; }
.last{ border-bottom:#000 solid; }
and if you want it like this then you can use this :
.first { border-top:#000 solid; }
.last { border-bottom:#000 solid; }
you can use this for this
.first { border-top:#000 solid;
border-bottom:#000 solid; }
.last{ border-bottom:#000 solid; }

Answer 2

Remove the max-height property of the menu-left div.

Answer 3

there is a max-height? remove max-height:4em; or you can make it height:auto;

Answer 4

You have not closed your ul tags in this way , as you start any html tag also you have to end the html tag, this is for most of the m\html tags, so this is the main fault here, firstly you need to close your ul's ,
<div id="menu-left-top">
<ul class="menu-left-top">
<li>Kategorier</li>
</ul>
</div>
<div id="menu-left">
<ul class="menu-left">
<li>Lamper</li>
<li>Møbler</li>
<li>Kunst</li>
<li>Design</li>
</ul>
</div>
And the massive border around your list elements are coming due to
border-top-style:solid;
border-bottom-style:solid;
this is not a proper way to bordering, you can use as border:2px soild #00000; , and for more on this kindly update your layout here, just give me a blueprint of how you want to make it look, then i will help you in formatting these. Cheers. and use height:auto also

Answer 5

Use html format like this , as we do not need to differ the top menu, we can achieve this via this thing :
use this html code :
<div id="menu-left">
<ul class="menu-left">
<li class="first">Kategorier</li>
<li>Lamper</li>
<li>Møbler</li>
<li>Kunst</li>
<li>Design</li>
</ul>
</div>
and then the css changes are as :
.first { border-top:#000 solid; }
ul.menu-left li{
border-bottom:#000 solid;
}
this will make something like this, and border styles you can change according to you, if any queries then feel free to ask,