Solved

How to use valign in html5?

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

695 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