Solved

How to use valign in html5?

Posted on 2014-07-24
4
205 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
[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
  • 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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

Suggested Solutions

Title # Comments Views Activity
bootstrap wrap text 1 36
Drop Down not working in mobile- Bootstrap 14 34
TypeError jquery issues with site - CSS conflicts 3 28
Two decimal 5 29
This article discusses four methods for overlaying images in a container on a web page
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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)

726 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