• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 219
  • Last Modified:

How to use valign in html5?

Hi,

We have one jsp page which is converted into html5 which contains <!DOCTYPE html> included in the begining of the jsp page.

Our issue is related to button alignment.Please find the screenshot attachment.

When we remove <!DOCTYPE html> in jsp alignment is showing correctly but css is not applying.But we we include
<!DOCTYPE html> at the begining of the jsp page alignment is not showing properly.

Could you please tell me how to resolve this issue.

Actual Scenario:
 
The buttons showing in the left hand side should be in the same position of the right side buttons ie., all the buttons should be in the same line w.r.t to right side buttons.

Please provide me some sample example if any.

Thanks
Alignment-Issue.png
0
Raghu_Silicion
Asked:
Raghu_Silicion
  • 2
1 Solution
 
GaryCommented:
You don't - it's not supported
Use CSS

vertical-align:bottom;
0
 
Raghu_SilicionAuthor Commented:
We have tried with that also.But not working. When we remove <!Doctype> tag  in jsp buttons are showing in same line where the other buttons are aligned. ie., displaying in the same line.

Please find the below sample code

<!DOCTYPE html>
<!--  jspAtMBeiSpRateToolBody.jsp

<div onmouseover="this.style.cursor='default'" style="width: 476; height: 316">
  <!--  Form for Fija-->
  <table>	<tr valign="top">
  <td valign="top" style="height: 100%">
<FORM NAME= 'frmCotizBody1' id ="frmCotizBody1"  ACTION='' METHOD='post'>

<table cellspacing=2 cellpadding=3 style="height: 100%">
<tr valign="top">
<td >
<div id="rateToolBodyDiv1" type="div" name="rateToolBodyDiv1">

</div>
</td>
</tr>

<tr valign="bottom">
<td colspan=5 align=center>
<input type="button" value="   Aceptar   " onClick="AceptarCotizacion(document.frmCotizBody1);" name="Aceptar" style="font-family: MS Sans Serif; font-size: 8pt; font-weight:bold">
<input type="button" value="Nueva Cotizacion" onClick="Enable(frmCotizHead);ValidateselCapGuarantee();NuevaCotizacion(frmCotizBody1,'Y');NuevaCotizacion(frmCotizBody2,'Y');valTipoEstruc();clearMultiScreen();enableStructType();disableMultiHidVariables();clearCotizHeadForm();" name="Nueva" style="font-size: 8pt; font-weight: bold">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="  Cancelar  " onClick="HideDiv('iFrameCotizador','PopupCotizador');Enable(frmAtOnShore);ClearCotiz();clearMultiScreen();" name="Cancelar" style="font-family: MS Sans Serif; font-size:8pt; font-weight: bold">
</td>	
</tr>
</table>
</form>
</td>
<td valign="top">
<FORM NAME= 'frmCotizBody2'  id ="frmCotizBody2" ACTION='' METHOD='post'>
<table cellspacing=2 cellpadding=3 >

       
<tr id="hyperlinksRow">
<td> <div id="rtBdyHyperLinkDiv" type="div" name="rtBdyHyperLinkDiv" style="display:none" ></div> </td>
</tr>
<tr id ="alternativaRow" name ="alternativaStruct"  style = "display:none">
           <td>
           	<input type ="hidden" id="hidIntelligenteHtmlFlag" name ="hidIntelligenteHtmlFlag" >
           	<span name ="Para" class="percentLabel">Para este crédito puedes ofrecer una</span>&nbsp;
           	<a href="#"   name="alternativa123" class="percentLabel" value="alternativa adicional"  id="alternativa" ><u>alternativa adicional.</u></a>&nbsp;
           	<span class="percentLabel">¡No te pierdas la oportunidad! </span></td>
</tr>

<tr id = rateToolBodyRow>
<td>
<div id="rateToolBodyDiv2" type="div" name="rateToolBodyDiv2" ></div>
</td>
</tr>
<tr id ="buttonsRow">
<td colspan=5 align="left">
<input type="button" value="   Aceptar   " onClick="AceptarCotizacion(document.frmCotizBody2);" name="Aceptar" style="font-family: MS Sans Serif; font-size: 8pt; font-weight:bold">
<input type="button" value="Nueva Cotizacion" onClick="Enable(frmCotizHead);ValidateselCapGuarantee();NuevaCotizacion(frmCotizBody2,'Y');valTipoEstruc();disableStructType();clearCotizHeadForm();" name="Nueva" style="font-size: 8pt; font-weight: bold">
</td>	
</tr>

</table>
</form>
</td>
</tr>
</table>	
</div>
</div>
</td>
</tr>
</table>

Open in new window


Could you please anyone try to resolve my issue.
0
 
GaryCommented:
For the first table block

<tr>
<td style="height: 100%;vertical-align:bottom">
<form id="frmCotizBody1" method="post" action="" name="frmCotizBody1">
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
I see no advantage to adding the HTML5 doctype to this document which obviously doesn't comply with HTML5 specs. A great many alterations need to be done to this code to make it HTML5 compliant. In fact, unless you left out the <html> and <head> and <body> tags, this code doesn't comply with any version of HTML that I'm familiar with. What is your objective that prompted you to add the doctype? Perhaps it can be achieved some other way.
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now