html formatting: text not aligned properly - html

<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

Related

Font size not changing in HTML

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;
}

Email signature

So I have made a email signature and it works fine in desktop Gmail. The problem is that when I open an email in desktop Outlook links turn blue and underline . How can I fix this?
This is my HTML
<td style="font-family:'Open Sans', sans-serif;color:#000000;font-size:9px;line-height: 14px;font-weight: 400;">
<a style="color:#000000!important;text-decoration:none!important;" href="" target="_blank" data-saferedirecturl="">
Av.Infante Santo, 69 a-c | 1350-177 Lisboa - Portugal
</a>
</td>
When Gmail spots an address or phone number in an email, it automatically adds an extra style declaration, which formats any link in the email that has no inline styles attached to it, as blue:
.ii a[href] { color: #15c; }
How to fix?
Option 1:
Wrap the telephone number or address in a <span></span>
Give the
<span> a class. Example: <span class=”contact”></span>
Declare the class in the <style> section of your email.
CSS:
.contact a {color:#000000!important; text-decoration:underline!important;}
HTML:
<span class="contact">675 Massachusetts Ave.<br>Cambridge, MA 02139, USA</span>
Option 2:
Add a default styling for all links created by Gmail, for this to work you will need to add an id of body (in this example) to the body of your email.
CSS:
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
HTML:
<body id="body">
</body>
If you want to read more about Gmail links here is the source of the above example code which explains everything fully.
Option 3: (which I usually use)
Add a zero width non joiner code (‌) and space ( ) to the address or phone number so the numbers don't become a link. This is usually client request to disable link.
HTML:
1‌3‌5‌0-1‌7‌7 Lisboa
All CSS you need in this example will be the ones you use on your HTML/
Hope this answers your question.

Font does not load (or render) from css file

I am trying to us a custom font in my html-file. I have uploaded the font files to github and hosted a css file on github. I checked several times that the links work and that the font-files contain actual fonts. My problem is that the text in the HTML document is displayed in the standard font and not in the 'kievit' font. Can anyone spot my mistake?
Thank you!
The CSS code in kievit.css is:
#font-face {
font-family: 'kievit';
src: local('kievit'),url(https://cdn.rawgit.com/../Kievit-Medium.woff) format('woff');
src: local('kievit'), url(https://cdn.rawgit.com/../Kievit-Medium.eot);
}
#font-face {
font-family: 'kievit';
font-style: italic;
font-weight: bold;
src: local('kievit'), url(https://cdn.rawgit.com/../Kievit-BoldItalic.woff) format('woff');
src: local('kievit'), url(https://cdn.rawgit.com/../Kievit-BoldItalic.eot);
}
<html>
<head>
<link rel="stylesheet"
href="https://rawgit.com/../kievit.css" type="text/css">
</head>
<span style="font-family: 'kievit', sans-serif; font-size: 36px;"> Making the Web Beautiful</span>
<br> <br>
<span style="font-family: 'arial'; font-size: 36px;"> Making the Web Beautiful</span>
</html>
Edit: I changed the font-style to font-family as suggested, but it still does not work. I the first line is still rendered in arial instead of my custom font.
Try font-family: 'kievit' rather than font-style
I'd rather place a comment, however I don't have enough reputation to do so. At first sight your code looks ok, but there could be some other errors behind the screens (blocking network requests, wrong mime-type passing) So it would be easier to debug if you could provide us with a live example.

Is that possible to use several weight of a web font in a email html ? (or 2 different fonts ?)

I'm building a email on html with the inline css. I need to build it with the google font Open Sans and using the light one with font-weight:300 for the text and the bold one with font-weight: 700 for titles.
I customed on googlefont website the url to have both particularities I needed like that :
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,700" rel="stylesheet">
The fact is that my email seems to apply by default the property 700 to all the page and can't find the 300 one if I put in my inline css the font-weight to 300.
However the 300 weight seems to be applied in a text, but I don't know why or understand the logic that could help me to apply a light weight whenever I want.
Does anyone know how if I can use Open Sans bold and light in the same page in a email html?
here is the codepen :
https://codepen.io/Katchou/pen/zzzLOy
You can use a different font-weight for the title and content
Refer the snippet
h3{
font-family:'Open-sans', sans-serif;
font-weight: 700;
}
p{
font-family:'Open-sans', sans-serif;
font-weight: 300;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<span>
<h3>Heading</h3>
<p>Content</p>
</span>
Or you can use
<span>
<h3 style="font-family:'Open-sans', sans-serif;font-weight:700">Heading</h3>
<p style="font-family:'Open-sans', sans-serif;font-weight:300">Content</p>
</span>
How's this? I can refine my answer if you add more information to the question.
EDIT:
You added a CodePen.
I got your title to show as Open Sans Light.
Check it out!
https://codepen.io/rickydam/pen/QggBja
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
#font-face {
font-family: 'Open Sans Light';
src:url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
</style>
<span>
<font face="Open Sans">
Hello world
</font>
<br>
<font face="Open Sans Light">
Hello world
</font>
<br>
<font face="Open Sans" style="font-weight:700">
Hello world
</font>
</span>

How to format Date to print in Capital letters

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>