I have the below JSP code, which prints on page like
USE BY:APR/04/2017
Now I want it to be printed as
Use By:APR/04/2017
Though the value of label.global.useBy is "Use By" it is getting capitalized because of the style I have defined in CSS. I have done that to render the month in all CAPS. Else it was getting printed as
Use By : Apr/04/2017
Could you please suggest as to how can I Keep "Use By" as is and juts make month in caps, as:
Use By: APR/04/2017
<td class="contentArea"><bean:message key="label.global.useBy"/>: <bean:write name="details"property="expirationDate" formatKey="format.date.certificate" /></td>
Associated CSS
.contentArea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-transform: uppercase;
}
Thanks #Rahul Kapuriya,
I use SPAN tag inside TD like so,
<td class="contentArea"><bean:message key="label.global.useBy"/>: <span style="font-weight:bold; text-transform: uppercase;"><bean:write name="details"
property="expirationDate" formatKey="format.date.certificate" /><span></td>
Thanks!
"You are welcome" -Rahul Kapuriya
You can use <strong> tag so you don't have to add style font-weight:bold
Like this:
<td class="contentArea"><bean:message key="label.global.useBy"/>: <strong style="text-transform: uppercase;"><bean:write name="details"
property="expirationDate" formatKey="format.date.certificate" /><strong></td>
Related
So, after I tried all the answers in the forums over here, the font size of my webpage won't change. Here's what I currently have:
<font size="40px" face="Didot">Hello</font>
Okay, it will set to 40px, but if I try to make another one using 20px it won't change the font size:
<font size="20px" face="Didot">World</font>
Whole code for those who want to check for themselves
<html>
<font size="40px" face="Didot">Hello</font>
<font size="20px" face="Didot">World</font>
</html>
<font> tag is deprecated. ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font )
Use CSS styling instead. See the example below.
.size40 {
font: 40px/1.5 Didot, serif;
}
.size20 {
font: 20px/1.5 Didot, serif;
}
<span class="size40">Hello</span>
<span class="size20">World</span>
If you are looking for ways to do inline styling you can follow this approach
<html>
<div style="font-size:40px; font-family:Didot">Hello</div>
<div style="font-size:20px; font-family:Didot">World</div>
</html>
But I would recommend to create a separate css file and define styles there. And import those styles in your html using script tags
As said in the previous answer the source is deprecated but if you insists on wanting to try you can use the following:
<font face="Verdana, Geneva, sans-serif" size="+7">Hello</font>
<font face="Verdana, Geneva, sans-serif" size="+4">World</font>
If it still doesn't work, use CSS:
<p>Hello</p>
<p>World</p>
⠀
p:nth-child(1){
font-family: Didot;
font-size: 40px;
}
p:nth-child(2){
font-family: Didot;
font-size: 20px;
}
Trying to add a color and Font family within a H1 tag together using style still it not works.Color property does not have any effect on my current line
<h1 align="center" style=" font-family:Arial, Helvetica, sans-serif"color:#0000FF">The Island Resort and Spa
<br>Welcome to Holiday Speciala</h1>
Why Text is not colored?
Because you separate between css properties using " and it is wrong the style attribute written as follow style="" and inside the double quotes you should write you css properties and separate between them using ; like this
style=" font-family:Arial, Helvetica, sans-serif; color:#0000FF"
Got a little typo there..
<h1 align="center" style=" font-family:Arial, Helvetica, sans-serif; color:#0000FF">The Island Resort and Spa
<br>Welcome to Holiday Speciala</h1>
I am making a HTML email and testing using Litmus, however Lotus Notes 8.5 does not appear to be displaying any link styles. I am using pretty old school methods to make sure it works in older mail clients, but nothing seems to work. The links are getting styled in every other client, including Lotus Notes 7 & 8.
Here is the code:
<font face="Arial" size="2" color="#00b4da" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
<a href="http://www.link.com/" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
www.link.com
</a>
</font>
It could just be a bug with the app, however, it could also be me. I am not really sure what my other options are.
Put the <font> tag inside the <a> tag instead.
<a href="http://www.link.com/" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
<font face="Arial" size="2" color="#00b4da" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
www.link.com
</font>
</a>
Since <font> tags are inline elements, you can either nest them or wrap them around multiple blocks of text without affecting layout.
in the inline style, try adding "color: #00b4da; color: #00b4da !important;"
I seem to remember coming across something similar in hotmail and needing to do this but that was a while ago. Hope that helps.
<html><head></head>
<body>
<pre style="word-wrap:break-word;">
<HTML><head> <style>.header { color: black; font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt }.footer { color:black; font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt; font-style: italic; } .body-header { color: black; font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt; font-weight: bold; } .body-content { color: black; font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt; }</style></head><body><p class="header">This is to notify you that you have an account balance that is greater than or below the threshold viewable on Online Banking for Business. The requested details appear below. <br></p> <span class="body-header"> Account Number: </span><span class="body-content"> xxxxxxxxxxx </span><br><span class="body-header"> Balance Amount: </span><span class="body-content"> 110,xxx.95 </span><br><br><p class="footer">This e-mail and any attachments may contain confidential and privileged information. If you are not the intended recipient, please report to gtmxxxxdesk#xxx.com or call 1-800-xxx-6xx4, and please delete this e-mail and destroy any copies. Any dissemination or use of this information by a person other than the intended recipient is unauthorized and may be illegal.<br></p> <p class="footer">Alert initiated: 08-Sep-2011 at 11:35AM Canada Eastern Time<br></p> </body></HTML></pre>
</body>
</html>
When I put the above html in a file, save it as .html, and open it in IE/FF, the Account Number: is not aligned proeprly to the left. Why is this?
I know there are multiple <html> , <head> and <body> tags, but for now, these are constraints i need to work with. i.e. I cannot get rid of them :)
EDIT: Also, on my browser, there seems to be 2 line breaks between the text:
Any dissemination or use of this information by a person other than the intended recipient is unauthorized and may be illegal and the subsequent line : Alert initiated.
Although there is only 1 <br>
That's because you have spaces before the text. Inside a pre tag the spaces are interpreted as literal, and are not removed or collapsed.
As long as the HTML code is as broken as it is, you can't really expect any consistent result. Browsers will try to make the best out of it by simply ignoring some of the tags, and each browser will do it differently.
Aha! I have found the problem.
You need to remove the spaces between the </p> and <span> tags =).
Like so:
<br></p><span class="body-header"> Account Number:
Changing this:
</p> <span class="body-header"> Account Number:
to this:
</p><span class="body-header"> Account Number:
Seemed to work for me... jsFiddle
I need to align a set of rows using style property
This is the HTML code that is being transformed using XSL
<span style="white-space: pre; font-size: 8pt; font-family: Lucida console, Courier "><40 : item1</span><br>
<span style="white-space: pre; font-size: 8pt; font-family: Lucida console, Courier ">40-80 : item2 </span><br>
What is needed is how to align items like
<40 : item1
40-80 : item2
currently it appears like
<40 : item1
40-80 : item2
is this possible using style property?
using Internet explorer version 6 & above
There is a char attribute for HTML td tags, however, it is not at all supported as far as I know.
This is valid HTML:
<table>
<tr char=".">
<td>11.10</td>
</tr>
<tr char=".">
<td>111.20</td>
</tr>
<tr char=".">
<td>15552.52</td>
</tr>
</table>
I have used this workaround in the past:
http://krijnhoetmer.nl/stuff/javascript/table-align-char/
use instead of spaces
sure it is possible. u can use
<div style="float: left; width: 50px">< 40</div><div style="float: left; ">:</div><div style="float: left; ">item 1</div>
<span style='clear: left'></span>
<div style="float: left; width: 50px"> 40</div><div style="float: left; ">:</div><div style="float: left; ">item 2</div>
or else you could try
display: table-cell;
it can be put in the styling.
white-space: pre; should do the trick and work in all browsers..
do you get this error in every browser or just in IE?
are there any other stylesheeds affecting these <span>-elements?
is it possible to change the xsl to get another markup?
many options:
If you can wrap range (ex 40-80) and item name (ex item1) in separate element, then define width for each.
Otherwise, specify white-space: pre so that whitespace preserved by the browser.
Don't forget to use Monospaced font so that each character each occupy the same amount of horizontal space.
example: Consolas, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace