I have a task where I need to implement an invoice system that produces an HTML web page of the invoice, which is then printed to a PDF file.
The invoice that I'm outputing is shown in the following image.
What I now need to do is alter my code, so that it produces page breaks at the page boundaries to match the page size of my PDF output. Currently it does not do this, but instead just keeps printing an extended image across the pages that are printed.
Here is the HTML Code I'm currently using:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<style></style>
</head>
<body>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 52.0mm; left: 20.0mm; height: 5.0mm; width: 70.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Das ist ein Text</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 57.0mm; left: 20.0mm; height: 30.0mm; width: 60.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Das ist ein Test</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 100.0mm; left: 20.0mm; height: 7.0mm; width: 107.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Headline</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 110.0mm; left: 20.0mm; height: 20.0mm; width: 178.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Introduction Text</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 243.0mm; left: 20.0mm; height: 3.0mm; width: 170.0mm;">
<hr style="margin-top: 2mm; margin-bottom: 0mm; width: 170.0mm; border-color:#000000; height: 1.0mm" />
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 247.0mm; left: 20.0mm; height: 30.0mm; width: 70.0mm;page-break-after:auto ">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Footer1</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 247.0mm; left: 120.0mm; height: 30.0mm; width: 70.0mm;page-break-after:auto ">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Footer2</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 10.0mm; left: 140.0mm; height: 40.0mm; width: 50.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Logo</span>
</div>
<div style="position: absolute; top: 150.0mm; left: 20.0mm; height: 50.0mm; width: 170.0mm; page-break-after:always;">
<table style="page-break-after:always;">
<tr style="page-break-after:always;">
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #005fbf">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Position</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Artikelnr</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Beschreibung</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Menge</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Preis (Netto)</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Preis (Brutto)</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Gesamtsumme (Netto):</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Gesamtpreis (Brutto)</strong>
</span>
</div>
</td>
</tr>
<tr>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">2</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif"></span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif"></span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">1.0</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">0</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">0.0</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">0.0</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">0.0</span></td>
</tr>
</table>
</div>
</body>
</html>
please note I have trimmed down my sample code as it was too big for stack overflow
How can I make this code split cleanly on the correct page boundaries so that each of the table sections in my html appears as a closed box when I print the PDF out in the browser.
You can set an element a page break property.
page-break-after: auto|always|avoid|left|right|initial|inherit;
Or if you want to page break inside an element you can use the page-break-inside property.
page-break-inside: auto|avoid|initial|inherit;
Hope this helps!
Related
I can't make border-left all for all rows.
Is it possible without CSS?
style="border-left: 1px solid #000;">
This should be in all rows, but it's not. What am I doing wrong?
<p style="border-bottom: 1px solid #000; color: -internal-quirk-inherit;"> </p>
<table style="background-color: white; font-family: lato; text-align: left; color: #000000; font-size: 14px; line-height: 21px; padding: 10px; height: 42px;">
<tbody>
<tr style="height: 21px;">
<td style="width: 100px; padding-right: 50px; padding-left: 50px; text-align: center; height: 42px;" rowspan="4">
<p>
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/JEMIOL.png" width="100px" />
</p>
<p>
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/FACEBOOK.png" width="25px" />
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/INSTAGRAM.png" width="25px" />
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LINKEDIN.png" width="25px" />
</p>
</td>
<td style="width: 19px; height: 42px;" rowspan="4">
<p style="border-left: 1px solid #000;"> </p>
</td>
<td style="padding-top: 1px; padding-bottom: 1px; font-weight: bold; width: 344px; height: 1px;" colspan="4">DAMIAN DĄBROWSKI</td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 10px;" colspan="4">ADMINISTRATOR STRONY INTERNETOWEJ</td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 21px;" colspan="4"><a style="color: #000000; text-decoration: none;" href="-">-</a></td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 10px;" colspan="4"><a style="color: #000000; text-decoration: none;" href="-">-</a></td>
</tr>
</tbody>
</table>
<p style="border-top: 1px solid #000; color: -internal-quirk-inherit;"> </p>
Right now you only have border on the P tag
You mean
<td style="width: 19px; height: 42px; border-left: 1px solid #000;" rowspan="4">
<p style="border-bottom: 1px solid #000; color: -internal-quirk-inherit;"> </p>
<table style="background-color: white; font-family: lato; text-align: left; color: #000000; font-size: 14px; line-height: 21px; padding: 10px; height: 42px;">
<tbody>
<tr style="height: 21px; ">
<td style="width: 100px; padding-right: 50px; padding-left: 50px; text-align: center; height: 42px;" rowspan="4">
<p>
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/JEMIOL.png" width="100px" />
</p>
<p>
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/FACEBOOK.png" width="25px" />
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/INSTAGRAM.png" width="25px" />
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LINKEDIN.png" width="25px" />
</p>
</td>
<td style="width: 19px; height: 42px; border-left: 1px solid #000;" rowspan="4">
<p> </p>
</td>
<td style="padding-top: 1px; padding-bottom: 1px; font-weight: bold; width: 344px; height: 1px;" colspan="4">DAMIAN DĄBROWSKI</td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 10px;" colspan="4">ADMINISTRATOR STRONY INTERNETOWEJ</td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 21px;" colspan="4"><a style="color: #000000; text-decoration: none;" href="-">-</a></td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 10px;" colspan="4"><a style="color: #000000; text-decoration: none;" href="-">-</a></td>
</tr>
</tbody>
</table>
<p style="border-top: 1px solid #000; color: -internal-quirk-inherit;"> </p>
I'm developing an HTML email that utilizes two columns for the desktop design and one for the mobile design. Instead of dealing with all the complexity of targeting specific elements of the desktop version with media queries and trying to make them work for mobile (doing this is a nightmare with emails..), I figured I'd make a completely separate table for mobile and make the desktop version disappear (display: none), at a breakpoint of below 450px.
Now, this works; however, on desktop (above 450px), where I set the mobile table to (display none; display: none !important;) there comes a problem. When opening the email on a screen size larger than 450px (IN GMAIL, not in a browser. I'm using a service called "freshmail" to test this), initially only the desktop table appears; however, none of the images are present. Gmail asks "Display Images Below" and clicking this rewrites my style-sheets such that the mobile table appears as well even though I explicitly tell it not too.
I know this is a tricky business, and I've tried many workarounds to overcome it, but none have worked. If anyone could help me accomplish this I would very much appreciate it.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style>
#media (min-width: 451px) {
#mobile {
display: none;
display: none !important;
}
}
#media (max-width: 450px) {
#desktop {
display: none !important;
}
#mobile {
display: block !important;
}
}
</style>
</head>
<body style="width: 100% !important; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.4; font-family: Helvetica; overflow-x: hidden;">
<table id="desktop" cellpadding="0" cellspacing="0" width="100%" border="1px solid black">
<tr>
<td style="display: block; clear: both !important; margin: 0 auto !important; width: 600px !important; overflow: hidden;">
<table border="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
<tr style="">
<th>
</th>
<th style="padding-top: 20px;">
<span style="color: #504e4b;"/>
example text
</span>
</th>
</tr>
<tr style="padding: 0; background: #ffffff; color: #504e4b;">
<td colspan="2">
<img src="assets/example.gif" style="display: block;">
<img src="assets/example.gif" style="display: block; pointer-events: none; cursor: default;">
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; padding-left: 30px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 30px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-left: 30px; padding-bottom: 20px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" style="display: block;">
</td>
<td style="padding: 0px; border: none;">
</td>
</tr>
<tr style="height: 415px; color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<img src="assets/example.png" style="display: block;">
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
<td style="padding: 0px;">
<img src="assets/example.gif" style="display: block;">
</td>
</tr>
<tr style="vertical-align: top; color: #504e4b;">
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" style="display: block;">
</td>
<td style="text-align: right; padding: 0px;">
<img src="assets/example.png" align="right" style="display: block; padding-right: 20px;">
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 180px; margin-bottom: 10px; padding-right: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; font-weight: 200; color: #504e4b;">
example text
</span>
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 30px; padding-top: 50px;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200;">
example text
</span>
</td>
<td style="padding: 0px;">
<img src="assets/example.png" style="display: block;">
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
</td>
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" colspan="2" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- mobile view -->
<table id="mobile" border="1px solid #f2f2f2" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; margin: 0 auto;">
<tr>
<td align="center" style=" clear: both !important; margin: 0 auto !important; width: 100% !important; max-width: 450px !important; overflow: hidden; overflow-y: hidden;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style=" border-collapse: collapse;">
<tr id="date">
<th style="padding-top: 20px;">example text</th>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="header" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="planter" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td style="padding: 20px;">
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-bottom: 0px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
<img id="trend-top" src="assets/example.png" style="display: block;">
</td>
</tr>
<tr style="color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<img id="trend-bottom" src="assets/example.png" style="display: block;">
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="trend-wheels" src="assets/example.gif" style="display: block; width: 100%;">
</td>
</tr>
<tr>
<td align="center" style="background: #ffffff;">
<img id="display-ideas" src="assets/example.png" style="max-width: 170px; display: block; width: 100%;">
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 30px; margin-bottom: 10px; padding-left: 20px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 0px; font-weight: 200; color: #504e4b; text-align: left;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="pot-stand" src="assets/example.png" style="display: block; margin: 0 auto; padding: 20px 0px 40px 0px; max-width: 300px; width: 90%">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td style="padding: 0px;">
<img src="assets/example.png" style="display: block;">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 35px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; text-align: left;">
example text
</span>
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Try adding the mso-rules to your hide and un-hide. You can use basic break points as well, but I have found that also using the #media screen and (max-width:XXpx) is a better solution since most people don't carry around laptops that are less than 450 pixels wide.
Email design and development is pure a totally mixed bag, and I wish you luck.
All in all I would not take this approach to hiding and unhiding content. Outlook will ignore it entirely and Gmail will do (as you know) unpredictable things.
Here's link to a basic template I made Email template that might help.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style>
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-webkit-font-smoothing: antialiased;
}
v*{
behavior:url(#default#VML);
display:inline-block;
}
.ExternalClass{
width:100%;
}
td{
border-collapse: collapse!important;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div{
line-height:100%;
}
a img{
border:none;
}
a {
text-decoration:none !important;
}
img{
display:block;
outline:none;
text-decoration:none;
border:none;
-ms-interpolation-mode: bicubic;
}
table{
border-spacing:0;
border-collapse: collapse !important;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
#media (min-width: 451px) {
table#mobile {
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
}
#media (max-width: 450px) {
table#desktop {
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
table#mobile {
display: inline !important;
}
}
</style>
</head>
<body style="width: 100% !important; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.4; font-family: Helvetica; overflow-x: hidden;">
<table id="desktop" cellpadding="0" cellspacing="0" width="100%" border="1px solid black">
<tr>
<td style="display: block; clear: both !important; margin: 0 auto !important; width: 600px !important; overflow: hidden;">
<table border="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
<tr style="">
<th>
</th>
<th style="padding-top: 20px;">
<span style="color: #504e4b;"/>
example text
</span>
</th>
</tr>
<tr style="padding: 0; background: #ffffff; color: #504e4b;">
<td colspan="2">
<img src="assets/example.gif" style="display: block;">
<img src="assets/example.gif" style="display: block; pointer-events: none; cursor: default;">
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; padding-left: 30px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 30px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-left: 30px; padding-bottom: 20px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" style="display: block;">
</td>
<td style="padding: 0px; border: none;">
</td>
</tr>
<tr style="height: 415px; color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<img src="assets/example.png" style="display: block;">
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
<td style="padding: 0px;">
<img src="assets/example.gif" style="display: block;">
</td>
</tr>
<tr style="vertical-align: top; color: #504e4b;">
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" style="display: block;">
</td>
<td style="text-align: right; padding: 0px;">
<img src="assets/example.png" align="right" style="display: block; padding-right: 20px;">
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 180px; margin-bottom: 10px; padding-right: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; font-weight: 200; color: #504e4b;">
example text
</span>
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 30px; padding-top: 50px;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200;">
example text
</span>
</td>
<td style="padding: 0px;">
<img src="assets/example.png" style="display: block;">
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
</td>
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" colspan="2" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- mobile view -->
<table id="mobile" border="1px solid #f2f2f2" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; margin: 0 auto;">
<tr>
<td align="center" style=" clear: both !important; margin: 0 auto !important; width: 100% !important; max-width: 450px !important; overflow: hidden; overflow-y: hidden;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style=" border-collapse: collapse;">
<tr id="date">
<th style="padding-top: 20px;">example text</th>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="header" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="planter" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td style="padding: 20px;">
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-bottom: 0px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
<img id="trend-top" src="assets/example.png" style="display: block;">
</td>
</tr>
<tr style="color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<img id="trend-bottom" src="assets/example.png" style="display: block;">
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="trend-wheels" src="assets/example.gif" style="display: block; width: 100%;">
</td>
</tr>
<tr>
<td align="center" style="background: #ffffff;">
<img id="display-ideas" src="assets/example.png" style="max-width: 170px; display: block; width: 100%;">
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 30px; margin-bottom: 10px; padding-left: 20px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 0px; font-weight: 200; color: #504e4b; text-align: left;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="pot-stand" src="assets/example.png" style="display: block; margin: 0 auto; padding: 20px 0px 40px 0px; max-width: 300px; width: 90%">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td style="padding: 0px;">
<img src="assets/example.png" style="display: block;">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 35px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; text-align: left;">
example text
</span>
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
**UPDATE:
#tablaarriba a:hover {
color: gray;
}
<table style="text-align: left; width: 1113px; height: 123px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><br>
<div style="text-align: left;"><img style="border: 0px solid ; width: 240px; height: 95px;" src="Fotos%20ITGS/Logo/logo_rosy.jpg" alt="RosyGLogo"></div>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<div id="tablaarriba">
<a style="color: black; text-decoration: none; background-color: transparent;" href="social.htm">Social</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
</div>
<a style="color: black; text-decoration: none;" href="file:///Users/monmunoz/Desktop/Colegio/Tec/Quinto%20Semestre/ITGS/PROYECTO/Comercial.htm">Comercial</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="proyectospersonales.htm">Proyectos Personales</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="sobrelafotografa.htm">Sobre la fotógrafa</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="contacto.htm">Contacto</a><br>
</td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 100px; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="20">
<tbody>
<tr>
<td style="vertical-align: top;"><img style="width: 367px; height: 244px;" src="Fotos%20ITGS/Comercial/DSC_1647.jpg" alt="DSC_1647.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3043.jpg" alt="DSC_3043.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3813.jpg" alt="DSC_3813.jpg"></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3074.jpg" alt="DSC_3074.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3817.jpg" alt="DSC_3817.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3077.jpg" alt="DSC_3077.jpg"></td>
</tr>
</tbody>
</table>
<br>
<div data-role="footer">
<div style="text-align: center;"> <small><span style="font-family: Century Gothic;">Rosy G. Photography ©</span></small><br>
</div>
<h1 style="text-align: center;"><br>
</h1>
</div>
** I changed some details in the html pointed out by the HTML validator. So now I have this.
I'm almost done building my website; however I'm trying to incorporate the a:hover attribute in my stylesheet and I don't know what I'm doing wrong. I want my links to change to color grey whenever the mouse passes above them. Please help me. So far I have this:
Try this:
#tablaarriba a:hover {
color: gray ;
}
<div id="tablaarriba">
LINK
</div>
table a:hover {
color: gray ;
}
table a {
color: black; text-decoration: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link href="menuarriba.css" rel="stylesheet" type="text/css">
<title>Rosy G Photography and Artwork</title>
</head><body>
<table style="text-align: left; width: 1113px; height: 123px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><br>
<div style="text-align: left;"><img style="border: 0px solid ; width: 240px; height: 95px;" src="Fotos%20ITGS/Logo/logo_rosy.jpg" alt="RosyGLogo"></div>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<div id="tablaarriba">
Social<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
</div>
Comercial<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
Proyectos Personales<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
Sobre la fotógrafa<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="contacto.htm">Contacto</a><br>
</td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 100px; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="20">
<tbody>
<tr>
<td style="vertical-align: top;"><img style="width: 367px; height: 244px;" src="Fotos%20ITGS/Comercial/DSC_1647.jpg" alt="DSC_1647.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3043.jpg" alt="DSC_3043.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3813.jpg" alt="DSC_3813.jpg"></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3074.jpg" alt="DSC_3074.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3817.jpg" alt="DSC_3817.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3077.jpg" alt="DSC_3077.jpg"></td>
</tr>
</tbody>
</table>
<br>
<div data-role="footer">
<div style="text-align: center;"> <small><span style="font-family: Century Gothic;">Rosy G. Photography ©</span></small><br>
</div>
<h1 style="text-align: center;"><br>
</h1>
</div>
</body></html>
I recommend adding a class to you're a element. Then use that class inside of the CSS, and try from there. If that does not work, then you might try using transition.
.a {
text-decoration: none;
color: black;
-webkit-transition: 0.256s;
}
.a:hover {
transition: 0.256s;
color: grey;
}
Test
The inline style style="color: black;..." is stronger than non-inline styles, so you cannot override it.
You should stylize the a tag with a selector (class or tag one).
<table>
<tr>
<td class="h1" colspan="12" style="font-family: 'proxima_nova_rgbold', Arial, Helvetica, sans-serif;font-size: 18px;text-align:center; padding-top:10px;padding-left:30px;text-transform: uppercase;padding-bottom: 8px;padding-right:30px;line-height: 26px;color: #262626; font-weight:700; background:#f9f9f9;" align="center">
<hr align="left" style="width: 70px; vertical-align: middle; height: 1px; background: #171717; display: inline-block;">
<img src="http://www.hubilo.in/images_for_links/venue_icon.png" width="25" height="25" align="center" style="vertical-align: middle;">
<hr align="left" style="width: 70px; display: inline-block; vertical-align: middle; height: 1px; background: #171717;">
</td>
</tr>
</table>
When I see this into outlook then it looks like.
left hr in one line
image in 2nd line and
right hr in new line.
How can I solve this?
<table align="center" style="">
<tr>
<td align="left" style="width: 35px; padding: 0; margin: 0;">
<hr style="width: 30px; border:1px solid #000000; background: #000000; ">
</td>
<td align="center" style="width:30px; padding: 0; margin: 0;">
<img src="http://www.hubilo.in/images_for_links/venue_icon.png" width="25" height="25" style="vertical-align:middle;">
</a>
</td>
<td align="right" style="width: 35px; padding: 0; margin: 0;background: ">
<hr style="width: 30px; border:1px solid #000000; background: #000000; ">
</td>
<td align="right" style="width: 20px; padding: 0; margin: 0;">
<span style="color:#FFFFFF; font-size:14px;"> </span>
</td>
</tr>
</table>
Try this
Receiving odd behaviour of a link in xslt that breaks the page.
I am using XSLT to transform an XML list of manuals. I have included a link to open the manual, (as .pdf) with a target="_blank"
In Internet Explorer 8, (Yes, we are still having to use this), the link functions normally, opening the pdf in a new window, but the page the link was one gets shifted down about 1300-1500px. Refreshing the page fixes it, and it seems in testing that opening the same link a second time and future times it does not exibit this behaviour.
It does not shift the header or menu containers, only the body container.
I have used the developer tools to get the html it is using and do not see where or why it would be doing this. EDIT: I see at the bottom of the html output the css and it appears to have some extreme values for positions maybe?
Relevant (HTML) code:
<!-- saved from url=(0071)http://www.example.com/unit/admin/instructions/instructions.xml -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Generated by Developer Tools. This might not be an accurate representation of the original source file -->
<HTML>
<HEAD>
<TITLE>Intranet</TITLE>
<META content="text/html; charset=UTF-16" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="../../../scripts/jquery-1.11.1.min.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="../../../css/tacamo.css">
</HEAD>
<BODY style="ZOOM: 1">
<DIV style="MARGIN: auto" id=wing-page-container>
<DIV id=header-container><IMG alt="" align=middle src="../images/elements/header.png" width=1000></DIV>
<DIV id=nav-container>
<DIV id=menu>
<UL>
<LI><A id=menu href="http://www.example.com/unit/admin/admin.html">BACK</A></LI>
</UL>
</DIV>
</DIV>
<DIV id=instructions-content-container>
<TABLE class=instructions align=center>
<TBODY>
<TR>
<TH style="TEXT-ALIGN: center; WIDTH: 75px">Instruction Number</TH>
<TH style="TEXT-ALIGN: center; WIDTH: 75px">Date</TH>
<TH style="TEXT-ALIGN: center; WIDTH: 25px">COG</TH>
<TH style="WIDTH: 500px">Description</TH>
<TH style="TEXT-ALIGN: center; WIDTH: 50px">Open</TH>
</TR>
<TR style="BACKGROUND-COLOR: #c0d0e0">
<TD style="WIDTH: 75px">1</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 75px">09/24/1997</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px">GEORGE</TD>
<TD style="WIDTH: 500px">MANUAL ABOUT 1 THING</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px"><A href="http://www.example.com/unit/admin/instructions/1-thing.pdf" target=_blank><IMG border=0 src="../images/elements/pdf-logo.gif" width=25 height=25></A></TD>
</TR>
<TR style="BACKGROUND-COLOR: #ffffff">
<TD style="WIDTH: 75px">2</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 75px">03/26/2010</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px">GEORGE</TD>
<TD style="WIDTH: 500px">MANUAL ABOUT 3 THING</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px"><A href="http://www.example.com/unit/admin/instructions/2-thing.pdf" target=_blank><IMG border=0 src="../images/elements/pdf-logo.gif" width=25 height=25></A></TD>
</TR>
<TR style="BACKGROUND-COLOR: #c0d0e0">
<TD style="WIDTH: 75px">3</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 75px">04/10/2014</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px">GEORGE</TD>
<TD style="WIDTH: 500px">MANUAL ABOUT 3 THING</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px"><A href="http://www.example.com/unit/admin/instructions/3-thing.pdf" target=_blank><IMG border=0 src="../images/elements/pdf-logo.gif" width=25 height=25></A></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<DIV id=footer-container>
<P class=footer>Admin POC: Admin ITPOC's (555-1212)</P>
</DIV>
</DIV>
<DIV style="BORDER-BOTTOM: #ff99cc 1px solid; TEXT-ALIGN: left; FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=80); BORDER-LEFT: #ff99cc 1px solid; PADDING-BOTTOM: 1px; LINE-HEIGHT: 100%; BACKGROUND-COLOR: #ffcccc; MARGIN: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: block; FONT-FAMILY: 'Sans Serif',serif; FLOAT: left; VISIBILITY: visible; COLOR: black; FONT-SIZE: 11pt; OVERFLOW: visible; BORDER-TOP: #ff99cc 1px solid; BORDER-RIGHT: #ff99cc 1px solid; PADDING-TOP: 1px; font-decoration: none" class=IEDevToolbarAddedElement>href=http://www.example.com/unit/admin/instructions/1-thing.pdf</DIV>
</DIV>
<DIV style="Z-INDEX: 459008; BORDER-BOTTOM: 0px; POSITION: absolute; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 0; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 25px; PADDING-RIGHT: 0px; DISPLAY: block; HEIGHT: 25px; VISIBILITY: visible; OVERFLOW: hidden; BORDER-TOP: 0px; TOP: 5808px; BORDER-RIGHT: 0px; PADDING-TOP: 0px; LEFT: 1346px" class=IEDevToolbarAddedElement>
<DIV style="BORDER-BOTTOM: #ff99cc 1px solid; TEXT-ALIGN: left; FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=80); BORDER-LEFT: #ff99cc 1px solid; PADDING-BOTTOM: 1px; LINE-HEIGHT: 100%; BACKGROUND-COLOR: #ffcccc; MARGIN: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: block; FONT-FAMILY: 'Sans Serif',serif; FLOAT: left; VISIBILITY: visible; COLOR: black; FONT-SIZE: 11pt; OVERFLOW: visible; BORDER-TOP: #ff99cc 1px solid; BORDER-RIGHT: #ff99cc 1px solid; PADDING-TOP: 1px; font-decoration: none" class=IEDevToolbarAddedElement>href=http://www.example.com/unit/admin/instructions/3-thing.pdf</DIV>
</DIV>
</BODY>
</HTML>