html formatting: text not aligned properly
Question
<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. ie 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>
3 answers
solution1
4 2011-09-09 20:21:15
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.
solution2
0 2011-09-09 20:21:16
Changing this:
</p> <span class="body-header"> Account Number:
to this:
</p><span class="body-header"> Account Number:
Seemed to work for me... jsFiddle
solution3
0 ACCPTED 2011-09-09 20:22:50
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.