Dompdf table border issue when HTML code converted to pdf file - php

I am using the DOMPdf library to convert HTML code to PDF. I have designed the table in HTML when I run the file in the browser which renders fine but when I actually generate the PDF file one cell has right side border missing and one cell which should not display the border has borders.
Expected result
Actual Result I Got.
Here is my code
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>PaySlip</title>
<style>
.custom-font {
font-weight: bold;
}
table.blueTable {
border: 1px solid #000000;
background-color: #ffffff;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.blueTable td,
table.blueTable th {
border: 1px solid #020202;
padding: 3px 2px;
}
table.blueTable tbody td {
font-size: 13px;
}
table.blueTable tr:nth-child(even) {
background: #ffffff;
}
table.blueTable thead {
background: #1c6ea4;
background: -moz-linear-gradient(top,
#5592bb 0%,
#327cad 66%,
#1c6ea4 100%);
background: -webkit-linear-gradient(top,
#5592bb 0%,
#327cad 66%,
#1c6ea4 100%);
background: linear-gradient(to bottom,
#5592bb 0%,
#327cad 66%,
#1c6ea4 100%);
border-bottom: 2px solid #444444;
}
table.blueTable thead th {
font-size: 15px;
font-weight: bold;
color: #ffffff;
border-left: 2px solid #d0e4f5;
}
table.blueTable tfoot td {
font-size: 14px;
}
table.blueTable tfoot .links {
text-align: right;
}
</style>
</head>
<body>
<table class="blueTable">
<thead>
<tr>
<th colspan="4" style="text-align: center">
Payslip for the Month of XYZ - 2019
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="custom-font">Name Of Employee</td>
<td>Placeholder</td>
<td class="custom-font">Payable Days</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">Employee Code</td>
<td>Placeholder</td>
<td class="custom-font">Paid Days</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">Designation</td>
<td>Placeholder</td>
<td class="custom-font">Joining Date</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">PAN No.</td>
<td>Placeholder</td>
<td class="custom-font">Date Of Birth</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">Aadhaar No.</td>
<td>Placeholder</td>
<td class="custom-font">Bank Name</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">PF No.</td>
<td>Placeholder</td>
<td class="custom-font">Bank Account No</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">UAN</td>
<td>Placeholder</td>
<td class="custom-font">Location</td>
<td>Placeholder</td>
</tr>
<!-- space -->
<tr style="border-right:">
<td style="border-right-style: hidden;"> </td>
<td style="border-right-style: hidden;"> </td>
<td style="border-right-style: hidden;"> </td>
<td> </td>
</tr>
<!-- Salary info -->
<tr style="text-align: center">
<th>Earnings</th>
<th>Amount[INR]</th>
<th>Deductions</th>
<th>Amount[INR]</th>
</tr>
<tr>
<td class="custom-font">Basic Salary</td>
<td></td>
<td class="custom-font">Provident Fund</td>
<td></td>
</tr>
<tr>
<td class="custom-font">House Rent Allowance</td>
<td class="custom-font"></td>
<td class="custom-font">Professional Tax</td>
<td></td>
</tr>
<tr>
<td class="custom-font">Conveyance Allowance</td>
<td></td>
<td class="custom-font">TDS</td>
<td></td>
</tr>
<tr>
<td class="custom-font">Medical Allowance</td>
<td></td>
<td rowspan="3"></td>
<td rowspan="3"></td>
</tr>
<tr>
<td class="custom-font">Mobile Allowance</td>
<td></td>
</tr>
<tr>
<td class="custom-font">Executive Allowance</td>
<td></td>
</tr>
<!-- space -->
<tr>
<td style="border-right-style: hidden;"> </td>
<td style="border-right-style: hidden;"> </td>
<td style="border-right-style: hidden;"> </td>
<td> </td>
</tr>
<!-- Totals -->
<tr>
<th>Total Earnings</th>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th colspan="4">Net Pay : - Rs. 00,000.00/-</th>
</tr>
<tr>
<th colspan="4">
Net Pay (In Words): - Rs. 0 Thousand 0 Hundred and 0 Only
</th>
</tr>
<!-- space -->
<tr style="border-bottom:hidden">
<td colspan="4" style="border-left-style: hidden;border-right-style: hidden;text-align: center">
"This is a computer generated statement and does not require any
signature or stamp."
</td>
</tr>
<!-- leave details -->
<tr>
<th class="custom-font" colspan="4" style="border-left-style:hidden;border-right-style:hidden">Leave Balance</th>
</tr>
<tr>
<td class="custom-font" colspan="2">Accumulated Leave (Opening Leaves)</td>
<td colspan="2">0</td>
</tr>
<tr>
<td class="custom-font" colspan="2">Leave Taken</td>
<td colspan="2">0</td>
</tr>
<tr>
<td class="custom-font" colspan="2">Leave Balance (Closing Leaves)</td>
<td colspan="2">0</td>
</tr>
</tbody>
</table>
</body>
</html>


This is a rendering issue with Dompdf versions 0.8.3 and earlier. The core of the issue is the rendering order of the table cells in combination with the technique used to render table cell borders and backgrounds when the borders are collapsed.
First, as with everything in Dompdf earlier elements are rendered before later elements in the document structure. When a cell spans rows it is rendered prior to cells in the following rows. This is important because of the stacking order of objects in the PDF (later objects are rendered above earlier ones).
Second, cell borders are rendered by a single cell within a grouping of any two adjacent cells. For horizontally adjacent cells the cell on the right renders the left border. For vertically adjacent cells the cell on the bottom renders the top border.
Third, cell backgrounds are rendered to the edge of the cell without consideration of borders.
Now take these three facts into account in consideration of a row-spanned cell that is to the right of other table cells. The left border of the row-spanned cell will be rendered. The adjacent cells in the following row will not render a border, and any background is rendered the full width of the cell. Because of this the later cell's background will render over top of the border of the row-spanned cell.
You can see this issue in the following example (when run in, for example, Dompdf 0.8.3):
<head>
<title>Row-span overlap</title>
<style>
table {
border-collapse: collapse;
}
table td {
border: 1px solid red;
background-color: #0000ff66;
}
.rowspan {
border-left-width: 10px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td>
<td rowspan="2">2</td>
</tr>
<tr>
<td>3</td>
</tr>
</tbody>
</table>
</html>
The issue will be addressed in Dompdf 0.8.4. The primary change to address the bug was to render the background within the border.

Related

How do I vertically align text & image in a table cell

So my problem can be seen in this picture:
How do I make every cell have the text at the same height? The last <th> (text+img) drags it down for some reason.
My css:
.table {
width: 100%;
padding: 0;
margin: 15px 0 0;
border-collapse: collapse
}
.table th {
text-align: left;
color: #fff;
background: 0 0;
text-transform: uppercase;
font-size: .9em;
line-height: 1em;
padding: .5em;
}
.table th.gold {
color: #ffdd45
}
.table td {
padding: .7em .5em .6em;
font-size: 1.1em;
line-height: 1.2em;
background: #222;
border: 2px solid rgba(0, 0, 0, 0);
vertical-align: middle;
}
<table class="table rate" style="margin-top: 0;">
<thead>
<tr>
<th>#</th>
<th>User</th>
<th>Number 1</th>
<th class="gold">Number 2</th>
<th>text+img</th>
</tr>
</thead>
<tbody id="players-table1">
<tr>
<td style="text-align: center;">1</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user0</span></a>
</td>
<td>4</td>
<td class="bold gold">500</td>
<td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:10%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">2</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user</span></a>
</td>
<td>4</td>
<td class="bold gold">400</td>
<td style="width:10%"><i>35x<img src="piclink" style="width:55%;height:10%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">3</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user2</span></a>
</td>
<td>3</td>
<td class="bold gold">300</td>
<td style="width:10%"><i>35x<img src="piclink" style="width:55%;height:10%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">4</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user2</span></a>
</td>
<td>3</td>
<td class="bold gold">300</td>
<td style="width:10%"><i>35x<img src="piclink"/></i></td>
</tr>
</tbody>
</table>

There are 2 ways to fix this:
Decreasing the height of the image(which is what I did in answer), this was 10% before and I made it as 5%. The td content was pushing down due to that.
If you don't want to decrease the height of the image then you have to increase the height of the each row so that the height can easily fit-in.
so call is yours what to choose.
.table {
width: 100%;
padding: 0;
margin: 15px 0 0;
border-collapse: collapse
}
.table th {
text-align: left;
color: #fff;
background: 0 0;
text-transform: uppercase;
font-size: .9em;
line-height: 1em;
padding: .5em;
}
.table th.gold {
color: #ffdd45
}
.table td {
padding: .7em .5em .6em;
font-size: 1.1em;
line-height: 1.2em;
background: #222;
border: 2px solid rgba(0, 0, 0, 0);
vertical-align: middle;
border: 1px solid red;
}
<table class="table rate" style="margin-top: 0;">
<thead>
<tr>
<th>#</th>
<th>User</th>
<th>Number 1</th>
<th class="gold">Number 2</th>
<th>text+img</th>
</tr>
</thead>
<tbody id="players-table1">
<tr>
<td style="text-align: center;">1</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user0</span></a>
</td>
<td>4</td>
<td class="bold gold">500</td>
<td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">2</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user</span></a>
</td>
<td>4</td>
<td class="bold gold">400</td>
<td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">3</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user2</span></a>
</td>
<td>3</td>
<td class="bold gold">300</td>
<td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">4</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user2</span></a>
</td>
<td>3</td>
<td class="bold gold">300</td>
<td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>
</tr>
</tbody>
</table>

PHP Mpdf - move table to next page if it doesn't fit in actually page

I have to create dynamically a PDF file using Mpdf. The page/s contain multiple tables.
I would like to move the table to the next page if it doesn't fit in the page. At the moment it brokes in 2 pieces (once piece in one page, check the image I added).
Is there any possibility to move the table to the next page? Like I said, I create the file dynamically, so I don't know how many tables I have or how long will be the last row (with text) of the table.
[![At the end, it breaks in 2 pieces][1]][1]
Here is a table example:
body {
font-family: Arial;
line-height:12px;
color: #000000;
font-size:10px;
}
p{
margin: 0 0 10px;
}
h1 {
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
margin-bottom:15px;
}
.nabidka-container {
width:1000px;
margin: 0 auto;
}
.nabidka-container .products:first-child {
margin-bottom:40px;
}
.nabidka-container .products{
border-collapse: collapse;
margin: 35px 0 40px 0;
table-layout: fixed;
width: 100%;
overflow:wrap;
display:block;
page-break-inside:auto
}
.nabidka-container .products,.nabidka-container .products tr td, .nabidka-container .products tr th {
page-break-inside: initial !important;
}
.nabidka-container .products td {
width:25%;
border: 1px solid gray;
padding:2px;
text-align: center;
}
.nabidka-container .products td.foto {
border: 0px;
}
.nabidka-container .products td.bezramu {
border: 0px;
background-color: #ffffff;
}
.nabidka-container .products .tab_popis {
width: 200px;
}
.nabidka-container .products .tab_hodnoty {
width: 50px;
}
.nabidka-container .products .bold {
font-weight: bold;
}
.nabidka-container .products .italic {
font-style: italic;
}
.nabidka-container .products .left {
text-align: left;
}
.nabidka-container .products .right {
text-align: right;
}
.nabidka-container .products .price {
background-color: #cecece;
font-weight: bold;
}
<div class="nabidka-container">
<table class="products" style="width:100%">
<tbody>
<tr>
<td class="tab_popis foto"> </td>
<td class="tab_hodnoty foto"><img src="https://devlocal.optimtop.cz/storage/files/sources/images/products/p283_01_small.jpg" class="foto"></td>
<td class="tab_hodnoty foto"><img src="https://devlocal.optimtop.cz/storage/files/sources/images/products/p213_01_small.jpg" class="foto"></td>
<td class="tab_hodnoty foto"><img src="https://devlocal.optimtop.cz/storage/files/sources/images/products/p275_01_small.jpg" class="foto"></td>
<td class="tab_hodnoty foto"><img src="https://devlocal.optimtop.cz/storage/files/sources/images/products/p188_01_small.jpg" class="foto"></td>
</tr>
<tr>
<td class="tab_popis foto"> </td>
<td class="tab_hodnoty bold">Válcové brikety</td>
<td class="tab_hodnoty bold">Brikety RUF</td>
<td class="tab_hodnoty bold">Brikety RUF</td>
<td class="tab_hodnoty bold">Noční brikety</td>
</tr>
<tr>
<td class="tab_popis left">Kód</td>
<td class="tab_hodnoty">DBVMPR800</td>
<td class="tab_hodnoty">RUFHEX840</td>
<td class="tab_hodnoty">RUFMEX840</td>
<td class="tab_hodnoty">NOCVB720</td>
</tr>
<tr>
<td class="tab_popis left">Hmotnost balení</td>
<td class="tab_hodnoty">10 kg</td>
<td class="tab_hodnoty">10 kg</td>
<td class="tab_hodnoty">10 kg</td>
<td class="tab_hodnoty">10 kg</td>
</tr>
<tr>
<td class="tab_popis left">Hmotnost palety</td>
<td class="tab_hodnoty">800 kg</td>
<td class="tab_hodnoty">840 kg</td>
<td class="tab_hodnoty">840 kg</td>
<td class="tab_hodnoty">720 kg</td>
</tr>
<tr>
<td class="tab_popis left">Počet balení na pal.</td>
<td class="tab_hodnoty">80</td>
<td class="tab_hodnoty">84</td>
<td class="tab_hodnoty">84</td>
<td class="tab_hodnoty">72</td>
</tr>
<tr>
<td class="tab_popis left">Průměrná výhřevnost</td>
<td class="tab_hodnoty">18.8 MJ/kg</td>
<td class="tab_hodnoty">18.5 MJ/kg</td>
<td class="tab_hodnoty">18 MJ/kg</td>
<td class="tab_hodnoty">18 MJ/kg</td>
</tr>
<tr>
<td class="tab_popis left price">Cena/ks</td>
<td class="tab_hodnoty price">41.88 Kč</td>
<td class="tab_hodnoty price">46.43 Kč</td>
<td class="tab_hodnoty price">40.48 Kč</td>
<td class="tab_hodnoty price">53.47 Kč</td>
</tr>
<tr>
<td class="tab_popis left price">Cena/paleta</td>
<td class="tab_hodnoty price">3350 Kč</td>
<td class="tab_hodnoty price">3900 Kč</td>
<td class="tab_hodnoty price">3400 Kč</td>
<td class="tab_hodnoty price">3850 Kč</td>
</tr>
<tr>
<td class="tab_popis left price">Cena/tuna</td>
<td class="tab_hodnoty price">4188 Kč</td>
<td class="tab_hodnoty price">4643 Kč </td>
<td class="tab_hodnoty price">4048 Kč</td>
<td class="tab_hodnoty price">5347 Kč</td>
</tr>
<tr>
<td class="tab_popis bezramu"></td>
<td class="tab_hodnoty italic ">SUPER CENA průměr 9 mm</td>
<td class="tab_hodnoty italic ">100% buk</td>
<td class="tab_hodnoty italic ">SUPER CENA dub,buk,jasan</td>
<td class="tab_hodnoty italic ">dlouhá doba žhnutí</td>
</tr>
</tbody>
</table>
</div>
Thanks for your help.

I manage to fix it using page-break-inside: avoid. But you need to add $mpdf->shrink_tables_to_fit = 1; to your mpdf object or attribute autosize="1" to your table element. (without shirt_tables_to_fit or autosize, it will add one table to one page (at least that was the behaviour in my case).
For more info about table shrink check Tables - Tables - mPDF Manual

Html2PDF HTML code issue

Well I have been at this for hours now. I'm using HTML2PDF to generate an invoice. My program creates a temporary invoice without issue. The issue I'm having is once the program tries to create a PDF from the temp file I'm getting an error:
ERROR n°5
File : /home/x/public_html/office/cron/invoices/php-pdf/_class/parsingHtml.class.php
Line : 218
HTML code invalid, all tags must be closed.
Status :
Array
(
[0] => page
[1] => table
[2] => tr
[3] => td
[4] => table
[5] => tr
[6] => td
)
I understand its saying all the HTML tags have not been closed. I've validated my code many different times, many different ways and sites and all are returning valid. I had some style issues that have been fixed but I still have no luck. My html is as follows:
<!doctype html>
<html>
<head>
<title>Untitled Document</title>
<style>
<!--
body {font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
.center {text-align:center;}
.ltgray {color:#C5C5C5;}
.invoice {vertical-align:text-top;}
.gbk td {background-color:#EDEBEB; border:none; font-size:13px; padding-bottom:8px; padding-top:8px; padding-left:10px}
.btboader { border-bottom:thin dotted; border-color:#E4E2E2; padding-bottom:8px; padding-top:8px; padding-left:10px }
.ltgrayt {color:#969696;}
.center {align-content:center; font-size:12px; font-weight:bold;}
.db {border:thin dotted; background-color:#EDEBEB;}
.padded {padding-left:15px;}
.hr { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); }
-->
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<td class="invoice"><h2 class="ltgray">Invoice</h2> </td>
<td style="float: right">
<table>
<tr>
<td>Date:</td> <td> 03/12/2015</td>
</tr>
<tr>
<td>Invoice #:</td> <td> 100367</td>
</tr>
<tr>
<td> Propery </td> <td> N/a </td>
</tr>
</table>
</td>
</tr>
</table>
<p></p>
<table style="width: 95%; margin: 0 auto;">
<tr>
<td style="width: 50%"><span class="ltgray">Company Information</span><br />
<strong>XXX</strong><br />XXXX<br />XXXX</td>
<td style="width: 50%"><span class="ltgray">Customer Information</span><br />
<strong>XXXX</strong><br />XXXX<br />
XXXX<br />XXXX<br />Phone: XXXX<br />Email: XXXX</td>
</tr>
</table>
<br /><p></p>
<table style="width: 100%" class="tbl">
<tr class="gbk">
<td style="width: 60%"><strong>Item</strong></td>
<td style="width: 15%"><strong>Price</strong></td>
<td style="width: 10%"><strong>Qty</strong></td>
<td style="width: 15%; margin: 0 auto;"> <strong>Total</strong> </td>
</tr>
<tr>
<td style="width: 60%" class="btboader">Mulch - Red</td>
<td style="width: 15%" class="btboader">$2.50</td>
<td style="width: 10%" class="btboader">153</td>
<td style="width: 15%; margin: 0 auto;" class="btboader">$382.50</td>
</tr>
<tr>
<td style="width: 60%" class="btboader">Mulch - Black</td>
<td style="width: 15%" class="btboader">$3.50</td>
<td style="width: 10%" class="btboader">1</td>
<td style="width: 15%; margin: 0 auto;" class="btboader">$3.50</td>
</tr>
<tr>
<td style="width: 60%" class="btboader">Mulch - Brown<br><small>Bagged mulch, price includes delivery - Total 2 1/2 pallets</small> </td>
<td style="width: 15%" class="btboader">$3.50</td>
<td style="width: 10%" class="btboader">160</td>
<td style="width: 15%; margin: 0 auto;" class="btboader">$560.00</td>
</tr>
<tr>
<td colspan="2">
<table style="width: 100%">
<tr>
<td style="width: 20%">Payment Terms:</td>
<td style="width: 80%">Due On Receipt</td>
</tr>
<tr>
<td style="width: 50%">Discount(%):</td>
<td style="width: 50%">10.0</td>
</tr>
<tr>
<td style="width: 50%">Past Due Amount:</td>
<td style="width: 50%">$0.00</td>
</tr>
</table>
</td>
<td colspan="2">
<table style="width: 100%">
<tr>
<td style="width: 50%" class="ltgrayt">Subtotal:</td>
<td style="width: 50%; float: right;">$946.00</td>
</tr>
<tr>
<td style="width: 50%" class="ltgrayt">Tax (6.5%):</td>
<td style="width: 50%; float: right;"> $0.00</td>
</tr>
<tr>
<td style="width: 50%" class="ltgrayt">Discount:</td>
<td style="width: 50%; float: right;"> $94.60</td>
</tr>
<tr>
<td style="width: 50%" class="ltgrayt">Past Due:</td>
<td style="width: 50%; float: right;"><strong> $0.00 </strong></td>
</tr>
<tr>
<td style="width: 50%" class="ltgrayt">Total:</td>
<td style="width: 50%; float: right;"><strong> $851.40 </strong></td>
</tr>
</table>
</td>
</tr>
</table>
<br /><br />
<table class="db" style="width: 80%; margin: 0 auto;">
<tr>
<td><strong class="padded"><small>Order Notes:</small></strong><br /><p class="padded">Thank you for your business!</p>
</td>
</tr>
</table>
<hr class="hr">
<p class="center">XXXX, XXXX, XXXX - Phone: XXXX - Direct Cell: XXXX Email:XXXX<br />
Please make checks payable to: XXXX</p>
</body>
</html>
What am I missing that's causing this error? The only other thing I could think of is that HTML2PDF doesn't support something in my styling. I use HTML2PDF for another project without issue so Im not sure where I made a wrong turn.

HTML, CSS & PHP cross browser styling

I'm a self taught coder and usually I can figure out problems for myself but this ones a stubborn one. I'm redesigning a website for my friend and I've successfully coded the mobile version of his site, but the desktop version is proving to be difficult.
The site is a database for a home bar, tracking; Drinkers, Shots, Units and Tabs. The index page is a leaderboard with Drinkers & Last Drink bought. My problem is positioning the Drinkers Ranks on the leaderboard to work across multiple web browsers.
It's meant to look like this: (screenshot)
http://giblets-grave.co.uk/previews/1400x900_GG-desktop_design_final.jpg
The alternating background is something I'm willing to scrap if it makes echoing results easier.
I've tried using tables, divs, ul/li's.. sample of what I used:
<table cellpadding="0" cellspacing="0">
<col width="85px" />
<col width="65px" />
<col width="65px" />
<tr>
<th colspan="3" align="left">Chris Clarkson</th>
</tr>
<tr>
<td>
<div class="crop round-five body-shadow" >
<img src="uploads/1.jpg" class="" />
</div>
</td>
<td>
<ul><h2>382.73</h2><li>units</li></ul><br />
</td>
<td>
<ul><h2>613</h2><li>shots</li></ul><br />
</td>
</tr>
</table>
but its just coming out as a big mess, can anyone help?

Definitely should be using table to do this in my opinion.
As for displaying the alternating colors, you would want to apply a background color to the tr's using nth-child() pseudo-class.
JSFIDDLE: http://jsfiddle.net/XYh7f/
HTML:
<div class="container">
<div class="leaderboard">
<table id="main">
<tr>
<td>Leaderboard</td>
</tr>
<tr>
<td>
<table class="client">
<tr>
<th colspan="3">Chris Clarkson</th>
</tr>
<tr>
<td>IMG</td>
<td>267.26 units</td>
<td>457 shots</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="client">
<tr>
<th colspan="3">Chris Clarkson</th>
</tr>
<tr>
<td>IMG</td>
<td>267.26 units</td>
<td>457 shots</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="drinks">
<table id="main-data">
<tr>
<td class="data-title"><h2>Last Drinks Served</h2></td>
</tr>
<tr>
<table class="data">
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
<tr>
<td class="data-time">Time</td>
<td class="data-shots">Shots</td>
<td class="data-drink">Drink</td>
<td class="data-drinker">Drinker</td>
<td class="data-date">Date</td>
</tr>
</table>
</tr>
</table>
</div>
</div><!-- END CONTAINER -->
CSS:
/* CONTAINER STYLES */
.container {
width: 960px;
}
.leaderboard {
float: left;
}
.drinks {
float: left;
}
/* LEADER BOARD STYLES */
table {
color: #eee;
width: 200px;
background: none;
}
tr { background: none; }
td { background: none; }
#main {
text-align: center;
}
#main tr:nth-child(odd) {
background: #444;
}
#main tr:nth-child(even) {
background: #555;
}
#main tr td .client tr {
background: none;
}
/* LAST DRINKS SERVED STYLES */
#main-data {
width: 740px;
}
#main-data tr:nth-child(odd) {
background: #444;
}
.data {
width: 740px;
}
.data tr:nth-child(odd) {
background: #222;
}
.data td {
border-right: 1px solid #000;
}
.data tr:nth-child(even) {
background: #333;
}
.data-title {
padding: 0 0 0 60px;
}
.data-time {
text-align: right;
width: 120px;
}
.data-shots {
text-align: right;
width: 60px;
}
.data-drink {
text-align: center;
width: 240px;
}
.data-drinker {
text-align: left;
width: 200px;
}
.data-date {
width: 140px;
}

HTML - Table Content Alignment

I am working on a web based game. I have made the navigation but the text is not aligned correctly.
HTML
<table width="123" height="253" border="0" align="right" cellpadding="0" cellspacing="2" class="table"> <tr>
<td height="23" class="header">Main Game</td> </tr> <tr>
<td height="65" valign="top" class="cell" align="center"> Homepage Staff Page
</td> </tr> <tr>
<td height="23" class="header">Social</td> </tr> <tr>
<td height="65" valign="top" class="cell">Discussions</td> </tr> <tr>
<td height="23" class="header">LogOut</td> </tr> </table>
CSS
.table {
border:#000000 1px solid; background-color:#363636;
}
.cell {
color:#FFFFFF; padding:3px; background-color:#1C1C1C; align:center;
}
.header {
padding:0px; padding-left:2px; color:#FFFFFF;
background:#3A0D07; font-family:verdana; font-size:10px;
line-height:18px; text-align:left; border-bottom:2px solid;
border-color:#000000; align:center;
}
output

for your code, the anchor tags are displayed inline-block by default
a quick fix for your code is to change the display for the a tags, add the following to your css:
.table .a{
display:block;
}

Instead of tables you should use list item as they render the same in every browser. Also you have better control over if.
HTML
<ul class="nav">
<li>Home</li>
<li>Stuff</li>
<li>About</li>
</ul>
CSS
ul {
list-style-type: none;
}

Categories