SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How Can I Vertically Center an Image Submit Button?

    I've always used align="absmiddle" in the img tag for a forum submit button. This makes it so it perfectly vertically aligns the button with the textbox next to it.

    I am validating my site for XHTML and since absmiddle isn't supported in XHTML, I have to use CSS. Does anybody know how to make it so it appears in line with the textbox?

    I've tried vertical-align: center, vertically aligning the cell of the table, and several other techniques, but the only thing that works is absmiddle.

    Any help would be greatly appreciated.
    John Saunders

  2. #2
    SitePoint Addict Knightime's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    376
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JohnSaunders
    I've always used align="absmiddle" in the img tag for a forum submit button. This makes it so it perfectly vertically aligns the button with the textbox next to it.

    I am validating my site for XHTML and since absmiddle isn't supported in XHTML, I have to use CSS. Does anybody know how to make it so it appears in line with the textbox?

    I've tried vertical-align: center, vertically aligning the cell of the table, and several other techniques, but the only thing that works is absmiddle.

    Any help would be greatly appreciated.
    Try this in whatever id or class you need it to work.

    text-align: center;

    margin: auto;

  3. #3
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Knightime,

    I tried using the code you posted in both the class for the submit image button and the cell that holds them and unfortunately it didn't work.

    Do you have any other suggestions?
    John Saunders

  4. #4
    SitePoint Addict Knightime's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    376
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd have to see all the styles and the html. There are precedents that could be interferring that I cannot identify unless I see the code.

  5. #5
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Knightime,

    Here is the code I'm using:

    Code:
    // css code
    .headerTop {
    padding: 10px 20px 3px 0px;
    }
    .search {
    width: 140px;
    }
    .searchButton {
    border: 0px;
    margin-right: 15px;
    }
     
    // html code
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr valign="top">
    	<td width="50%"><img src="images/spacer.gif" alt="" width="1" height="1" /></td>
    	<td width="760">
    	<td align="right" class="headerTop">
    <form action="search" method="post">
    <input type="text" name="search" class="search" />
    <a href="search.php"><img src="images/search.gif" alt="SEARCH" name="search" width="59" height="17" border="0" id="searchButton" /></a>
    </form>
    	</td>
    	<td width="50%"><img src="images/spacer.gif" alt="" width="1" height="1" /></td>
    </tr>
    </table>
    Last edited by JohnSaunders; Mar 17, 2003 at 14:51.
    John Saunders

  6. #6
    SitePoint Addict Knightime's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    376
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    John, try creating a class you can put into the <img> tag below. or just use a style. I'll put examples of both.

    .centerstyle {
    text-align: center;
    position: absolute;
    margin: auto 0px;
    }

    <img class="centerstyle" src="images/search.gif" alt="SEARCH" name="search" width="59" height="17" border="0" id="searchButton" />


    without class...

    <img style="text-align: center; margin: auto;" src="images/search.gif" alt="SEARCH" name="search" width="59" height="17" border="0" id="searchButton" />


    Tweak the class until you get th desired result. Depending on what you want, apply styles like that to your image or <tr> or <td>. It just takes a bit of trial and error sometimes, making sure that a previous style doesn't have precedence (overrides) your style.

    Let us know how it goes.




  7. #7
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Knightime,

    I tried using your class and unfortunately, it still didn't work. I've attached a screen capture of it so you can see what it's doing.

    Thanks for your help. It is much appreciated!

    EDIT: I attached my image and for some reason it isn't showing up???
    Attached Images Attached Images
    John Saunders

  8. #8
    SitePoint Addict Knightime's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    376
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just noticed that this line

    <td width="760">


    doesn't seem to have a closing </td>

  9. #9
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I checked my code in my page and the closing cell tag is there, I just messed up my code in my post.
    John Saunders

  10. #10
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK....My image is FINALLY showing up! Man this forum is slow!

    Any ideas as to why the submit button isn't vertically centered with the textbox?
    John Saunders

  11. #11
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK...I've tried everything I could think of. I even tried increasing the vertical size of the button and creating transparency at the top half of the button, but it still is not working.

    I'm considering using align="absmiddle" even though it won't validate correctly because nothing else will work, and it makes it look like crap without it. Is it really that big of a deal to use in my tag? The button is on every page of my site so I have to fix it somehow!!

    Any help would be greatly appreciated.
    John Saunders


Bookmarks

Posting Permissions

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