inline-block CSS issue in webkit

To see the issue visit: http://justinzaun.com/LCARS/

The two css blocks in question are located at line 260 a开发者_运维知识库nd 284 in the linked css file. Specifically its the display: inline-block on both - I think.

This looks correct in FF. I'm not sure in IE as I haven't tested it yet. In webkit (chrome and safari) it looks wrong.

Any idea how to fix it?

Thanks!

Edit (added images and explanation):

The top image it from FF and it looks good. The bottom image is from webkit. Notice the 2 buttons and the label are pushed down by about 5 pixels. There is no space under the text.

Try this code:

<div class="buttonbar">
    <div class="largebutton" style="float:left;display:block;">
        Label
    </div>
    <div class="button" style="float:left;display:block;">
        Label
    </div>
    <div class="label" style="float:left;display:block;">
        A label to disply text in... Fun Times...
    </div>
    <div class="spacer"></div>      
</div>

Or add float:left;display:block; to your .largebutton, .button and .label classes. lines (260, 284 and 308).

UPD: If you still want to use inline-block - try adding vertical-align:top to all 3 of your classes.