Solved

button not centered vertically inside a table

Posted on 2013-01-09
9
358 Views
Last Modified: 2013-01-09
I have the following code, no matter what alignment i set the code with the form inside the table shows the button higher than the rest of the fields. How can I have it displayed in the middle of the cell, cell has enough width for the button to be displayed properly.

<table width="100%" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td bgcolor="eceef4"><img src="../../Images/blank.gif" alt="" width="10" height="25" /></td>
                        <td width="66" bgcolor="eceef4"><div align="center"><font color="#666666"><strong>Actions</strong></font></div></td>
                        <td valign="middle" bgcolor="eceef4"><table width="12" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                            <td width="10" height="14"><img src="../../Images/menus/separator.gif" alt="" /></td>
                            <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                          </tr>
                        </table></td>
                        <td width="644" bgcolor="eceef4"><div align="center"><strong><font color="#666666">Case | Description</font></strong></div></td>
                        <td bgcolor="eceef4"><table width="12" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                            <td width="10" height="14"><img src="../../Images/menus/separator.gif" alt="" /></td>
                            <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                          </tr>
                        </table></td>
                        <td width="79" bgcolor="eceef4"><div align="center"><strong><font color="#666666"> Corp Client<br>
                          <a href="javascript:;"></a></font></strong></div></td>
                        <td width="12" bgcolor="eceef4"><div align="center">
                          <table width="12" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                              <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                              <td width="10" height="14"><img src="../../Images/menus/separator.gif" alt="" /></td>
                              <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                            </tr>
                          </table>
                        </div></td>
                        <td width="75" bgcolor="eceef4"><div align="center"><strong><font color="#666666"> Indv. Client<br>
                          <a href="javascript:;"></a></font></strong></div></td>
                        <td width="12" bgcolor="eceef4"><div align="center">
                          <table width="12" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                              <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                              <td width="10" height="14"><img src="../../Images/menus/separator.gif" alt="" /></td>
                              <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                            </tr>
                          </table>
                        </div></td>
                        <td width="86" bgcolor="eceef4"><div align="center"><strong><font color="#666666">Uploaded on</font></strong></div></td>
                      </tr>
                      <tr>
                        <td colspan="11"><img src="../../Images/blank.gif" alt="" width="10" height="10" /><img src="../../Images/blank.gif" alt="" height="6" /></td>
                      </tr>
                      <tr>
                        <td colspan="11" background="../../Images/menus/separatortop.gif"><img src="../../Images/blank.gif" alt="" width="10" height="3" /></td>
                      </tr>
                      <%
 Dim RecordCounter2
RecordCounter2 = 0
%>
                      <%
While ((Repeat2__numRows <> 0) AND (NOT Attachmentsfromcases.EOF))
%>
                      <tr  <%
      RecordCounter2=RecordCounter2 + 1
      If RecordCounter2 Mod 2 = 1 Then
            Response.Write("bgcolor=#FBFBFB")
      End If
      %>
      bgcolor="#FFFFFF" onMouseOver="this.style.backgroundColor='#FFFFCC'" onMouseOut="this.style.backgroundColor=''">
                        <td width="10">&nbsp;</td>
                        <td><div align="center">
                          <form action="" method="post" name="form2" id="form2">
                            <div align="center">
                              <input name="Attachments" type="hidden" id="Attachments" value="<%=Session("Attachmentsfull")%>/<%=(Attachmentsfromcases.Fields.Item("storage_name").Value)%>">
                              <input name="Download" type="submit" class="bodytext" id="Download" value="view">
                            </div>
                          </form>
                        </div></td>
                        <td width="12" valign="middle"><table width="12" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                            <td width="10" height="14"><img src="../../Images/menus/separator.gif" alt="" /></td>
                            <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                          </tr>
                        </table></td>
                        <td class="bodytextreports" ><span class="bodytext"><%=(Attachmentsfromcases.Fields.Item("caseid").Value)%></span> | <span class="bodytext"><%=(Attachmentsfromcases.Fields.Item("description").Value)%></span></td>
                        <td width="18"><div align="center">
                          <table width="12" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                              <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                              <td width="10" height="14"><img src="../../Images/menus/separator.gif" alt="" /></td>
                              <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                            </tr>
                          </table>
                        </div></td>
                        <td width="79" ><div align="center"><%= CI_ShowYesNo((Attachmentsfromcases.Fields.Item("visible").Value)) %></div></td>
                        <td width="12" ><div align="center">
                          <table width="12" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                              <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                              <td width="10" height="14"><img src="../../Images/menus/separator.gif" alt="" /></td>
                              <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                            </tr>
                          </table>
                        </div></td>
                        <td width="75" ><div align="center"><%= CI_ShowYesNo((Attachmentsfromcases.Fields.Item("visibleindividual").Value)) %></div></td>
                        <td width="12" ><div align="center">
                          <table width="12" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                              <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                              <td width="10" height="14"><img src="../../Images/menus/separator.gif" alt="" /></td>
                              <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
                            </tr>
                          </table>
                        </div></td>
                        <td ><div align="center"><%= DoDateTime((Attachmentsfromcases.Fields.Item("dateuploaded").Value), 2, 9225) %>&nbsp;</div></td>
                      </tr>
                      <tr>
                        <td colspan="11" background="../../Images/menus/separatortop.gif"><img src="../../Images/blank.gif" alt="" width="10" height="3" /></td>
                      </tr>
                      <%
  Repeat2__index=Repeat2__index+1
  Repeat2__numRows=Repeat2__numRows-1
  Attachmentsfromcases.MoveNext()
