Solved

button not centered vertically inside a table

Posted on 2013-01-09
9
372 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 31

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
 

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 31

Accepted Solution

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

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 31

Expert Comment

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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Send form to asp server side 6 26
Extracting nodes  using classical ASP 3 23
WordPress Page Content Lost 2 13
Check input text, Number 6 26
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

685 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