Menu
We are designing an application that will send e-mail to managers reminding them that they have to do certain approvals. The e-mail is in HTML form, and contains a table. We don't understand what we're doing wrong to cause the last paragraph to appear to the right of the table instead of under it.
A sample is below. The tool "tidy," on which I rely for things like this, has no tips this time.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content=
"HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org"
name="generator">
<meta content='text/html; charset=us-ascii' http-equiv=
"Content-Type">
<style type="text/css">
body {font-family: Calibri; }
caption {font-family: Calibri;color: 'black'; font-size: '125%; }
table.main tr { };
table.main td.bottomcaption {text-align: 'center'; vertical-align: 'middle'; font-family: 'Calibri'; color: 'black'; font-color: 'black'; font-size: '125%'; }
table.main th {vertical-align: 'bottom'; color: blue; background-color: lightyellow; }
</style>
<title>Payable Time awaiting approval</title>
</head>
<body>
<p>Hello, <strong>Daffy Duck</strong>:</p>
<p>According to our records, the following Payable Time is awaiting
approval. Items shown below must be approved in order for
compensation to take place.<br></p>
<p>For questions, please contact <a href=
"MAILTO:SUPPORT@OUR_ORG.COM">Support</a></p>
<table align="left" border="1" class='main' summary="Pending details">
<caption ><strong>Awaiting approval by your reporting
structure</strong></caption>
<tr>
<th align="left"> <br>
Name</th>
<th align="center"> <br>
ID</th>
<th align="center">Work<br>
Date</th>
<th align="center"> <br>
Type</th>
<th align="center"> <br>
Hours</th>
</tr>
<tr>
<td colspan="5">Reporting to Mickey M Mouse (MMM)</td>
</tr>
<tr>
<td align="left">Daisy</td>
<td align="left">D_DUCK</td>
<td align="center">04/29/2013</td>
<td align="left">REG</td>
<td align="right">8.00</td>
</tr>
<tr>
<td align="left">Daisy</td>
<td align="left">D_DUCK</td>
<td align="center">05/01/2013</td>
<td align="left">REG</td>
<td align="right">8.00</td>
</tr>
<tr>
<td align="left">Daisy</td>
<td align="left">D_DUCK</td>
<td align="center">05/02/2013</td>
<td align="left">OT</td>
<td align="right">7.50</td>
</tr>
</table>
<p> <br></p>
<p> </p>
<p>This message comes from The Support Team</p>
</body>
</html>
We would very much like for the text "This message comes from..." to appear below the table, but instead it appears to the right of the table, aligned with the table's top. This is true for IE7, IE8 and Firefox 12.
I'd appreciate any suggestions to help this situation.
Regards, Dennis
700
Just remove the align="left" to your table.
see the link: http://jsfiddle.net/rhyDe/
Tested on IE10, FF24, Chrome 30
114
answered Feb 06 '26 10:02
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
