I have a PDF that is being generated by TCPDF in php. The whole thing looks great, but I cant increase the size of font in any section of the table that is generated. My CSS is not great, but any idea what I am doing wrong?
CSS:
<style>
}
table.first {
color: #003300;
font-family: helvetica ;
font-size: 8pt;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: white;
}
td {
border: 1px solid black;
background-color: white;
}
</style>
HTML:
<table class="first" cellpadding="0" cellspacing="0">
<tr>
<td width="50%"><B>1a.</b> Name of Insurance Plan (<B>OFFICE USE ONLY</b>):
<BR>
<BR><BR>
<BR><B>1b.</b> Insurance I.D. Number (<B>UTAH ONLY</b> - Check with the patient and if they have Utah Medicaid and include the Medicaid I.D. Number.):
<BR><BR><B><span style='font-size: 24pt;'>$medicaidid,</span></b>
<BR><BR><B>1c.</b> Patient Name (Last Name, First Name) & DOB (Typed out, example: January 01, 1901):
<BR><BR><B>$name</b>
<BR><B>$dob</b><BR></td>
<td width="50%"><B>2a.</b><BR> <img src="lilogo.png" style="width:8500%;" height="75">
<BR><B>2b.</b> Appointment Number: <BR><BR> <B>$appid</b></td>
</tr>
</table>
remove the } under the style tag
This is your code:
<style>
}
table.first {
color: #003300;
font-family: helvetica;
Try this instead:
<style>
table.first {
color: #003300;
font-family: helvetica;
I dont know what are you trying to say, but on jsfiddle.net there is no issue regarding font size as for example when I tried,
*{
font-size:20px;
}
it worked good or if you have any other issue, please be clear !
Related
I am using dompdf in codeigniter, the HTML page looks fine but in dompdf generated pdf, there is a black box.
The code in the footer section is:
<div class="signature-footer">
<table>
<tr>
<td style="text-align: center;border-style:dashed; border-top:1px black;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;">Prepared By<br><?php echo $quotation_detail[0]->employee_name; ?><br><?php echo $quotation_detail[0]->designation_name ; ?></td>
<td style="width: 30%;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="text-align: center;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="width: 30%;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="text-align: center;border-style:dashed; border-top:1px black;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;">Authorized Signature<br> <br> </td>
</tr>
</table>
</div>
</div><div class="below-border-footer"></div><div style="text-align: center"><img src="<?php echo base_url(); ?>interface/img/footerImage.png"> </div></div></body>
</html>
CSS for these two elements:
.below-border-footer {
width: 100%;
border-top: 0 ;
padding-bottom: 0;
text-align: center;
}
.signature-footer {
font-size: 12px;
font-weight: bold;
width: 100%;
position: relative;
margin-top: 70px;
margin-bottom: 2px;
}
I've tried for hours but no result. How can I remove the black box in the footer?
I'm making a Wordpress module to reserve a room.
Now I use mPDF to create the contracts of the reservations automatically.
mPDF has problems with creating tables with on every row a border line.
When I create the table and view it in html everything looks fine. But when I create a PDF with mPDF the does not show me the row bottom border.
This is the html code that I use to generate the pdf:
.logo
{
display: inline-block;
width: 130;
height: 146;
align: left;
hspace: 12;
}
.headerText
{
display:inline-block;
text-align: right;
float:right;
}
.header{
padding-bottom: 20px;
}
.table{
border-left: thin solid;
border-right: thin solid;
border-bottom: thin solid #000000;
border-top: thin solid;
}
.table{
margin-top: 10px;
margin-bottom: 10px;
border-collapse: collapse;
}
table tr {
border-bottom: 1px solid black;
}
table tr:last-child {
border-bottom: none;
}
.Cell
{
width: 300px;
}
.firstCell
{
border-left: thin;
border-right: thin solid;
border-bottom: thin;
border-top: thin;
}
.smallCell
{
width:150px;
}
.largeCell
{
width: 450px;
}
.row
{
display: block;
}
.koninklijkeLogo
{
width: 30px;
}
.maxSize
{
width: 600px;
}
<table class="table">
<tr class="row">
<td class="smallCell firstCell">Naam:</td>
<td class="largeCell">{%name%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Adres:</td>
<td class="largeCell">{%adres%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Telefoonnummer:</td>
<td class="largeCell">{%phone%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">E-mailadres:</td>
<td class="largeCell">{%mail%}</td>
</tr>
</table>
Can I resolve the problem by changing some of my code or is this a bug in mPDF?
From this document, it appears that borders for tr elements are supported by the latest version of mPDF (version 6).
Are you using the latest version?
Maybe you can try to apply a bottom border to the cells only, and not the rows? (Just make sure there are no table cellspacing or td cell margins, or you will see gaps in the borders).
I am trying to build a comment system below my articles where users can reply on the comment as well. Comment or its reply can be posted by only logged-in users.
There I have created 4 tables in MySQL.
User Table
<style type="text/css">
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
</style>
<table class="tableizer-table">
<tr class="tableizer-firstrow"><th>id</th><th>email</th></tr>
<tr><td>1</td><td>abc#gmail.com</td></tr>
<tr><td>2</td><td>xyz#gmail.com</td></tr>
<tr><td>3</td><td>pqr#gmail.com</td></tr>
<tr><td>4</td><td>abc#yahoo.com</td></tr>
<tr><td>5</td><td>xyx#yahoo.com</td></tr>
</table>
Profile Table
<style type="text/css">
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
</style>
<table class="tableizer-table">
<tr class="tableizer-firstrow"><th>id</th><th>user_id</th><th>fname</th><th>lname</th></tr>
<tr><td>1</td><td>3</td><td>PQR</td><td>Gmail</td></tr>
<tr><td>2</td><td>2</td><td>XYZ</td><td>Gmail</td></tr>
<tr><td>3</td><td>1</td><td>ABC</td><td>Gmail</td></tr>
<tr><td>4</td><td>5</td><td>XYZ</td><td>Yahoo</td></tr>
<tr><td>5</td><td>4</td><td>ABC</td><td>Yahoo</td></tr>
</table>
Article Table
<style type="text/css">
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
</style>
<table class="tableizer-table">
<tr class="tableizer-firstrow"><th>id</th><th>article_title</th><th>article_content</th></tr>
<tr><td>1</td><td>Helooooooo</td><td>Hi, How are you?</td></tr>
<tr><td>2</td><td>Hiiiiiiiiiiii</td><td>Hey, How are you?</td></tr>
<tr><td>3</td><td>Heeeeeey</td><td>Hello, How are you?</td></tr>
</table>
Comment Table
<style type="text/css">
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
</style>
<table class="tableizer-table">
<tr class="tableizer-firstrow"><th>id</th><th>article_id</th><th>user_id</th><th>parent_comment_id</th><th>Comment</th></tr>
<tr><td>1</td><td>2</td><td>5</td><td>0</td><td>Great Article</td></tr>
<tr><td>2</td><td>2</td><td>2</td><td>0</td><td>Nice Article</td></tr>
<tr><td>3</td><td>2</td><td>4</td><td>1</td><td>I agree Great Article</td></tr>
<tr><td>4</td><td>2</td><td>1</td><td>1</td><td>I also agree Great Article</td></tr>
<tr><td>5</td><td>2</td><td>3</td><td>0</td><td>Bad Article</td></tr>
<tr><td>6</td><td>2</td><td>4</td><td>2</td><td>OK Artilce</td></tr>
</table>
I want my output to display as:
Name: XYZ Yahoo (Comment)
Great Article
Name: ABC Yahoo (Reply on 1st Comment)
I agree Great Article
Name: ABC Gmail (Reply on 1st Comment)
I also agree Great Article
Name: XYZ Gmail (Comment)
Nice Article
Name: ABC Yahoo (Reply on 2nd Comment)
OK Artilce
Name: PQR Gmail (Comment)
Bad Article
In the above comment system i am using hierarchical table structure to store comment and its replys.
Hope i have been able to explain my problem.
Can someone help me with MySQL statement and php code
I would tweak the order by clause a little bit so you would get all posts in the right order on php side, so you can simply loop through the resultset.
$sql = 'SELECT c.id, parent_comment_id,`comment`, p.fname, p.lname FROM comment c INNER JOIN profile p on c.user_id=p.user_id INNER JOIN WHERE article_id='.$article_id . ' ORDER BY IF(parent_comment_id=0,id,parent_comment_id) ASC, id ASC;'
While looping through the resulset in php I would build an array to hold the ids of each record to determine their rank within the comments. Although, I should note, that on forums you can rarely see the reference that a comment is a response to the first comment, you can usually see that a comment is a response to a comment made by sy at such and such time. Anyway, the helper array can hold user names and timestamps of the records as well.
//outside the loop
//initialise rowcount variable to 0
$rowcount=0
...
//within the loop
//rowcount variable
$rowcount++;
$helper[$row['id']]=$rowcount;
...
//if a comment has a parent comment, get the parent's rownumber
echo 'Reply to ' . $helper[$row['parent_comment_id']] . '. comment';
So I've got a form... The relevant CSS is (I think):
.libform input {
background-color:transparent;
color:#000;
border-left:0;
border-right:0;
border-top:0;
border-bottom: 1px solid #555;
margin: 0 5px 1px 5px;
display:inline-block;
}
.libform input:focus {
border:0;
border-bottom: 1px dotted #000;
color:#939;
background-color:#fed;
}
.error {
border-bottom: 1px solid red;
}
Form field:
<? if ($name=="") {$nameerror="error";}?>
<input name="name" type="text" class="<?php echo $nameerror;?>" value="<?echo $name;?>" id="name">
I'd like for when they've left the field blank the input button's underline to change from black to red. But it doesn't seem to inherit right. What am I doing wrong?
Most likely a specificty issue. try:
.libform input.error {
border-bottom: 1px solid red;
}
Try .libform .error.
http://www.htmldog.com/guides/cssadvanced/specificity/CSS Specificity
This is most likely the culprit for this page:
http://www.mypicx.com/04192010/ff/
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
font-family:Arial, Helvetica, sans-serif; letter-spacing: 1px; font-size:3;
font-size:10px;
}
th
{
background-color:#A7C942;
color:white;
}
I don't know why, but the page has some php scripts in it which shows a table from mysql database. As you can see in the url above.
Please help, why do I see those lines everytime I put those css scripts
Looks like your borders are being set to all of the tables in the page, and not just one.
Try something like:
.mytable
{
border-collapse:collapse;
}
.mytable th, .mytable td
{
border: 1px solid black;
font-family:Arial, Helvetica, sans-serif; letter-spacing: 1px; font-size:3;
font-size:10px;
}
.mytable th
{
background-color:#A7C942;
color:white;
}
And use a class in the HTML on the table you wish to have these borders on:
<table class="mytable">
<tr>
<th>Time</th>
</tr>
<tr>
<td><span class="A">8:00 AM</span></td>
</tr>
</table>