CSS: Put list of buttons horizontally within a div

I'm trying to put a list of buttons side by side so they all fit into a wide-but-short bar. My code worked when the list of buttons was instead a list of image links, but changing them into actual buttons displaced them. Now they're off to the top and right.

Oddly after temporarily giving the ul a background color, it seems the ul is still inside the div--it's an issue of rogue list items. What's going on?

My XHTML:

<div class="accent-bar">
    <ul class="accents">
        <li id="first"><input type="button" name="a" id="a" value="&aacute;" /></li>
        <li><input type="button" name="e" id="e" value="&eacute;" /></li>
        <li><input type="button" name="i" id="i" value="&iacute;" /></li>
        <li><input type="button" name="n" id="n" value="&ntilde;" /></li>
        <li><input type="button" name="o" id="o" value="&oacute;" /></li>
        <li><input type="button" name="u" id="u" value="&uacute;" /></li>
        <li><input type="button" name="umlaut" id="u" value="&uuml;" /></li>
        <li><input type="button" name="?" id="?" value="&iquest;" /></li>
        <li id="last"><input type="button" name="!" id="!" value="&iexcl;" /></li>
    </ul>
</div>

My CSS:

.accent-bar {
    po开发者_运维技巧sition: relative;
    height: 25px;
    border-top: #000000 1px solid;
    border-bottom: #000000 1px solid;
    }
    ul .accents {
        list-style-type: none;
        }
        ul.accents li {
            display: inline-block;
            margin-left: 5px;
            }
            ul.accents li#first {
                margin-left: 10px;
            }
            ul.accents li#last {
                margin: 1px 0 0 15px;
}

This works just fine in Chrome, with the buttons laid out horizontally.
In IE, however, it comes out vertically like you say.
I changed the display: inline-block; to display: inline; and it now works in IE just like in Chrome.

Would that work for you?

EDIT:
To make it align to the left edge:
Firstly, make sure you correct ul .accents to ul.accents (remove the space).
Secondly, to remove that left-side indentation, give that class padding: 0px; and it should work.

As for the vertical alignment, I'm not really sure what's missing here -- it's one line, there's no space above or below it to align within. Could you clarify this part?

OK, so I figured out that I needed to specifically target the first button itself for the buttons to move properly. NOT the containing list item; the button itself.

Trying to give all the buttons negative left margins effectively reversed them, but giving just the first one makes the rest move appropriately. Here's the code I'm using now:

.accent-bar {
    position: relative;
    height: 25px;
    border-top: #000000 1px solid;
    border-bottom: #000000 1px solid;
    }
    ul .accents {
        list-style-type: none;
        }
        ul.accents li {
            display: inline;
            margin-left: 15px;
            }
            ul.accents li#last {
                margin-right: 15px;
                }
                ul.accents li#first input {
                    margin-top: 18px;
                    margin-left: -250px;
}