Solved

How to use valign in html5?

Posted on 2014-07-24
4
200 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 22

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

863 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

26 Experts available now in Live!

Get 1:1 Help Now