Inline display not working properly

Ok, so I created a table that has 6 buttons inside of it, each button displays additional options on mouseover (all done with css no js).

When I mouse over it pops out more buttons to either the left or right hand side but for some reason it keep displaying them vertically and I want them to be displayed horizontally.

Here is an example of what my current table is

<table id="buttons-table">
   <tr>
     <td>
  <a class="thumbnail" href="#"><img src="4000 button.png" border="0" /><span><ul><li><img src="4000 button.png" /><br /></li><li><img src="4000 button.png" /><br /></li><li><img src="4000 button.png" /><br /></li></ul></span></a>
<a class="thumbnail" href="#"><img src="5000 button.png" border="0" /><span><img src="4000 button.png" /><br /></span></a>
  </td>
  <td>
  <a class="thumbnail1" href="#"><img src="7000 button.png" border="0" /><span><ul><li><img src="4000 button.png" /><br /></li><li><img src="4000 button.png" /><br /></li><li><img src="4000 button.png" /><br /></li></ul></span></a>
<a class="thumbnail1" href="#"><img src="R9 button.png" border="0" /><span><img src="4000 button.png" /><br /></span></a>
  </td>
  </tr>

Code (markup):

This is my css for the table and mouseovers.

.thumbnail{

position: relative;

z-index: 0;

}



.thumbnail:hover{

background-color: transparent;

z-index: 50;
}



.thumbnail span{

position: absolute;

background-color: #354B5e;

z-index: 100;

padding: 0;

border-bottom: 5px solid hidden;

visibility: hidden;

display: inline;

}


.thumbnail:hover span{

visibility: visible;

top: -91px;

right: 325px;
}

.thumbnail span ul{
   display: table-row;
}

.thumbnail span ul li{
   display: inline;
   
   padding: 5px;
}

Code (markup):

Also, here is the css for the table if that helps

#buttons-table {

   padding: 0;

   width: 300px;

}

Code (markup):

I want the buttons to be displayed in a horizontal list rather than a vertical one.

 

Well, this isn't tabular data so why the table? Where's your alt text? Really I would question if those should even be images given that image menus are typically an inaccessible mess... you seem to have a number of 'classes for nothing' since there's a perfectly good ID on the outermost container... Of course the mere presence of the long deprecated BORDER attribute sends up warning flags since that nonsense has no business on any website written after 1997.

... and display:inline doesn't do jack **** when you set position:absolute -- that's your real problem. You want them to the side while APO, you need to add positioning using left, right, top or bottom.

position:absolute elements (much like floats) are inherently display:block, and nothing you set can change that (other than of course display:none). They have block behavior and will always act as such. APo (position:absolute, as opposed to RelPo, position:relative) in this case is your only reliable way to remove them from flow to hide them, so you need to set top:0; and left:128px;, swapping that 128px for however wide the parent element is.

It's why display:inline works as a reliable bugfix for IE's margin-doubling on floats, by the specification floats and aPo elements cannot be anything other than block or none, so the declaration is ignored, but it trips some bizarre underlying rendering difference in IE that makes it behave.

A haslayout trigger on the relPo parent might not hurt either... though of course that table is going to completely screw with you since it mucks with your sizes.

Also the invalid (in pre -5) and buggy (even in the halfwit garbage known as 5) nonsense of putting block level containers (UL, LI) inside inline-level ones (A, SPAN) is also just asking for it to fall apart miserably. (remember, level does NOT equal CSS display state, even if that's the default behavior!)

I'd have to see the images you are using (or a reasonable facsimile / mockup) to get a more reliable idea of what you are trying to accomplish with this. If you can provide such, I can give you a wee bit better code than that.

Oh and seriously, carriage return and tab -- USE THEM! Trying to decipher that illegible mess all stuffed on one line is quite difficult, and also another way to make life harder for anyone involved.