List Item, Two Hyperlinks CSS Design

Question

I need to have a single <li> element which has two buttons inside of it as follows:

<li>
    <a href="#" class="left">The title</a>
    <a href="#" class="right"></a>
</li>

With a layout of the button similar to the following:

 ____________
|_________|__|

The background would span the entire button, the <a> tag on the left would be filled with text, the one on the right with an alpha transparent button to overlay the background of the <li> element. This is the CSS I've got.

#left ul#main-menu li.li-add a {
    display:block;
    padding:4px 6px 6px 6px;
    text-decoration:none;
    color:#fff;
    font-size:12px;
    margin:0;
}

#left ul#main-menu li.li-add {
  height:25px;
  margin:0;
  padding:0;
  background: url('button_back.gif') no-repeat;
}

#left ul#main-menu li.li-add a.left {
  width:106px;
  float:left;
  padding:5px 6px 6px 6px;
}

#left ul#main-menu li.li-add a.left:hover {
  background: url('button_back_hover.gif') no-repeat;
}

#left ul#main-menu li.li-add a.right {
  float:left;
  text-align:center;
  font-size:16px;
  padding:4px 0 0 0;
  margin:0;
  height:21px;
  width:27px;
  font-weight:bold;
}

#left ul#main-menu li.li-add a.right:hover {
  background: url('button_back_hover.gif') no-repeat center right;
}

I'm doing a similar thing with all the other list items, except they don't have the "add" button on the right hand side. The problem I'm having is that a two pixel gap is being introduced pushing the other <li> elements down. I'm not sure what I'm doing wrong really. I can do margin-bottom:-2px but all that does is make an area of 2 pixels which isn't clickable in the element below.

EDIT

It was the float actually.

#left ul#main-menu li.li-add a.right {
  float:left;
  text-align:center;
  font-size:16px;
  padding:4px 0 0 0;
  margin:0;
  height:21px;
  width:27px;
  font-weight:bold;
}

float:left shouldn't have been in there, for some reason doing this causes an extra gap to be created. shrug.

Answer 1

Hi Kezzer,

I think your li problem is a red herring. I was able to have the list layout nice and tight by adding:

height: 14px; /* Add to '#left ul#main-menu li.li-add a.left' */

You never specified a height for the left a tag, it's auto height was taller than the 25px specified for the .right a tag. You are setting a height on the li tags, but they are inline elements, not block elements as you've made the a tags. Only block elements can have specified heights. Hope this helps.

Good luck!