menu not working in CSS

[KevinCB]

Hi

I'm working on a site, but can't seem to get it 100% working in other browsers apart from IE. The problem I'm having is that the menu on the left side isn't showing correctly inside the box.

There's no borders round the links, like there are in IE, and the image in the header doesn't appear in the header, but on top of it instead.

Here's my CSS:

body{
 margin: 0;
 padding:0;
 background: #8CCCD3;
 color: #333333;
 }
 
#hdr{
 height:35px;
 background:#F9E27F;
 color:#000000;
 border: solid #000000;
 border-width: 1px 0px;
 margin:10px 0 0 0;
 }
#lh-col{
 position: absolute;
 top: 132px;
 left: 10px;
 width: 180px;
 border: 1px solid #000000;
 background: #00565B;
 color: #333333;
 margin: 0px;
 padding: 0px;
 height: 400px;
 }
#rh-col{
 margin: 20px 20px 20px 220px;
 border: 1px solid #000000;
 background: #ffffff;
 color: #333333;
 padding: 20px;
 position :relative;
 }
#menu {
 display:block;
 border-top:1px solid #fff;
 width:168px;
 height:45px;
 }
#menu ul {
 padding:0;
 margin:0;
 list-style-type:none;
 } 
#menu li {
 display:block;
 width:168px;
 height:45px;
 }
#menu a, .menu a:visited {
 display:block;
 width:168px;
 height:45px;
 padding:4px 16px;
 color:#fff;
 text-align:right; 
 background:#00565B;
 border-bottom:1px solid #fff;
 text-decoration:none;
 }
#menu a:hover {
 color:#000; 
 background:#F9E27F;
 text-align:right;
 }

Thanks

[Robin_reala]

The border issue is probably something to do with this:

 border: solid #000000;
border-width: 1px 0px; 

The shorthand requires you to set a width. I'd do something like this:

 border: 1px solid #000;
border-left-width: 0; 
border-right-width: 0;

[KevinCB]

Still doesn't work in FF and the others.

When looking at it, it's as if the menu and logo image are just floating right on top of the left div and header div that is created using the CSS.