/    Sign up×
Community /Pin to ProfileBookmark

form submit image button causes alignment problems

Copy linkTweet thisAlerts:
May 04.2005

I have a form. if i use a button for submitting <input name=”submit” type=”button” /> there are no problems and the alignment is fine.

if i use <input type=”image” src=”images/go.gif” value=”Submit” /> with the image being the same height as the containing divs the button looks like it is in the right place but the input box drops down several pixels and makes the height of the containing divs higher.

can anyone recommend a fix? i have tried adding a class to the image but it doesn’t work;

<input type=”image” src=”images/go.gif” value=”Submit” />

.go {
background-position: 0px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
position: inherit;
}

any help would be great or i will have to go with a css button rather than the image i want to use.

cheers

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienMay 04.2005 — There's a difference in how buttons, text, form inputs and images are vertically aligned within the line box. A line box is the rectangle that makes up a line of text, essentially. The line is made up of three zones:


--------------------------------------------</H2>
<LIST type="decimal"><LI>1. Ascendor<br/>
--------------------------------------------</LI>
<LI>2. Middle (I always forget the correct term)<br/>
--------------------------------------------</LI>
<LI>3. Descendor<br/>
--------------------------------------------<br/>


Most letters have their bottom edge vertically aligned with the bottom of layer 2. Images ALSO have their bottom edge vertically aligned with the bottom of layer 2 (even image inputs).

Most form inputs, including buttons, are perfectly vertically aligned within the line box, with equal space above them and below them.

If you vertically align the image to the middle, then the gap beneath the image will disappear.

<i>
</i>&lt;input type="image"
src="images/go.gif"
value="Submit"
style="vertical-align: middle;"
/&gt;

Copy linkTweet thisAlerts:
@mj_goonerauthorMay 05.2005 — nice one. that does the job. thanks a lot for the advice.
×

Success!

Help @mj_gooner spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...