Menu list and IE7

As per following image, I have a problem with a menu list:



CSS for menu list:

#sidebar ul {
    list-style-type: none;
    margin: 0 ;
    padding: 0;
}

#sidebar ul li {
    margin: 0 !important;
	margin: 0 0 20px 0;
	padding: 0;
    height:27px;
	width: 210px;
    line-height:1.5em;
	background:url(img/sidebarli.png) no-repeat;
}

#sidebar ul li a {
    margin: 0 !important;
	margin: 0 0 0 0;
    color: #C64F27;
    text-decoration: none;
	font-weight: bold;
	font-size: 15px;
    padding: 0 0 0 10px;
    display:block;
}

#sidebar ul li a:hover {
    color:#C64F27;
	margin: 0 !important;
	margin: 0 0 0 0;
    text-decoration: underline;
}

#sidebar ul ul {
    list-style-type: none;
    margin: 0 ;
    padding: 0;
}

#sidebar ul ul li {
    height:5px;
	width: 210px;
	margin: -4px 0 0 0;
	padding: 0;
	background:url(img/sidebarbottom.png) no-repeat;
}

Code (markup):

As you can see, the list items show a 2px white space at the bottom, and the ul li li items a bigger space.

If I change the value on margin, nothing changes...

 

Hard to know exactly what's going on without the HTML too, but have you tried "float:left;width:100%;" on the <li> tags?

 

In IE, you need to specify a fixed width for:

#sidebar ul li a {
     width: (how ever big it is);
}

Code (markup):

that's all.

 

Thanks a lot, it works good.