?
Solved

button not centered vertically inside a table

Posted on 2013-01-09
9
Medium Priority
?
388 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
9 Comments
 
LVL 17

Assisted Solution

by:selvol
selvol earned 1000 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 1000 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
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 
LVL 31

Assisted Solution

by:Wayne Barron
Wayne Barron earned 1000 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 1000 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

719 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