Wend
%>
              </table>




----- THIS IS THE PART OF THE CODE SHOWING UP HIGHER THAN THE REST

  <form action="" method="post" name="form2" id="form2">
                            <div align="center">
                              <input name="Attachments" type="hidden" id="Attachments" value="<%=Session("Attachmentsfull")%>/<%=(Attachmentsfromcases.Fields.Item("storage_name").Value)%>">
                              <input name="Download" type="submit" class="bodytext" id="Download" value="view">
                            </div>
                          </form>

----

Attached picture of the table.
pic.gif
0
Comment
Question by:amucinobluedot
  • 4
  • 3
  • 2
9 Comments
 
LVL 17

Assisted Solution

by:selvol
selvol earned 250 total points
ID: 38761623
Try using an Image.

Buttons are always tricky to align with images,
   <script type="text/javascript">
            function submitForm()
            {
              document.myForm.submit();
            }
             
            function formAction()
            {
              document.newForm.action = "ACTION HERE";             
            }
        </script>

Open in new window



<input type="image" src="view.png"   onclick="javascript: submitForm()" class="bodytext" id="Download" value="view">

OR
<input type="image" src=""view.png" name="image"60" class="bodytext" id="Download" value="view">

Open in new window


View
Selvol
0
 

Author Comment

by:amucinobluedot
ID: 38761633
I don't want to use images.
0
 
LVL 17

Assisted Solution

by:selvol
selvol earned 250 total points
ID: 38761645
<style>
#Download{valign:center;}
<style>
<input name="Download" type="submit" class="bodytext" id="Download" value="view">

Open in new window


Sorry it a little hard to recreate your code.


Try the above

Or see this Tutorial..


http://phrogz.net/css/vertical-align/index.html

Selvol
0
 
LVL 30

Assisted Solution

by:Wayne Barron
Wayne Barron earned 250 total points
ID: 38761664
How about trying this.

<input name="Download" type="submit" class="bodytext" id="Download" value="view" style="margin-top:15px;">

Giving it a margin-top:15px;

See if this will give you the results you are looking for.

Carrzkiss
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:amucinobluedot
ID: 38761667
Using margin top centers the image but makes the whole row twice the height.
0
 

Author Comment

by:amucinobluedot
ID: 38761675
As it turns out it is NOT the button that pushes everything up, but the form inside that cell.  :(  ...
0
 
LVL 30

Accepted Solution

by:
Wayne Barron earned 250 total points
ID: 38761680
Try playing with the forms height
<form style="height:20px;">
0
 
LVL 30

Expert Comment

by:Wayne Barron
ID: 38761681
I just tested it, and changing the Height of the Form itself, will change the cell of the table.
0
 
LVL 30

Expert Comment

by:Wayne Barron
ID: 38761682
Which one resolved your issue?
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now