I am new to django and Ajax .I am able to fetch the database content from mysql database,now I want everytime the data is updated in database ,my table also should get updated.I know I have to ajax ,but I dont have anyidea how to proceed with it.Please help me How I can proceed with it?
This is my Views.py
def index(request):
testBenchdb = TestBenchDB.objects.all()
template = loader.get_template('TestBench/MainView.html')
context = {
'testBenchdb': testBenchdb,
}
return HttpResponse(template.render(context, request))
This is my model class
class TestBenchDB(models.Model):
Sl_No= models.IntegerField
TestBenchID= models.CharField(max_length=200)
project = models.CharField(max_length=200)
status= models.CharField(max_length=200)
TestPass = models.IntegerField
TestFail=models.IntegerField
FrameworkErrors=models.IntegerField
LastUpdated=models.DateTimeField
This is my template
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?
family=Material+Icons">
<style>
.blueboxed {
border: 10px solid #b9fcff;
background: #b9fcff;
}
.GreyBoxed{
border: 10px solid #f2f2f2;
background: #f2f2f2;
}
.WhiteSpace
{
border: 5px solid #ffffff;
background: #ffffff;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color:rgba(170,236,255,0.86);
}
th{
background-color: rgba(8,153,255,0.86)
;
}
tr{
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px;
border-radius: 6px 6px 6px 6px;
}
.roundbox {
}
</style>
</head>
<body>
<div class="roundbox">
<div class="blueboxed">
<p style="text-align:left;">Dr.PotatoHead
<span style="float:right;">SignOut</span>
</p>
</div>
<br>
<div class="GreyBoxed">
<p>Refresh Add Bench StopServers</p>
</div>
<br>
<table>
<tr>
<th>Sl.No.</th>
<th>Test Bench Id</th>
<th>Project</th>
<th>Status</th>
<th>Test Pass</th>
<th>Test Fail</th>
<th>Framework Errors</th>
<th>Last Updated</th>
<th>Actions</th>
</tr>
{% if testBenchdb %}
{% for tb in testBenchdb %}
<tr>
<td>{{ tb.id}}</td>
<td>{{ tb.TestBenchID }}</td>
<td>{{tb.project}}</td>
<td>{{tb.status}}</td>
<td>100</td>
<td>10</td>
<td>1</td>
<td>4/20/2018 3:13:56 PM</td>
<td>
<button style="font-size:12px"><i class="material-
icons">pause</i></button>
<button style="font-size:12px"><i class="material-
icons">error</i></button>
<button style="font-size:12px"><i class="material-
icons">settings_backup_restore</i></button>
<button style="font-size:12px"><i class="material-
icons">help_outline</i></button>
</td>
</tr>
{% endfor %}
{% endif %}
</table>
{# <script>#}
{# var append_increment = 0;#}
{# setInterval(function() {#}
{# $.ajax({#}
{# type: "GET",#}
{# url: {% url 'get_more_tables' %}, // URL to your view that
serves new info#}
{# data: {'append_increment': append_increment}#}
{# })#}
{# .done(function(response) {#}
{# $('#_appendHere').append(response);#}
{# append_increment += 10;#}
{# });#}
{# }, 10000)#}
{# </script>#}
{#<script>#}
{# var append_increment = 0;#}
{# setInterval(function() {#}
{# $.ajax({#}
{# type: "GET",#}
{# url: {% url 'index' %}, // URL to your view that serves new
info#}
{# data: {'append_increment': append_increment}#}
{# })#}
{# .done(function(response) {#}
{# $('#_appendHere').append(response);#}
{# append_increment += 10;#}
{# });#}
{# }, 10000)#}
{#</script>#}
</div>
</body>
</html>
There are 2 ways you can achieve this:
Web Sockets: Web Socket allows you to have a duplex communication between the client and server. And server can also initiate the communication once client connect to the server via a web socket. Web Sockets are supported by almost all modern browser these days.
For reference: https://www.youtube.com/watch?v=plYRxKUow5w
Long polling your server: In this your client will send a get request to your server. And server will keep the request on a hold and check the database if there are any changes from the version that has been rendered for the client. There could be 3 possibilities here:
If there are no change and hold timeout is not reached; the process will keep holding the request and poll database again after sometime.
If there is a change and hold timeout is not reached; then the process will return the changes to client.
If there is no change and hold timeout is reached; then the process will return indicating that there was no change.
After receiving a response from the server the client will do the get request again. And the whole process will keep repeating itself.
Word of caution: Please set the hold timeout appropriately otherwise your client will keep waiting. Set timeout on client as well so that if it does not hear back from the server then it can re initiate the request.
For reference: https://www.youtube.com/watch?v=vaIcwhfuweo
Related
I need to create like this model in PDF :
In html works great like this :
But when i loaded to pdf(barryvdh dompdf) I got this result? i'don't know why some content changes his place
This my html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
table{
width: 100%;
}
table tr td{
text-align: left;
border:1px solid;
display: inline-block;
width: 45%;
height:150px;
margin-top: 2px;
}
</style>
</head>
<body>
<table>
<tr>
#foreach($colisenattent as $coli)
<td>
{{$coli->data}}
</td>
#endforeach
</tr>
</table>
</body>
</html>
The issue lied in your css, At first glance though it looks ok.
At first display: inline-block; this css breaks the dompdf code so you will end up in some dompdf error,
Dompdf\Exception
The row #1 could not be found, please file an issue in the tracker with the HTML code
So you need to remove that.
use vertical-align: top; instead.I have added my own styling as well to make it close to ideal.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="all">
table{
width: 100%;
border-collapse: separate;
border-spacing: 5px 0px 1px 0px;
}
th, td{
text-align: left;
vertical-align: top;
border: 3px solid;
border-radius: 5px;
width: 45%;
height: 150px;
margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>Text Text</td>
<td>Text Text</td>
</tr>
</thead>
<tbody>
<tr>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text Text</td>
<td>Text Text</td>
</tr>
</tbody>
</table>
</body>
</html>
DEMO Image
The HTML is currently creating a single row with n columns. Do you instead want to create n/2 rows with two columns?
If so, try something like this:
<table>
#for($i = 0; $i < count($colisenattent); $i += 2)
<tr>
<td>
{{ $colisenattent[$i]->data }}
</td>
<td>
#if (isset($colisenattent[$i + 1]))
{{ $colisenattent[$i + 1]->data }}
#endif
</td>
</tr>
#endfor
</table>
I am working with pdf-reactor and cannot make the header and footer to be in every page. I can, if I have only those two elements, header and footer, they are showing, but soon as I enter a single letter, footer disappears.
<div class="header">
<table class="header header-footer">
<tr>
<td class="invoicetext">header</td>
</tr>
</table>
</div>
<div class="footer">
<table class="footer header-footer">
<tr>
<td class="pagecounter">footer1</td>
</tr>
</table>
</div>
And this is the css:
#page {
margin: 2cm 2.5cm 3cm 2.5cm;
#top-left {
content: element(headerIdentifier);
vertical-align: bottom;
}
#bottom-left {
content: element(footerIdentifier);
vertical-align: top;
width: 100%;
}
#bottom-right {
content: element(companyIdentifier);
vertical-align: top;
margin-top: 4mm;
width: 100%;
}
}
div.spacing {
margin-top: 1.2em;
}
div.footer, div.header {
font: 9pt arial, sans-serif;
width: 100%;
}
div.footer {
position: running(footerIdentifier);
}
div.header {
position: running(headerIdentifier);
}
No matter where I add another div, on the top, bottom, between the header and footer, footer just disappears. How to prevent this from happening.
We can reproduce this behavior here (issue #7827 in our internal tracking system). It seems to only occur when the running elements contain tables and when they are followed by only inline elements or text.
As a workaround, you could wrap the content after the running elements in a block element like this:
<div class="header">
...
</div>
<div class="footer">
...
</div>
<p>Some Text</p>
I am trying to create a PDF that contains table which is partly filled, partly empty. To accomplish this I am using DomPDF via a Laravel wrapper.
It seems that DomPDF somehow miscalculates the height of the empty cells and also displaces the table grid and content.
Here is a minimal broken example:
<html>
<head>
<style>
html, body {
font-family: DejaVu Sans;
}
table {
border-collapse: collapse;
border: none;
margin: 0;
width: 100%;
}
table.main td {
padding: 0;
border: 2px solid black;
}
.main table td {
border: 1px black solid;
text-align: center;
font-size: 10px;
height: 14px;
}
</style>
</head>
<body>
<table class="main">
<tr>
<td>
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
</table>
</td>
<td>
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This is how that table looks like in the generated PDF:
I have tried to add min-height and max-height for the table cell, but no results, it still randomly misaligns everything.
It turns out that this requires line-height to be set exactly equal to the font size. This will work:
.main table td {
border: 1px black solid;
text-align: center;
font-size: 10px;
line-height: 10px;
height: 14px;
}
I've tried everything I can think of, but I cannot get the whitespace between cells to show in Outlook 2013. This is being sent from NationBuilder. How do I add cellspacing so that it renders in Outlook?
Thank you!
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <!-- So that mobile webkit will display zoomed in --> <meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS --> <title>NationBuilder</title> <style type="text/css"> body {
background-color: #ffffff;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
font-family: 'Palatino Linotype', serif;
}
body {
color: #333333;
margin: 0;
padding: 0;
}
A:link {
color: #2594aa;
text-decoration: none
}
A:visited {
color: #2594aa;
text-decoration: none
}
A:active {
color: #2594aa;
text-decoration: none
}
table {
border-spacing: 0;
border-collapse: collapse;
border-spacing: 0;
}
table td {
border-collapse: collapse;
}
#bodytable {
border-spacing: 10;
border-collapse: sepatate;
}
#bodytable td {
border-collapse: separate;
}
p {
font-family: chaparral-pro, Helvetica, Arial, sans-serif;
margin-bottom: 8px;
margin-top: 5px;
}
.body-content img {
max-width: 100%;
}
ul {
font-family: font-family: chaparral-pro, Helvetica, Arial, sans-serif;
text-align: left;
}
h1 {
margin-top: 35px;
margin-bottom: 10px;
font-weight: bold;
text-align: left;
font-size: 20pt;
color: #e37c00;
font-family: 'Trebuchet MS', sans-serif;
text-transform: uppercase
}
h2 {
margin-top: 10px;
margin-bottom: 10px;
font-weight: bold;
text-align: left;
font-size: 14pt;
color: #c8d300;
font-family: 'Trebuchet MS', sans-serif;
text-transform: capitalize
}
h3 {
margin-bottom: 0px;
margin-top: 10px;
font-weight: bold;
text-align: left;
font-size: 12pt;
color: #000000;
font-family: 'Trebuchet MS', sans-serif;
text-transform: capitalize;
text-decoration: underline
}
dt {
font-weight: bold;
margin-top: 10px;
margin-bottom: 6px;
}
/* Constrain email width for small screens */
#media screen and (max-width: 600px) {
table[class="container"] {
width: 100%!important;
}
}
/* Give content more room on mobile */
#media screen and (max-width: 480px) {
table[class="container"] {
width: 100%!important;
}
div[class="body-content"]img {
width: 100%;
}
}
/* Styles for forcing columns to rows */
#media only screen and (max-width: 600px) {
/* force container columns to (horizontal) blocks */
table[class="container"] {
width: 100%!important;
}
}
</style> </head> <body style="margin:0; padding:0;" bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- 100% wrapper --> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td align="center" valign="top" bgcolor="#ffffff"> <!-- header --> <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#2594aa;"> <tr> <td align="center"> <table width="600" cellpadding="0" cellspacing="0" class="container" border="0"> <tr> <td width="600" style="padding:20px; font-family:chaparral-pro,Helvetica,Arial,sans-serif;" valign="middle" height="100"> <img src="{{ settings.site.meta_image_url }}" alt="{{ settings.official_name }}" width="120" height="auto" border="0" valign="middle" style="vertical-align:middle;"> <a style="color:#000000;font-weight:bold;text-decoration:none;padding:20px;font-size:28px;" href="{{ settings.site.full_url }}"> {
{
settings.official_name
}
}
</a> </td> </tr> </table> </td> </tr> </table> <!-- ### 600PX CONTAINER ### --> <table style="font-size: 14px;" width="600" cellpadding="0" cellspacing="0" class="container" border="0"> <tr> <td height="30"></td> </tr> <tr> <td style="font-family:'proxima-nova','Helvetica',Arial,sans;padding: 20px;line-height:1.5;background-color:#ffffff;-webkit-border-radius:5px;-moz-border-radius: 5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;" bgcolor="#ffffff" class="body-content"> {
{
body
}
}
</td> </tr> <tr> <td height="30"></td> </tr> <tr> <td style="font-family:'proxima-nova','Helvetica',Arial,sans;padding:20px;line-height:1.5;background-color:#ffffff;-webkit-border-radius:5px;-moz-border-radius: 5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;"> {
{
settings.official_name
}
}
{
% if settings.has_address? %
}
ยท
{
{
settings.address.one_line
}
}
{
% endif %
}
<br/>This email was sent to <a style="color:#505054;" href="{{ recipient.email }}"> {
{
recipient.email
}
}
</a>. To stop receiving emails,
<a style="color:#505054;" href="{{ settings.site.unsubscribe_url }}">click here</a>. <br/><b>Don't forget to like us on Facebook!</b>
<br/>You can also keep up with {
{
broadcaster.name
}
}
on Twitter,
Facebook or Instagram. </td> </tr> </table> <p style="text-align:center;margin: 20px 40px; font-size: 0.8em;font-family:Helvetica,Arial,sans-serif;">Created with NationBuilder,
software for leaders.</p> <!-- ### 600PX CONTAINER ### --> </td> </tr> </table> <!--/100% wrapper--> </body> </html>
<html>
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>{{ recipient.first_name_or_friend }} --
<h1 style="color: #e37c00; font-family: 'Trebuchet MS', sans-serif; text-transform: uppercase; text-align: center;">The
Rogers Park Food Co-op has some exciting upcoming events!</h1>
<table id="bodytable" border="0" cellspacing="10" cellpadding="20" width="100%" style="border-spacing: 10px !important; border-collapse: separate !important; background-color:#ffffff;">
<tbody>
<tr>
<td style="background-color: #f8febf; border-collapse:seperate !important;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Berger Park Sustainability Open House
</h2>
<p>
<strong>Date: April 22, 2016 from 7 - 8:30pm</strong>
<br />
<strong>Location:
Berger Park Cultural Center
<br />
6205 N Sheridan Rd</strong>
</p>
<p>
Come celebrate the renovation of Berger Park,s south lawn! The architects plan will be unveiled. Also, Edgewater organizations committed to sustainability will have presentation tables. Share your ideas for other improvements to your park.
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/177/attachments/original/1460228200/April_22BergerPark2016-SustainOpenHouse.pdf?1460228200">
<img align="right" style="margin: 6px 1px; border: 1px solid black; float: right;" title="BergerSmall.gif" src="BergerSmall.gif" alt="BergerSmall.gif" width="100" height="129" />
</a>
<p>Presentation Tables:</p>Berger Park South Lawn Renovation
<br />Loyola Sustainability Institute Student sustainability projects
<br />Edgewater Environmental Sustainability Project
<br />Monarch butterfly project at Berger Park
<br />LetsGOChicago
<br />Rogers Park Food Co-op
<br />Free Little Libraries
<p>Please RSVP at
https://nextdoor.com/events/il/chicago/earth-month-at-berger-park-sustainability-open-house-581265
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Meet the Farmers
</h2>
<p>
<strong>Date:
April 27, 2016 at 5pm - 7pm</strong>
<br />
<strong>Location:
Uncommon Ground
<br />
1401 W Devon Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/174/attachments/original/1458565305/Meet_the_Farmers.jpg?1458565305">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="MeettheFarmers_sm.jpg" src="MeettheFarmers_sm.jpg" alt="MeettheFarmers_sm.jpg" width="100" height="155" />
</a>
<p>FREE EVENT!</p>
<p>Get some face-time with the local farmers who supply the best Chicago restaurants and Farmers Markets!</p>
<p>Learn about where your food comes from by talking to the people who grow it!</p>
<p>Get 10% off Dinner from Uncommon Ground!</p>
<p>Stay for live musicfrom 8-10 pm.</p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Farm Fresh Jams
</h2>
<p>
<strong>Date:
April 27, 2016 at 8pm - 10pm</strong>
<br />
<strong>Location:
Uncommon Ground
<br />
1401 W Devon Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/173/attachments/original/1458531431/PosterDraft.PNG?1458531431">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="FarmFresh_sm.jpg" src="FarmFresh_sm.jpg" alt="FarmFresh_sm.jpg" width="100" />
</a>
<p>Fundraiser Concert for the Rogers Park Food Co-op</p>
<p>
<strong>Featuring performances by:</strong>
</p>
<p>Signal-to-Noise</p>
<p>Luna Blu</p>
<p>Abbie & Marlon</p>
<p>Abud: A Bard.</p>
<p>
<strong>Get 10% off Dinner from Uncommon Ground!</strong>
</p>
<p></p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Moah's Ark 4th Annual Plant Sale
</h2>
<p>
<strong>Date:May 7th and 8th</strong>
<br />
<strong>Location:Moah's ark</strong>
<br />
<strong>1839 W Touhy Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/173/attachments/original/1458531431/PosterDraft.PNG?1458531431">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="moah.jpg" src="moah.jpg" alt="moah.jpg" width="250" height="188" />
</a>
<p>Our 4th annual plant sale will feature a big variety of heirloom tomatoes and peppers, plus herbs, flowers and more.
</p>
<p>We have several new tomatoes, including 7 varieties of dwarf heirlooms, old favorites like the cherokee purple, green and chocolate, Moah's yellow, and a couple new italian imports.</p>
<p>This is a 2 day event, Saturday and Sunday, which is Mother's Day. Mom's get a free plant.</p>
<p>RSVP to this event so that you will be notified of the full list which i will be putting up soon.</p>
<p>Happy spring!!</p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td>
<h2 style="color: #e37c00; font-family: 'Trebuchet MS', sans-serif; text-transform: uppercase; text-align: center;">
Click Here For Full Event Listing
</h2>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Exclusive Offers for Co-op Owners!</h2>
<p>In our effort to provide value for our Owners, the Rogers Park Food Co-op is excited to offer the following exclusive deals for owners!</p>
<h3>$50 Discount to Natures Farm Camp</h3>
<p>To celebrate their love of Co-ops, Nature's Farm Camps has decided to offer a $50.00 discount for Natures Farm Camp registrations to the Chicago-area food cooperative members.</p>
<p>
<em>
<strong>Owners will receive a coupon code in an upcoming email.</strong>
</em>
</p>
<p>From naturesfarmcamp.com:</p>
<blockquote>We are an overnight summer camp where kids (ages 8-14) step out of their every day and immerse themselves in nature growing, foraging, cooking, making, building and exploring. Campers do with their hands, head and heart. In the process they
discover more about life and themselves, all while having a blast with new friends in the great outdoors.
</blockquote>
<hr />
<h3>Biggest Slim-Down with Hank: Help The Co-op While Getting Fit!</h3>
<p>Every few months, personal trainer Hank Rouse and his team of coaches run a Biggest Slim Down Contest. This past Holiday Season we had a Maintain Don't Gain Contest. To win cash prizes, all the contestants had to do was maintain their weight
(or even lose weight). I'm so excited to announce an Exclusive Opportunity for RPFC Co-Owners.</p>$25 will be donated to the Rogers Park Food Co-op for each participating Co-Owner who achieves the 3% Body Weight (Loss/Gain) benchmark.
<p>NEW Contest: Begins April 18th</p>
<p>Applications accepted until April 13th.</p>More Information at
http://www.facebook.com/events/495659513953786/
<br />
</td>
</tr>
</tbody>
</table>{{ broadcaster.name }}
<br />
{{ settings.site.full_url }}
</body>
</html>
Here is the HTML: https://jsfiddle.net/63v8cra7/1/
Screenshot from Thunderbird:
From Outlook:
Due to current limitations on getting DIV tags to work well across browser platforms for the particular liquid layout I desire, I have opted to use a combination of Tables and DIVs for layout. That being said, a couple of issues remain.
The FIRST issue is that in Firefox, my table row height for my footer is being rendered differently than it is being rendered in IE when using a table with a height of 100%. What happens is that in Firefox the footer row for the table has a height that is greater than the height specified for the table row. This, in turn, throws off my footer layout.
Here is the code for the page:
<html>
<head>
<meta NAME="DESCRIPTION" CONTENT="Cold Fusion Applications and Development">
<meta NAME="keywords" CONTENT="cold fusion, coldfusion, sql server, graphic design, houston, texas, tx, web developer, web development, e-commerce, survey, surveys, web applications, php, mysql, access, foxpro, sql, perl, shopping cart, web programming, macromedia, webmaster, html, cfml, xml, 77057, cfware, cfware.com, www.cfware.com, hosting, dhtml, dynamic html, web programmer, graphic designer, website, resume">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<!-- BODY -->
<body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0">
<!--TABLE I -->
<table class="fullheight" width="100%" height="100%" min-height="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr><td height="116" align="center" valign="top">
<!-- HEADER -->
<div class="header">
<div class="lfc">Cornerstone</div>
<div class="rfl"><img src="c4sqlogo.gif" width="295" height="68"></div>
<div class="lf4">Foursquare</div>
</div>
<div class="spacer"></div>
<!-- HEADER END -->
</td>
</tr>
<tr><td align="center" valign="center" bgcolor="#FFFFFF">
<!-- CONTENT -->
<div class="content">
<table class="fullheight" width="100%" height="100%">
<tr>
<td></td>
<td></td>
<td></td>
</tr><tr>
<td></td>
<td align="center" valign="middle">
<h1 class="font-black">Cornerstone Foursquare Church</h1>
<br>
<h2>7791 Hillbarn Dr. Houston, TX 77040</h2>
<br>
<h2>(713) 856 - 7773</h2>
<br>
<br>
<h3>Service Times:<br>Sunday Morning Worship 10:30AM<br>Sunday Evening Bible Study 6:00PM
<br>Wednesday Evening Bible Study and Prayer 7:00PM</h3>
</td>
<td></td>
<tr>
<td></td>
<td></td>
<td></td>
</tr><tr>
</table>
</div>
<!-- CONTENT END -->
</td>
</tr>
<tfoot height="28"><td height="28" align="center" valign="middle" bgcolor="#FFFFFF">
<!-- FOOTER -->
<div class="clearspacer"><img src="1.gif" height="10" width="1"></div>
<div class="footer"><div class="footertext"> w w w . c 4 s q . o r g </div></div>
<!-- FOOTER END -->
</td>
</tr>
</table>
<!-- TABLE I END -->
</body>
</html>
And here is the code for the sytle sheet:
html, body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: :#a02f1d;
height: 100%;
width: 100%;
}
a {
color: #ffffff;
text-decoration: none;
font-size: 12;
font-weight: 500;
}
.header {
color: #ff0000;
margin: 0 auto;
width: 760px;
height: 116px;
background-image: url(stripe.gif);
background-repeat: repeat-x;
}
.fullheight {
height:100%;}
.lf4 {
float: left;
margin-top: 0px;
clear: left;
width: 240px;
margin-left: 190px;
color: #a02f1d;
font-size: 26px;
font-weight: semi-bold;
font-style: italic;
}
.lfc {
float: left;
margin-top: 8px;
margin-left: 20px;
color: #a02f1d;
font-size: 48px;
font-weight: semi-bold;
font-style: italic;
}
.rfl {
float: right;
margin-top: 24px;
margin-right: 20px;
clear: right;
}
.content {
margin: 0 auto;
width: 760px;
overflow: hidden;
color: :#a02f1d;
}
.spacer {
background-color:#a02f1d;
margin: 0 auto;
width: 760px;
height: 4px;
overflow: hidden;
}
.clearspacer {
background-color:#000000;
}
.footer {
color: #ffffff;
background-color:#a02f1d;
margin: 0 auto;
width: 760px;
height: 30px;
clear: both;
}
.footertext {
color:#ffffff;
margin-top: 6px;
font-size: 12px;
}
The SECOND issue has to do with modifying the existing layout so that there is a centered vertical area of 760px in width that displays in a shade of color different from the surrounding viewport. The primary difficulty is that in order to get my footer to stick to the bottom in both browsers and resize with the viewport, I had to re-adopt a table layout. The current strategy, however, is to use as few nests as possible in order to benefit from the speed and clarity from using DIVs. I would opt to use a DIV layout to the exclusion of a TABLE layout if it were not for the apparently, currently insoluble problem of getting a working sticky-footer to work with a DIV liquid layout.
I know this is quite unrelated, but I recommend that you use the w3c validator to validate your HTML once in a while.
A couple suggestions:
Add a doctype - if use use the right one you can get IE to standards mode rather than quirks mode http://www.quirksmode.org/css/quirksmode.html, so behaviour will be more consistent between IE and other browsers.
As suggested by K4emic - validate your markup.
Add a css reset to zero default margins and paddings, a good starting point here http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/.
You will find that these things will make chasing down layout bugs a lot easier. Otherwise, you just won't know where to start, is it your css, your html, the default browser stylings, the rendering mode of IE......?
As the other responders pointed out you first have to make sure that your document is well formed. That is, it must conform to a DTD. I will point out one issue that is easy to spot:
<tfoot height="28"><td height="28" align="center" valign="middle" bgcolor="#FFFFFF">
<!-- FOOTER -->
<div class="clearspacer"><img src="1.gif" height="10" width="1"></div>
<div class="footer"><div class="footertext"> w w w . c 4 s q . o r g </div></div>
<!-- FOOTER END -->
</td>
</tr>
</table>
In this snippet you can see that your
<tfoot>
element is unclosed. It should contain
<tr>
but that is missing.
These small errors are probably causing the inconsistent behavior that you are witnessing. After they have been corrected if you are still getting the behavior then you can look at the browser differences. Some HTML editor like Frontpage and Dreamweaver can be set to out put code that conforms to a DTD and highlight areas that do not conform. I would recommend using one.