I am trying to send a automated report mail with following table, but the width of the columns is far to small for the description fields and I have no idea why this is not adjusting.
I have already tried
width: auto;
width: px;
width: &;
width: 1px;
white-space: nowrap;
Table:
<h1>E-48<h1>
<table stlye='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; border-collapse: collapse;
white-space: nowrap; table-layout:fixed;'><tr>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'></td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Spinner temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Front bearing temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Pitch cabinet blade B temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Pitch cabinet blade C temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Blade A temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Blade B temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Blade C temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Rotor temperature 1</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Rotor temperature 2</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Stator temperature 1</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Stator temperature 2</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Nacelle ambient temperatur</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Rear bearing temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Nacelle temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Nacelle cabinet temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Rectifier 1 heat sink temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Rectifier 2 heat sink temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Rectifier cabinet temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Excitation heat sink temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Ambient temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Tower temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Control cabinet temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Transformer temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Inverter 1 cabinet temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Inverter 2 cabinet temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Pitch heat sink blade A temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Inverter 3 cabinet temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Pitch heat sink blade B temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Pitch heat sink blade C temperature</td>
<td style='text-align: center; border: 1px solid lightblue; padding: 2px 10px 2px 10px; width: 100%;'>Pitch cabinet blade A temperature</td>
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
"Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content may not fit in the column widths provided."
Your first table row is empty.
Add a width to your table. <table width="100%"...
Related
I'm trying to style the bottom border of a TD. The attached image shows this working as I'd like but the border is slightly too long, I'd like it to match the width of the blue cell above it.
Here is my code:
table {
border-collapse: collapse;
width: 100%;
}
.tab {
border-collapse: separate;
background-color: #5B86EE;
text-align: center;
border-width: 1px;
border-bottom: solid 3px #A0A0A0;
border-top: solid 3px #E1E1E1;
border-left: solid 3px #E1E1E1;
border-right: solid 3px #E1E1E1;
display: table-cell;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.active {
background-color: #5B86EE;
text-align: center;
border-width: 1px;
border-bottom-width: 2px;
border-bottom: solid 3px #640000;
border-top: solid 3px #E1E1E1;
border-left: solid 3px #E1E1E1;
border-right: solid 3px #E1E1E1;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
<table border="0" width="100%%" align="center">
<tbody>
<tr>
<td class="tab">1</td>
<td class="active">2</td>
<td class="tab">3</td>
</tr>
</tbody>
</table>
I have no control over the HTML being used, but I can change the CSS.
Is there anyway to make the bottom border match the width of the cell excluding the left or right border width ?
Also viewing this in Firefox and the border over hang is on the other end, so on the left not the right.
You could use a pseudo element instead of a bottom border:
table {
border-collapse: collapse;
width: 100%;
}
.active,
.tab {
border-collapse: separate;
background-color: #5B86EE;
text-align: center;
border-width: 1px;
border-bottom: solid 3px #A0A0A0;
border-top: solid 3px #E1E1E1;
border-left: solid 3px #E1E1E1;
border-right: solid 3px #E1E1E1;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
position: relative;
}
.active:after {
content: '';
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
border-bottom: solid 3px #640000;
}
<table border="0" width="100%%" align="center">
<tbody>
<tr>
<td class="tab">1</td>
<td class="active">2</td>
<td class="tab">3</td>
</tr>
</tbody>
</table>
below is the code, i had a one image, below that image there is Price and a button, i want some space between price and button which should be left and right to the image
.new {
font: bold 11px Arial;
text-decoration: none;
background-color: #66C4C4;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
.wrapper {
text-align: center;
}
.show{
background-color: #2D318A;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 3px;
text-decoration: none;
float: right;
<div class="wrapper">
New Released
</div>
<img src="https://www.google.com.np/search?q=django+imagefield&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiHk57k89fcAhUJVH0KHbxAC08Q_AUICygC&biw=1396&bih=690#imgrc=3ukNSrarUo82hM:" style="width: 300px" height="200px">
<table>
<tr>
<td>
Price: Rs 14000
</td>
<td> Join Now</td>
</tr>
</table>
Use this approach it will work fine. Best part is you can even adjust its responsiveness with classes. Don't need to use table for such things. That's considered bad code.
You was missing closing bracket of .new class.
.new {
font: bold 11px Arial;
text-decoration: none;
background-color: #66C4C4;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
.image-container {
width: 300px;
height: 200px;
}
.image-container img {
width: 100%;
}
.image-container span {
float: left;
}
.show {
float: right;
background-color: #2D318A;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 3px;
text-decoration: none;
<div class="wrapper">
New Released
</div>
<div class="image-container">
<img src="http://site8.dealerbase.co.nz/media/1707/300x200.gif" />
<br>
<span>Price: Rs 14000</span>
Join Now</div>
Thanks
.item-wrap{
display:inline-block;
border:1px solid #ccc;
}
.item-footer{
display:flex;
justify-content:space-around;
}
<div class="item-wrap">
<div class='item-img'>
<img src='https://picsum.photos/300/200?image=0'>
</div>
<div class='item-footer'>
<div class='price'><p>Price: Rs 14000</p></div>
<div class='item-join'>
<p>Join Now</p>
</div>
</div>
</div>
**HTML:**
<tr>
<td>
Price: Rs 14000
</td>
<td class="joinButtonAlign"> Join Now</td>
</tr>
**CSS**
.joinButtonAlign{
display: inline-block;
padding-left:30px;
}
I'm having trouble with a box shadow on hover and table <TD> background.
Here is a fiddle
<table class="table-z">
<tr>
<td class="w6">
<label>
<input type="checkbox" checked>
</label>
</td>
<td class="w7">
</td>
<td class="w10">
Tez Tour
</td>
<td class="w17">
<div>
tez-tour.com
</div>
</td>
<td class="w16">Заказ № 34546</td>
<td class="w22">Стоимость 20 000 ₽</td>
<td class="last orange ">На рассмотрении</td>
</tr>
<tr>
<td class="w6">
<input type="checkbox">
</td>
<td class="w7">
</td>
<td class="w10">Мвидео</td>
<td class="w17">mvideo.ru</td>
<td class="w16">Заказ № 34546</td>
<td class="w22">Стоимость 20 000 ₽</td>
<td class="last red">Отказ</td>
</tr>
</table>
How can I make tr box shadow on hover and save custom backgrounds on td?
Use background color with alpha channel.
background-color: rgba(226, 226, 226, 0.3)
You need to set a z-index for the td that allows the shadow to show on it and not under it
.table-z tr{
height: 50px;
text-align: center;
font-size: 16px;
position: relative;
}
.table-z td {
z-index: -1;
position: relative;
}
.table-z{
margin-top: 10px;
margin-left: 10px;
width: 100%;
}
.w6{
padding-left: 2%;
width: 6%;
background: yellow;
border-left: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w7{
width: 7%;
background: yellow;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w10{
width: 10%;
background: yellow;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w17{
width: 17%;
background: yellow;
border-right: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w16{
width: 16%;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.w22{
width: 22%;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
td.last{
text-align: right;
padding-right: 35px;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
}
.table-z{
border-collapse: collapse
}
.table-z tr:last-child td:first-child {
border-bottom-left-radius: 5px;
}
.table-z tr:last-child td:last-child {
border-bottom-right-radius: 5px;
}
.le{
margin-left: 10px;
width: 240px;
}
table {
border-collapse: collapse;
border-radius: 5px;
border-style: hidden; /* hide standard table (collapsed) border */
box-shadow: 0 0 0 1px #e1e1e1; /* this draws the table border */
}
.table-z tr:hover {
box-shadow: 0px 0px 12px 5px red;
cursor: pointer;
}
<table class="table-z">
<tr>
<td class="w6">
<label>
<input type="checkbox" checked>
</label>
</td>
<td class="w7">
</td>
<td class="w10">
Tez Tour
</td>
<td class="w17">
<div>
tez-tour.com
</div>
</td>
<td class="w16">Заказ № 34546</td>
<td class="w22">Стоимость 20 000 ₽</td>
<td class="last orange ">На рассмотрении</td>
</tr>
<tr>
<td class="w6">
<input type="checkbox">
</td>
<td class="w7">
</td>
<td class="w10">Мвидео</td>
<td class="w17">mvideo.ru</td>
<td class="w16">Заказ № 34546</td>
<td class="w22">Стоимость 20 000 ₽</td>
<td class="last red">Отказ</td>
</tr>
</table>
simply change your tr to td for the hover
.table-z TD:hover {
-webkit-box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
-moz-box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
cursor: pointer;
}
I use dompdf to create a pdf.
On this pdf, i create a table. But I want to make this table still constant height like 500px;
This is the code:
<div style="width : 100%; height: 550px">
<table class="detail" style="width : 100%; padding-top: -10px; height: 550px ">
<tbody>
<tr>
<th rowspan="2" style="width : 5%; border: 1px solid black"><strong>No</strong></th>
<th rowspan="2" style="width : 50%; border: 1px solid black"><strong>DESCRIPTION</strong></th>
<th colspan="2" style="border: 1px solid black"<strong>UNIT</strong></th>
<th rowspan="2" style="border: 1px solid black" colspan="2">Total<br> IDR</th>
</tr>
<tr>
<td style='text-align : center; border: 1px solid black '><strong>QUANTITY</strong></td>
<td style='text-align : center; border: 1px solid black' ><strong>PRICE</strong></td>
</tr>
<tr><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none'>1</td><td style='text-align : left; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>STORAGE</td><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px; '>1</td><td style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>30,103,437.60</td><td colspan='2' style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>30,103,437.60</td></tr><tr><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none'>2</td><td style='text-align : left; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>REPO</td><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px; '>1</td><td style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>1,470,852.00</td><td colspan='2' style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>1,470,852.00</td></tr><tr><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none'>3</td><td style='text-align : left; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>CLEANING</td><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px; '>1</td><td style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>129,244,310.00</td><td colspan='2' style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>129,244,310.00</td></tr><tr><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none'>4</td><td style='text-align : left; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>ONE_BAR</td><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px; '>1</td><td style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>20,591,928.00</td><td colspan='2' style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>20,591,928.00</td></tr><tr><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none'>5</td><td style='text-align : left; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>PERIODICAL TEST 2.5 YEARS</td><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px; '>1</td><td style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>3,404,750.00</td><td colspan='2' style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>3,404,750.00</td></tr><tr><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none'>6</td><td style='text-align : left; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>PERIODICAL TEST 5 YEARS</td><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px; '>1</td><td style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>7,354,260.00</td><td colspan='2' style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>7,354,260.00</td></tr><tr><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none'>7</td><td style='text-align : left; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>REPAIR</td><td style='text-align : center; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px; '>1</td><td style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>104,211,907.05</td><td colspan='2' style='text-align : right; border-right: solid 1px black; border-bottom : none; border-top:none; padding: 2px;'>104,211,907.05</td></tr>
<tr>
<td style='height : 50px;text-align : center; border-right: solid 1px black; border-bottom : solid 1px black; border-top:none'></td>
<td style='text-align : left; border-right: solid 1px black; border-bottom : solid 1px black; border-top:none; padding: 2px;'><strong>PERIODE MEI 2016 </strong></td>
<td style='text-align : left; border-right: solid 1px black; border-bottom : solid 1px black; border-top:none; padding: 2px;'></td>
<td style='text-align : left; border-right: solid 1px black; border-bottom : solid 1px black; border-top:none; padding: 2px;'></td>
<td colspan="2" style='text-align : right; border-right: solid 1px black; border-bottom : solid 1px black; border-top:none; padding: 2px;'></td>
</tr>
<tr>
<td rowspan="3" colspan="3" style="border : none;"></td>
<td style="text-align : right; border: 1px solid black"><strong>SUB TOTAL</strong></td>
<td colspan="2" style="text-align : right; border: 1px solid black">296,381,444.65</td>
</tr>
<tr>
<td style="text-align : right; border: 1px solid black"><strong>VAT 10%</strong></td>
<td colspan="2" style="text-align : right; border: 1px solid black; ">
29,638,144.47 </td>
</tr>
<tr>
<td style="text-align : right; border: 1px solid black"><strong>TOTAL</strong></td>
<td colspan="2" style="text-align : right; border: 1px solid black">
326,019,589.12 </td>
</tr>
</tbody>
</table>
</div>
See in div and table height properties. I already declared it. So, if just one row in tbody, I wanna the table have constant height But this is not work in dompdf.
Please help, Any help it so appreciated.
dompdf has some restrictions when it comes to tables. It is able to handle a defined width and distribute that as necessary in a fairly acceptable manner. But a defined height causes problems as dompdf does not know how to distribute the height across rows.
If you had a single row it would size the row correctly, but that's obviously not a solution for your problem.
There is no known work-around at this time.
You do not need to specify 'px' for table widths and heights.
<table class="detail" style="width : 100%; padding-top: -10px; height: 550">
If the table is Dynamic, you might need some JS to add heights to all the rows.
3 Table rows = (550 / 3).
If the table is static, just do the maths yourself and add the height to each row. Without this height the table will form according to its contents.
Don't add width or height as an inline style. TABLE, TH's, TR's, and TD's have parameters for height and width. Remember to leave out "px"
I think the margins are causing an issue but I am not certain at this point. Have been trying for the last two hours. It only occurs with the three centered divs. Top videos, articles and photos. The rest are fine when I type text into them. When I do type text into them it displaces them vertically to the bottom just above the footer.
Here is my HTML:
<div id="page">
<header></header>
<div id="dog logo">
</div>
<ul id="navigation">
<li>Home</li>
<li>Videos</li>
<li>Photographs</li>
<li>Articles</li>
<li>Contact</li>
</ul>
<div id="hero"><h1><b>HERO</b></h1></div>
<div id="topvideo"></div>
<div id="topphoto"></div>
<div id="toparticles"></div>
<div id="content"><h1><b>CONTENT</b></h1></div>
<div id="footer"><h1><b>FOOTER</b></h1></div>
And here is my CSS:
#page {
max-width: 850px;
min-width: 840px;
min-height: 1550px;
max-height: 1600px;
}
ul {
width: 813px;
height: 100px;
padding: 10px;
margin: 0px auto 0px auto;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
text-align: center;
text-decoration: none;
padding: 5px 0px 5px 0px;
display:inline-block;
}
li {
display: inline;
text-decoration: none;
}
#hero {
width: 813px;
height: 408px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 5px 0px 0px 0px; (is it a problem with the margins>
text-align: center;
}
#topvideo { **THIS DISPLACES**
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 5px 0px 5px 0px;
}
#topphoto { T**HIS DISPLACES**
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 5px 0px 5px 0px; Could it be a problem with the margins?
}
#toparticles { **THIS DISPLACES**
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 5px 0px 5px 0px;
}
#content {
width: 813px;
height: 310px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: -5px 0px 0px 0px;
text-align: center;
}
#footer {
width: 813px;
height: 100px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 5px 0px 0px 0px;
text-align: center;
}