Hello all,
I am relatively new to html/css, and have having 2 main problems (that I know of) with a site I am building. Any help or suggestions would be greatly appreciated!
1- I’m having a strange problem in which the text on my site seems bitmapped - as if the font is not being recognized. When I try to change the font with font-family tag in css, the font doesn’t change.
2- I have been getting a bunch of error messages when validating the html. Most have to do with the flash banner, but the most worrisome to me are the errors listed below (followed by the html and css code):
Line 170, 171,172, Column 8: document type does not allow element “p” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag
Line 365, Column 6: Opening and ending tag mismatch: body line 38 and div
</div>
Line 366, Column 7: Opening and ending tag mismatch: html line 2 and body
</body>
Line 367: Extra content at the end of the document
</html>
HERE IS THE HTML CODE:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<head>
<title> Calling it quits - Award-winning film by Anthony Tarsitano - NOW ON DVD! </title>
<meta name="description" content="Award-winning film by Anthony Tarsitano." />
<meta name="keywords" content="film,independent film,award-winning film,boomer,baby boomer,baby boomers,baby boomer story,midlife,mid-life,mid life,midlife story,mid life story,middle age,women,men,sex,sexuality,love,love story,love and relationships,relationships,marriage,family,spiritual,spirituality,spiritual story,hope,second chance,faith,meaning,search for meaning" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="index,follow" />
<meta name="author" content="David C. Stuart" />
<meta name="revisit-after" content="7" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="classification" content="Independent Feature Film" />
<meta name="contactname" content="David C. Stuart" />
<meta name="contactcity" content="New York" />
<meta name="contactstate" content="New York" />
<link rel="stylesheet" type="text/css" href="main-pagea.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="main-pageie.css" />
<![endif]-->
<link rel="icon" type="image/gif" href="http://editeddomain.com/images/" />
<script type=“text/javascript” src=“ufo.js”></script>
<script type=“text/javascript”>
function roll(img_name, img_src)
{
document[img_name].src = img_src;
}
</script>
</head>
<body>
<!-- START top –>
<div id=“container”>
<div id=“top”>
<div id=“topleft”>
<div class="laurels">
<img src="images/laurel-phoenix.gif" border="0" alt="" name="laurel1" />
<img src="images/laurel-js.gif" border="0" alt="" name="laurel2" />
<img src="images/laurel-siny.gif" border="0" alt="" name="laurel3" />
<img src="images/laurel-li.gif" border="0" alt="" name="laurel4" />
</div>
<div class="jessica"></div>
<div class="sidebar">
<p>"I was pleased
to see how deeply
the film had
touched people.<br />
—<br />
I feel it struck
a universal chord
about that elusive
search for happiness."
</p>
</div>
</div>
<div id="topmid">
<div class="pretitle">
<p>Experience the laughter, tears and<br/>
thought-provoking questions in this heartwarming film
</p>
</div>
<div class="title">
<h1>Calling it Quits</h1>
<p>A Film by Anthony Tarsitano</p>
</div>
<div class="trailer">
<script type="text/javascript" src="swfobject.js"></script>
<div id="CC2102151">Form Object</div>
<script type="text/javascript">
var so = new SWFObject("myvideoplayer.swf","", "410", "260", "7,0,0,0", "#ffffff");
so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
so.addParam("quality", "high");
so.addParam("scale", "noscale");
so.addParam("salign", "lt");
so.write("CC2102151");</script>
</div>
<div class="vidbox"></div>
<div class="banner">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
ID=ciq-banner WIDTH=420 HEIGHT=100>
<PARAM NAME=movie VALUE="ciq-banner.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=loop VALUE=true>
<EMBED src="ciq-banner.swf" loop=true quality=high
WIDTH=420 HEIGHT=100 TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</OBJECT>
</div>
<div class="clear"></div>
<div class="synopsis">
<p>Dante Milestone is not happy. His struggles with everyday
life, his past, even the question of 'the existence of a higher power',
have led him to evaluate his own life. It is an assessment that drives
him to leave work and success behind and set out on a quest in search of
his happiness.
</p>
<p> But Dante soon learns that it's not that simple ... for after
a series of painfully humorous attempts fail to provide an answer, Dante
sinks even deeper. It is not until a fateful encounter sets him unexpectedly
on a path of self-awareness that he begins to look inwards. Only there,
can he face the underlying truth and find true peace in the present.
</p>
<p><i>Calling it Quits</i> is sure to make you laugh, make you cry and make you think. And, ultimately it will make you feel good.
</p>
</div>
<div class="clear"></div>
<div class="dirwords">
<h1>A Few Words from the Award-Winning Writer and Director
</h1>
<p>As the filmmaker, the reason for making <i>Calling it Quits</i> was simple ... With
almost 60 years of life under my belt, I wanted to share what it has taught me and
do it in a way that was real, uplifting, and hopefully, entertaining. I didn't want
to make a cookie-cutter Hollywood film, but a film that touched on all aspects of our
lives — love, family, desires and spirituality. <i>Whew, that's a lot of ground to cover ...</i>
</p>
<p>
But, as we screened the film across the U.S., I was pleased to learn it
succeeded and how deeply the film had touched audiences. I hope that after
watching my film, you will feel the same way too.
</p>
</div>
<div class="clear"></div>
</div>
<div id="topright">
<div class="dante1">
</div>
<div class="offer1">
<p><b>NEW on DVD!</b></p>
<p>Limited-Time Premier Offer</p>
<h1>Save 20%</h1>
<p><b>Only $19.95</b></p>
</div>
<div class="clear"></div>
<div class="dvd">
<a href="order.html"
onmouseover="roll('dvd', 'images/dvd-a.gif')"
onmouseout="roll('dvd', 'images/dvd-b.gif')"
onclick= "order.html">
<img src="images/dvd-b.gif" border="0" alt="" name="dvd" /></a>
</div>
<div class="clear"></div>
<div class="off2">
<a href="order.html" alt="">
<p>Plus Get</p>
<p>XX FREE Bonus Offers</p>
<p>and Gifts!</p></a>
</div>
<div class="robert"></div>
</div>
</div>
<!-- END TOP –>
<!-- START MIDDLE –>
<div id=“middle”>
<div class=“promo1”>
<h1>NEW! Limited-Time DVD Premier Offer<br/>
Save 20% Now only $19.95
</h1>
</div>
<div class=“clear”></div>
<div class="filmtext">
<h2>A Love Story. A Story About Life's Decisions.<br/>
A Story about Something Bigger than Ourselves.
</h2>
<h1>Calling it Quits</h1>
</div>
<div class="clear"></div>
<div class="dandj">
<img src="images/dandj.gif" border="0" alt="" name="dandj" />
</div>
<div class="clear"></div>
<div class="redbar">
<img src="images/red-bar.gif" border="0" alt="" name="redbar" />
</div>
<div class="clear"></div>
<div class="promo3">
<h1>As soon as you've ordered your DVD, you'll have immediate access to ALL
of these great offers ...
</h1>
</div>
<div class="clear"></div>
<!-- START AFFILIATE TABLE –>
<div class="affiliates">
<table border="0" cellspacing="12" cellpadding="0" width="900">
<tbody>
<tr>
<td valign="top">
<div align="center">
<table border="0" cellspacing="10" cellpadding="4" width="360">
<tbody>
<tr>
<td bgcolor="#C42F0C" height="25" valign="middle" colspan="2">
<div align="left"><font color="white" size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><strong>Bonus Gift 1</strong></font>
<font color="#C42F0C" size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- - -</font>
<font color="white" size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><strong>SPIRITUAL CINEMA CIRCLE</strong></font>
</div>
</td>
</tr>
<tr>
<td>
<div align="left">
<img border="0" alt="Spiritual Cinema Circle" src="http://edited&subid=0&type=4&gridnum=5" width="120" height="90" />
</div>
</td>
<td width="210" valign="top">
<div align="left">
<p><font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><b>Free Trial ...</b></font></p>
<p><font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">Information describing the item(s) being offered by the affiliate.</font></p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td valign="top">
<div align="center">
<table border="0" cellspacing="10" cellpadding="4" width="360">
<tbody>
<tr>
<td bgcolor="#C42F0C" height="25" valign="middle" colspan="2">
<div align="left"><font color="white" size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><strong>Bonus Gift 2</strong></font>
<font color="#C42F0C" size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- - -</font>
<font color="white" size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><strong>AFFILIATE COMPANY NAME</strong></font>
</div>
</td>
</tr>
<tr>
<td>
<div align="left">
<img border="0" alt="Affiliate Company Name" src="images/logo-ph.gif" width="120" height="90" />
</div>
</td>
<td width="210" valign="top">
<div align="left">
<p><font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><b>Sample Offer ...</b></font></p>
<p><font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">Information describing the item(s) being offered by the affiliate.</font></p></div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top">
<div align="center">
<table border="0" cellspacing="10" cellpadding="4" width="360">
<tbody>
<tr>
<td bgcolor="#C42F0C" height="25" valign="middle" colspan="2">
<div align="left"><font color="white" size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><strong>Bonus Gift 3</strong></font>
<font color="#C42F0C" size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- - -</font>
<font color="white" size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><strong>AFFILIATE COMPANY NAME</strong></font>
</div>
</td>
</tr>
<tr>
<td>
<div align="left">
<img border="0" alt="Spiritual Cinema Circle" src="images/logo-ph.gif" width="120" height="90" />
</div>
</td>
<td width="210" valign="top">
<div align="left">
<p><font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><b>Sample Offer ...</b></font></p>
<p><font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">Information describing the item(s) being offered by the affiliate.</font></p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td valign="top">
<div align="center">
<table border="0" cellspacing="10" cellpadding="4" width="360">
<tbody>
<tr>
<td bgcolor="#C42F0C" height="25" valign="middle" colspan="2">
<div align="left"><font color="white" size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><strong>Bonus Gift 4</strong></font>
<font color="#C42F0C" size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">- - -</font>
<font color="white" size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><strong>AFFILIATE COMPANY NAME</strong></font>
</div>
</td>
</tr>
<tr>
<td>
<div align="left">
<img border="0" alt="Spiritual Cinema Circle" src="images/logo-ph.gif" width="120" height="90" />
</div>
</td>
<td width="210" valign="top">
<div align="left">
<p><font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif"><b>Sample Offer ...</b></font></p>
<p><font size="2" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">Information describing the item(s) being offered by the affiliate.</font></p></div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="clear"></div>
<!-- END AFFILIATE TABLE –>
<div class="johnsonbox">
<a href="order.html" class="jbox" onclick="this.blur()"><img width="560" height="300" alt="" src="images/johnson-box.gif" /></a>
</div>
<div class="clear"></div>
<div id="mailer">
<a href="mailto:?subject=Take a look at this thought-provoking new movie...&body=This wonderful filmCheck out the incredible offer on this award-winning movie. http://www.callingitquitsmovie.com" class="mailer" onclick="this.blur()"><b>Spread the Word</b></a> about this wonderful film and offer.
</div>
<div class="clear"></div>
</div>
<!-- END MIDDLE –>
<!-- BEGIN BOTTOM CONTENT –>
<div id="bottom">
<p>A Product of Davant Marketing, LLC | Calling it Quits © 2010 City Squirrel Films, Inc. | <a href="sitemap.html" class="bottom" onclick="this.blur()">Privacy Policy</a> | <a href="termsofuse.html" class="bottom" onclick="this.blur()">Terms of Use</a></p>
</div>
<!-- END BOTTOM CONTENT –>
</div>
</body>
</html>
HERE IS THE CSS CODE:
- {
margin: 0;
}
body {
background-color: #000;
text-align: center;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 20px;
}
#container {
margin-top: 0px;
margin-right: auto;
margin-left: auto;
width: 908px;
}
#top {
width: 900px;
border-top: 0px solid #ccc;
border-left: 4px solid #ccc;
border-right: 4px solid #ccc;
overflow: hidden;
background: url(images/bgpaper1.jpg) no-repeat;
}
#topleft {
float: left;
margin: 140px 0 0 0;
width: 210px;
}
.laurels img {
float: left;
margin: 18px 0 0 36px;
width: 150px;
height: 76px;
}
.jessica {
Float: left;
background: url(images/jessica.jpg);
margin: 78px 0px 50px 10px;
width: 190px;
height: 181px;
}
.sidebar p {
float: left;
width: 140px;
margin: 40px 0 0 42px;
font-size: 14px;
font-weight: 600;
line-height: 20px;
font-style: italic;
letter-spacing: 0px;
}
#topmid {
float: left;
width: 480px;
}
.pretitle p {
position: absolute;
width: 780px;
margin: 30px 0 0 -152px;
font-size: 24px;
font-weight: 500;
line-height: 30px;
letter-spacing: 0px;
}
.title h1 {
float: left;
width: 340px;
margin: 124px 0 0 70px;
font-size: 40px;
font-weight: 500;
line-height: 44px;
letter-spacing: 0px;
color: #000000;
}
.title p {
float: left;
width: 300px;
margin: 4px 0 0 96px;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: 0px;
}
.trailer {
float: left;
margin: 28px 0 10px 35px;
}
.vidbox {
position: absolute;
background: url(images/vidbox.png);
background-repeat: no-repeat;
margin: 216px 0px 0px 35px;
width: 422px;
height: 272px;
}
.banner {
float: left;
margin: 20px 0 0px 28px;
}
.clear {
clear: both;
}
.synopsis p{
float: left;
width: 440px;
margin: 12px 0 0 16px;
font-size: 13px;
font-weight: 500;
line-height: 16px;
text-align: justify;
color: #000000;
}
.clear {
clear: both;
}
.dirwords h1 {
float: left;
width: 340px;
margin: 30px 0 0 70px;
font-size: 16px;
font-weight: 600;
line-height: 21px;
letter-spacing: 0px;
color: #000000;
}
.clear {
clear: both;
}
.dirwords p{
float: left;;
margin: 12px 0 0 16px;
width: 440px;
font-size: 13px;
line-height: 16px;
text-align: justify;
color: #000000;
}
.clear {
clear: both;
}
#topright {
float: left;
width: 210px;
margin: 0px 0 0 0;
}
.dante1 {
Float: left;
background: url(images/dante.gif);
margin: 100px 0px 50px 0px;
width: 190px;
height: 194px;
}
.offer1 p {
float: left;
margin: 4px 0px 0px 10px;
width: 190px;
font-size: 15px;
font-weight: 500;
line-height: 17px;
letter-spacing: 0px;
color: #000000;
}
.offer1 h1 {
float: left;
margin: 7px 0 4px 22px;
font-size: 30px;
font-weight: 600;
letter-spacing: 0px;
color: #C42F0C;
}
.off2 p {
float: left;
margin: 2px 0px 0px 10px;
width: 190px;
font-size: 15px;
font-weight: 600;
line-height: 17px;
letter-spacing: 0px;
color: #C42F0C;
}
.dvd img {
float: right;
margin: 0px 10px 0 0px;
width: 180px;
height: 217px;
}
.clear {
clear: both;
}
.robert {
Float: left;
background: url(images/robert.jpg);
margin: 140px 0px 50px 0px;
width: 190px;
height: 193px;
}
#middle {
width: 900px;
background-color: #fff;
border-left: 4px solid #ccc;
border-right: 4px solid #ccc;
border-bottom: 4px solid #ccc;
overflow: hidden;
}
.promo1 h1 {
float: left;
margin: 30px 0 0 120px;
width: 650px;
font-size: 19px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0px;
color: #C42F0C;
}
.clear {
clear: both;
}
.filmtext h1 {
float: left;
margin: 18px 0 0 290px;
width: 320px;
font-size: 37px;
font-weight: 500;
line-height: 40px;
letter-spacing: 0px;
color: #000000;
}
.clear {
clear: both;
}
.filmtext h2{
float: left;
margin: 40px 0 0 210px;
width: 480px;
font-size: 15px;
line-height: 21px;
letter-spacing: 0px;
color: #000000;
}
.clear {
clear: both;
}
.dandj {
float: left;
margin: -60px 0px 0px 0px;
width: 820px;
height: 320px;
}
.clear {
clear: both;
}
.redbar img {
float: left;
margin: 0px 0px 0px 0px;
width: 900px;
height: 100px;
}
.promo3 h1 {
float: left;
margin: 20px 0 0 200px;
width: 500px;
font-size: 15px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0px;
color: #000000;
}
.clear {
clear: both;
}
.legal p {
margin: 6px 0 40px 200px;
width: 480px;
font-size: 10px;
line-height: 16px;
text-align: left;
color: #000000;
}
.clear {
clear: both;
}
.affiliates {
float: left;
margin: 30px 0 0px 0px;
}
.clear {
clear: both;
}
.johnsonbox img{
float: left;
margin: 60px 0px 0 170px;
border-style: none;
}
.clear {
clear: both;
}
#mailer {
float: left;
margin: 34px 0 30px 240px;
width: 420px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0px;
color: #000000;
}
a.mailer:link, a.mailer:visited {
text-decoration: none;
color: blue;
}
a.mailer:hover {
text-decoration: none;
color: #FF3300;
}
.clear {
clear: both;
}
#bottom {
width: 900px;
}
#bottom p {
width: 900px;
font-size: 10px;
margin: 0 0 30px 0px;
color: #999;
}
a.bottom:link, a.bottom:visited {
text-decoration: none;
color: #999;
}
a.bottom:hover {
text-decoration: none;
color: #E2EEFC;
}