Solved

button not centered vertically inside a table

Posted on 2013-01-09
9
375 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 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Suggested Solutions

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

739 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