CODEWITHSUNDEEP
htmlcss
Finnnn
Finnnn

Reputation: 3580

Submit button no borders - height / alignment issue

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

Upvotes: 0

Views: 4509

Answers (2)

webspy
webspy

Reputation: 726

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/).

Upvotes: 1

Ginja Ninja
Ginja Ninja

Reputation: 415

Looks ok when I plug your html and CSS into jsFiddle: http://jsfiddle.net/LAzUf/. Do you have Firebug? Does it look like the input tag is inheriting styles from another setting?

Upvotes: 0

Related Questions