Solved

How to use valign in html5?

Posted on 2014-07-24
4
199 Views
Last Modified: 2014-10-07
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
Comment
Question by:Raghu_Silicion
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40217825
You don't - it's not supported
Use CSS

vertical-align:bottom;
0
 

Author Comment

by:Raghu_Silicion
ID: 40218558
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40219411
For the first table block

<tr>
<td style="height: 100%;vertical-align:bottom">
<form id="frmCotizBody1" method="post" action="" name="frmCotizBody1">
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 40219985
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
css, html 6 31
Remove right text widget from smaller screens 15 49
Change month dropdown 5 15
Adjust the position 3 13
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
This video teaches users how to migrate an existing Wordpress website to a new domain.

758 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

19 Experts available now in Live!

Get 1:1 Help Now