Question

A simple CSS issue that I can never seem to fix quickly –

I have a line of text followed by a form which consists of some invisible inputs and a submit button. I’ve removed the border and the background from the submit so just the text –

My html –

<p>Posted about 21 hours ago.</p>
<form class="button_to" data-remote="true" action="/comments/8/likes/114" method="post"> 
<input type="hidden" ...... > <!--not actual markup -->
<input type="submit" value="unlike" html_options="classlike_button_form">
</form>

my css –

p {
    color: #595959;
    float: left;
    font: 85% "Arial",Verdana,sans-serif;
    line-height: 131%;
    padding-bottom: 0;
}

input {
    background-color: transparent;
    border: 0 none;
    color: #3B5998;
    font: 85% "Arial",Verdana,sans-serif;
    float:left
}

The problem is that the text in the p tag and the text from the button are not aligned horizontally.

I’m using the reset css and Yahoo text sizing included in the HTML5 boilerplate.

I really don’t want to fix it with margins or positioning, so any help would be great.

Thanks

EDIT – I’m unable to change the HTML structure

Answer 1

This seems to work: http://jsfiddle.net/8BHtz/6/

I removed the floats and added display: inline-block; vertical-align: middle; to p and form. It works in Chrome, Firefox, Safari and IE8. However, because of inline-block it does not work properly in IE7 or lower. Since p and form are now displayed inline you may want to wrap them in a div (http://jsfiddle.net/8BHtz/7/).