I will create a table for my newsletter but I read that each client read in not same way the code...
So I would like to have a table that it will be responsive for all email service...
I make a small example..
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-spacing: 0;border-collapse: collapse;vertical-align: top; color: #000000; font-size: 15px; margin-top:25px; font-family: Arial">
<tbody>
<tr style="vertical-align: top; height: 40px">
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; font-weight: bolder; border-width: 2px 1px 2px 2px; border-style: solid; border-color: #769e9e; text-align: center; padding: 8px 3px 8px 5px; width: 125px;">
<!--<![endif]-->
Vulcano
<!--[if !mso]><!- - -->
</td>
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; font-weight: bolder; border-width: 2px 2px 2px 1px; border-style: solid; border-color: #769e9e; text-align: center; padding: 8px 3px 8px 5px; width: 100px;">
Ultima attivita'
<!--[if !mso]><!- - -->
</td>
</tr>
<tr style="vertical-align: top">
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; text-align: left; border-width: 1px 1px 1px 2px; border-style: solid; border-color: #a8c1c1 #a8c1c1 #a8c1c1 #769e9e; padding: 3px 3px 3px 5px; width: 125px;">
<!--<![endif]-->Etna
<!--[if !mso]><!- - -->
</td>
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; text-align: left; border-width: 1px 2px 1px 1px; border-style: solid; border-color: #a8c1c1 #769e9e #a8c1c1 #a8c1c1; width: 100px; padding: 3px 0px 3px 8px;">
<!--<![endif]-->2015
<!--[if !mso]><!- - -->
</td>
</tr>
<tr style="vertical-align: top">
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; border-style: solid; border-color: #769e9e; border-width: 1px 1px 2px 2px; width: 125px; padding: 3px 3px 3px 5px;">
<!--<![endif]-->
<!--[if !mso]><!- - -->
</td>
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; border-style: solid; border-color: #769e9e; border-width: 1px 2px 2px 1px; width: 100px; padding: 3px 3px 3px 5px;">
<!--<![endif]-->
<!--[if !mso]><!- - -->
</td>
</tr>
</tbody>
</table>
Here is the http://jsfiddle.net/s7n7exst/
What do yuo think about ?
Updated:
Overall, yes -- what you have would work. Your table would collapse in some outlook clients and if you continue adding on to this, you'll want to test your email using Litmus and/or EmailOnAcid to assure consistency.
I've fixed a couple things and now this should work
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-spacing: 0; border-collapse: collapse;vertical-align: top; color: #000000; font-size: 15px; Margin:25px 0 0 0; font-family: Arial">
<tr height="40" style="vertical-align: top; height: 40px">
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; font-weight: bolder; border-width: 2px 1px 2px 2px; border-style: solid; border-color: #769e9e; text-align: center; padding: 8px 3px 8px 5px; width: 125px;">Vulcano</td>
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; font-weight: bolder; border-width: 2px 2px 2px 1px; border-style: solid; border-color: #769e9e; text-align: center; padding: 8px 3px 8px 5px; width: 100px;">Ultima attivita'</td>
</tr>
<tr style="vertical-align: top">
<td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; text-align: left; border-width: 1px 1px 1px 2px; border-style: solid; border-color: #a8c1c1 #a8c1c1 #a8c1c1 #769e9e; padding: 3px 3px 3px 5px; width: 125px;">Etna</td>
<td valign="middle" style="word-break: break-word; border-collapse: collapse !important;vertical-align: top; text-align: left; border-width: 1px 2px 1px 1px; border-style: solid; border-color: #a8c1c1 #769e9e #a8c1c1 #a8c1c1; width: 100px; padding: 3px 0px 3px 8px;">2015</td>
</tr>
</table>
Related
ave wrapped the Dividers with Containers and trying to provide border radius to clipoff the diveder edge. Edges are not circular as expected.
Container(
width: 135,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
),
child: Divider(
height: 25
thickness: 5,
color: Color(0xFFFFFFFF),
),
),
as provided in below design:
position: absolute;
width: 134px;
height: 5px;
left: calc(50% - 134px/2 + 0.5px);
bottom: 8px;
/* #White */
background: #FFFFFF;
border-radius: 100px;
You can try to wrap Divider in Container and then do the clipping things but it would be great if you directly create a Container that behaves like Divider like this.
You can use this divider widget:
class DividerWidget extends StatelessWidget {
const DividerWidget({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: 10,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Colors.red,
),
);
}
}
Just simply add clipBehavior: Clip.hardEdge in Container as shown below .
Container(
width: 135,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
),
child: Divider(
height: 20,
thickness: 5,
color: colorwhite,
),
),
I have a simple Figma design which contains two layers
First layer with solid color: background: #003274;
Second layer with gradient:
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
background: radial-gradient(100% 245.99% at 0% 0%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
border-radius: 0px;
Now I'm trying to implement this in Flutter code like this:
return new Container(
decoration: new BoxDecoration(
color: Color(0xff003274),
gradient: new RadialGradient(
colors: [Color.fromARGB(102, 255, 255, 255), Color.fromARGB(0, 255, 255, 255)],
radius: 2.5,
center: Alignment(-1.0, -1.0),
),
),
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
)
);
As result I got grey gradient in stead of blue gradient
Could you suggest me how to translate this Figma design whiht gradient to Flutter code?
Don't know whether this is the best way, but it works. Just wrap your Container within another Container, and set its color to the bottom layer solid color.
#override
Widget build(BuildContext context) {
return Container(
color: Color(0xff003274),
child: new Container(
decoration: new BoxDecoration(
gradient: new RadialGradient(
colors: [
Color.fromARGB(102, 255, 255, 255),
Color.fromARGB(0, 255, 255, 255)
],
radius: 2.5,
center: Alignment(-1.0, -1.0),
),
),
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
),
);
}
I'm having a hard time to put items under each other when a ListView is involved.
I've this code :
body:
Column(
children: [
Text('foo'),
Expanded(
child: ListView.builder(
controller: ...,
itemCount: ...,
itemBuilder: ...
)
),
Text('bar')
]
)
,
It gives me the result on the left, but I'd like the one on the right :
I tried to put the ListView in a Container (with an height: double.maxFinite) but its give me an : Bottom overflowed by X pixels.
Edit : Here is the result I'm trying to achieve (run the snippet in "full page") :
body {
font-size: 18px;
margin: 0;
padding: 0;
}
.mobile {
position: relative;
width: 320px;
margin: 0 auto;
border: 1px solid cyan;
max-height: 400px;
overflow-y: scroll;
padding-top: 41px;
}
.appbar {
position: fixed;
top: 0;
width: 300px;
background: rgba(0, 0, 0, 1);
color: white;
padding: 10px;
}
.text {
background: rgba(255, 0, 0, .3);
padding: 10px;
}
.list-view {
background: rgba(0, 255, 0, .3);
padding: 10px;
min-height: 500px;
}
<div class="mobile">
<div class="appbar">AppBar</div>
<div class="text">Text</div>
<div class="list-view">ListView</div>
<div class="text">Text</div>
</div>
You have to use a CustomScrollView
CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: Text("Text"),
),
SliverList(
delegate: SliverChildListDelegate( [
Container(
height: 200.0,
decoration: BoxDecoration(color: Colors.orange),
),
Container(
height: 400.0,
decoration: BoxDecoration(color: Colors.pink),
),
Container(
height: 500.0,
decoration: BoxDecoration(color: Colors.blue),
)
]),
),
SliverToBoxAdapter(
child: Text("Text"),
),
],
)
Notice you can use a SliverChildListDelegate or a SliverChildBuilderDelegate
Try this one
body:
Column(
children: [
Text('foo'),
Expanded(
child: Container(
child: ListView.builder(
shrinkWrap: true,
itemBuilder: .......,
itemCount: .....,
),
),
),
Text('bar')
]
)
,
This code worked for me.
You can add the top and bottom foo and bar as the first and last items of the list. The ListView will have list.length + 2 items.
body: Column(children: [
Text('foo'),
Expanded(
child: ListView.builder(
itemCount: list.length + 2,
itemBuilder: (context, index) {
if (index == 0)
return Text("foo");
else if (index < list.length + 1)
return Text("$index");
else
return Text('bar');
},
),
),
]),
I have a feature in my website that allows people to paste html comments that are then output in a pdf report.
I have an issue that after upgrading from Java 7 to Java 8 (with no other code changes) the iText XMLWorker and CSSResolver seems to output the html tables in the pdf with really thick borders.
Java 7:
Java 8:
Anyone have any idea why this might be?
Are there new settings/libraries for iText for Java 8 that I am missing?
Is this a bug with iTextPdf?
EDIT
Maven dependencies:
<dependency>
<groupId>com.itextpdf</groupId>
<artifactId>itextpdf</artifactId>
<version>5.5.6</version>
</dependency>
<dependency>
<groupId>com.itextpdf.tool</groupId>
<artifactId>xmlworker</artifactId>
<version>5.5.6</version>
</dependency>
<dependency>
<groupId>com.itextpdf</groupId>
<artifactId>itext-asian</artifactId>
<version>5.2.0</version>
</dependency>
Code used to process the user pasted comment:
String commentText = itemComment.getComment();
// CSS
CSSResolver cssResolver = new StyleAttrCSSResolver();
// HTML
HtmlPipelineContext htmlContext = new HtmlPipelineContext( null );
htmlContext.setTagFactory( Tags.getHtmlTagProcessorFactory() );
// Pipelines
ElementList elements = new ElementList();
ElementHandlerPipeline pdf = new ElementHandlerPipeline( elements, null );
HtmlPipeline html = new HtmlPipeline( htmlContext, pdf );
CssResolverPipeline css = new CssResolverPipeline(cssResolver, html);
// XML Worker
XMLWorker worker = new XMLWorker( css, true );
XMLParser p = new XMLParser( worker );
p.parse( new ByteArrayInputStream( commentText.getBytes() ) );
String commentDate = sdf.format( itemComment.getCommentDate() );
String commentAuthor = itemComment.getAuthor().getFirstname() + " " + itemComment.getAuthor().getSurname();
dataTable.addCell(new Phrase(commentDate, labelFont));
dataTable.addCell(new Phrase(commentAuthor, labelFont));
PdfPCell commentCell = new PdfPCell();
commentCell.setColspan( 2 );
Phrase commentPhrase = new Phrase();
commentPhrase.setFont( dataFont );
if( !elements.isEmpty() )
{
for( Element element : elements )
{
commentCell.addElement( element );
}
}
else
{
commentPhrase.add( commentText );
commentCell.addElement( commentPhrase );
}
dataTable.addCell(commentCell);
Sample html (these users copy and paste tables from Excel)
<table style="width: 458pt; border-collapse: collapse;" border="0" cellSpacing="0" cellPadding="0" width="609">
<colgroup><col style="width: 190pt; mso-width-source: userset; mso-width-alt: 9252;" width="253">
</col><col style="width: 55pt; mso-width-source: userset; mso-width-alt: 2669;" span="2" width="73">
</col><col style="width: 56pt; mso-width-source: userset; mso-width-alt: 2706;" width="74">
</col><col style="width: 51pt; mso-width-source: userset; mso-width-alt: 2486;" span="2" width="68">
</col></colgroup><tbody><tr style="height: 15pt; mso-height-source: userset;" height="20">
<td style="border: 0px navy; width: 190pt; height: 15pt; " class="xl77" height="20" width="253"><strong><font color="#000080" size="2" face="Verdana">ABC12345
- 1234567890123</font></strong></td>
<td style="border: 0px navy; width: 55pt; " class="xl66" width="73"></td>
<td style="border: 0px windowtext; width: 55pt; " class="xl67" width="73"></td>
<td style="border: 0px windowtext; width: 56pt; " class="xl67" width="74"></td>
<td style="border: 0px windowtext; width: 51pt; " class="xl68" width="68"></td>
<td style="border: 0px windowtext; width: 51pt; " class="xl68" width="68"></td>
</tr>
<tr style="height: 15pt; mso-height-source: userset;" height="20">
<td style="border: 0.5pt solid windowtext; height: 15pt; " class="xl69" height="20"><font color="#000080" size="2" face="Verdana">Transactional Charges</font></td>
<td style="border-width: 0.5pt 0.5pt 0.5pt 0px; border-style: solid solid solid none; border-color: windowtext windowtext windowtext navy; " class="xl70"><font color="#000080" size="2" face="Verdana">£</font></td>
<td style="border-width: 0.5pt 0.5pt 0.5pt 0px; border-style: solid solid solid none; border-color: windowtext windowtext windowtext navy; " class="xl70"><font color="#000080" size="2" face="Verdana">VAT</font></td>
<td style="border-width: 0.5pt 0.5pt 0.5pt 0px; border-style: solid solid solid none; border-color: windowtext windowtext windowtext navy; " class="xl70"><font color="#000080" size="2" face="Verdana">Total</font></td>
<td style="border-width: 0.5pt 0.5pt 0.5pt 0px; border-style: solid solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0.5pt 0.5pt 0.5pt 0px; border-style: solid solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; width: 190pt; height: 9pt; " class="xl72" height="12" width="253"><font color="#000080" size="2" face="Verdana">Remove item (Labour only)</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; width: 190pt; height: 9pt; " class="xl72" height="12" width="253"><font color="#000080" size="2" face="Verdana">Emergency Removal (Labour Only)</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; width: 190pt; height: 9pt; " class="xl72" height="12" width="253"><font color="#000080" size="2" face="Verdana">Replace item (Labour only)</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; height: 9pt; " class="xl69" height="12"><font color="#000080" size="2" face="Verdana">Additional
Visits</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana">£80.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£16.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£96.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; height: 9pt; " class="xl69" height="12"><font color="#000080" size="2" face="Verdana">Part A123</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; height: 9pt; " class="xl69" height="12"><font color="#000080" size="2" face="Verdana">Part B123</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; height: 9pt; " class="xl69" height="12"><font color="#000080" size="2" face="Verdana">Part C123</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; height: 9pt; " class="xl69" height="12"><font color="#000080" size="2" face="Verdana">Part D123</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; height: 9pt; " class="xl69" height="12"><font color="#000080" size="2" face="Verdana">Security</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; height: 9pt; " class="xl69" height="12"><font color="#000080" size="2" face="Verdana">Visit Requested</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana">£58.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£11.60</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£69.60</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; height: 9pt; " class="xl69" height="12"><font color="#000080" size="2" face="Verdana">Revisit</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; height: 9pt; " class="xl69" height="12"><font color="#000080" size="2" face="Verdana">Admin</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; height: 9pt; " class="xl69" height="12"><font color="#000080" size="2" face="Verdana">Category A
Visit</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; height: 9pt; " class="xl69" height="12"><font color="#000080" size="2" face="Verdana">Warrant</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; height: 9pt; " class="xl69" height="12"><font color="#000080" size="2" face="Verdana">Change of Locks</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: navy windowtext windowtext; height: 9pt; " class="xl69" height="12"><font color="#000080" size="2" face="Verdana">Additional Time
on Site</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl73"><font color="#000080" size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: navy windowtext windowtext navy; " class="xl74"><font color="#000080" size="2" face="Verdana">£0.00</font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: red windowtext windowtext; height: 9pt; " class="xl75" height="12"><strong><font color="#ff0000" size="2" face="Verdana">Total</font></strong></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: red windowtext windowtext red; " class="xl76"><strong><font color="#ff0000" size="2" face="Verdana">£138.00</font></strong></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: red windowtext windowtext red; " class="xl76"><strong><font color="#ff0000" size="2" face="Verdana">£27.60</font></strong></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: red windowtext windowtext red; " class="xl76"><strong><font color="#ff0000" size="2" face="Verdana">£165.60</font></strong></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
<tr style="height: 9pt; mso-height-source: userset;" height="12">
<td style="border-width: 0px 0.5pt 0.5pt; border-style: none solid solid; border-color: windowtext; height: 9pt; " class="xl71" height="12"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
<td style="border-width: 0px 0.5pt 0.5pt 0px; border-style: none solid solid none; border-color: windowtext; " class="xl71"><font size="2" face="Verdana"> </font></td>
</tr>
</tbody></table>
As stated in my comment to the question, we have a strange situation.
|Java | iText 5.5.6 | iText 5.5.7
|7 | good | bad
|8 | bad | bad
It turns out after some investigation that the inconsistency in iText 5.5.6 was created through our use of HashMap. In Java 7, the iterator went through a certain HashMap as follows: border-left-style first, and afterwards to border-left-width; in Java 8, it's the other way round. Since our code in com.itextpdf.tool.xml.css.apply.HtmlCellCssApplier::setLeftOfBorder depends on the order of the iteration, our implementation was vulnerable to this change.
The behavior of HashMap iteration has changed in Java 8, as you can see in http://examples.javacodegeeks.com/core-java/util/hashmap/hashmap-changes-in-java-8/ .
We were aware of this and included a fix in iText 5.5.7, replacing HashMap with LinkedHashMap, because the latter guarantees 'historic' iteration over the entryset. See https://github.com/itext/xmlworker/commit/92b2146bcb37b283863e24e5cb18ed661411387c . Apparently, this was not exactly the right move because both Java 7 and 8 get the wrong order now. I will add this to the development backlog and we'll try to fix this issue.
EDIT1:
Below is a minimal use case which we are trying to fix. It currently produces a rectangle around one of the cells, which of course shouldn't happen.
<table>
<tr>
<td style="border-style: none; border-width: 0px;">a</td>
<td style="border-width: 0px; border-style: none;">a</td>
</tr>
</table>
EDIT2: The fix is available since iText 5.5.8, released on Nov. 27th
I've tried every which way, simply pasting an embed iframe from youtube into the embed window of my TinyMCE editor results in the below code which does not render or work correctly in my browser.
To be quite honest I'm not even sure what this outputted garbage is?
TinyMCE output:
<p><img class="mce-object mce-object-iframe" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="560" height="315" data-mce-p-src="https://www.youtube.com/embed/GQ2BXqST758" data-mce-object="iframe" data-mce-selected="1"></p><div id="mceResizeHandlen" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: n-resize; margin: 0px; padding: 0px; left: 272px; top: 4.5px;"></div><div id="mceResizeHandlee" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: e-resize; margin: 0px; padding: 0px; left: 539.5px; top: 272px;"></div><div id="mceResizeHandles" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: s-resize; margin: 0px; padding: 0px; left: 272px; top: 539.5px;"></div><div id="mceResizeHandlew" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: w-resize; margin: 0px; padding: 0px; left: 4.5px; top: 272px;"></div><div id="mceResizeHandlenw" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: nw-resize; margin: 0px; padding: 0px; left: 4.5px; top: 4.5px;"></div><div id="mceResizeHandlene" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: ne-resize; margin: 0px; padding: 0px; left: 539.5px; top: 4.5px;"></div><div id="mceResizeHandlese" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: se-resize; margin: 0px; padding: 0px; left: 539.5px; top: 539.5px;"></div><div id="mceResizeHandlesw" data-mce-bogus="all" class="mce-resizehandle" unselectable="true" style="cursor: sw-resize; margin: 0px; padding: 0px; left: 4.5px; top: 539.5px;"></div>
TinyMCE Settings
tinymce.init({
plugins: 'link image code',
relative_urls: false,
selector: "textarea",
content_css : "/static/css/style.css",
plugins : "media",
media_poster: false,
media_strict: false,
// theme_advanced_buttons1_add : "media",
theme_advanced_buttons1: "code",
extended_valid_elements : "iframe[src|width|height|name|align]"
});
Does anybody have any idea what I'm doing wrong here?