html formatting: text not aligned properly
<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;开发者_Go百科 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
加载中,请稍侯......
精彩评论