Hi Guys,

 

Can you help me with this.

 

How can I get rid of these spaces between the buttons?

 

 

HTML:

<div id="sidemenu">
<h5 class="headerbar">Quick Links</h5>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<div><img src="images/side_bottom.jpg" width="206" height="37" align="left" /></div>
</div>

 

CSS:

.headerbar{
background-image: url(images/side_top.jpg);
text-align: center;
height: 33px;
line-height: 33px;
}
#sidemenu{
width:206px;
top: 20px;
position: absolute;
left: 36px;
}
#sidemenu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#sidemenu li a
{
background: #fff url(images/side.jpg) repeat-x left bottom;
height: 27px;
line-height: 20px;
float: left;
width: 206px;
display: block;
text-decoration: none;
text-align: center;
color: #000;
}
#sidemenu li a:hover{
color:#113C9A
}

 

Thanks.

i suspect it will be the line-height: 33px; in headerbar. remove that and it will be fine.

I removed it but still the same.

 

This is only an issue in ie6!

aaah my bad, i missread your code.

 

Try setting some stuff for sidemenu li

example

#sidemenu li {
padding: 0;
margin: 0;
}

Thanks for the help.

 

I found the fix.

 

display: inline-block;