www.webdeveloper.com
Results 1 to 3 of 3

Thread: form submit image button causes alignment problems

  1. #1
    Join Date
    May 2005
    Posts
    2

    form submit image button causes alignment problems

    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

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    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:
    Code:
    --------------------------------------------
    1. Ascendor
    --------------------------------------------
    2. Middle (I always forget the correct term)
    --------------------------------------------
    3. Descendor
    --------------------------------------------
    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.

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

  3. #3
    Join Date
    May 2005
    Posts
    2
    nice one. that does the job. thanks a lot for the advice.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles