I am having trouble with the ads that T35's Free Hosting places on their member's pages. They insert the ads via Javascript just before the closing <body> tag. My problem is that they're floating off to the right of my web layout. I tried shrinking my layout and they went down below the footer where they should be. I'm not sure if this is just because of my widescreen monitor (19" Widescreen), or a problem with Firefox, or something else.
Here is the website:
And here is the page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Darin's PC Repair - Home</title>
<meta name="description" content="Darin's PC Repair" />
<meta name="keywords" content="darin beaudreau, pc repair, tech support, north oxford, massachusetts, ma, 01537, computer repair" />
<link href="styles/main_style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]><link href="styles/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 7]><link href="styles/ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
</head>
<body>
<?php
$client_IP = $_SERVER['REMOTE_ADDR'];
$visit_date = date("l d F H:i:s");
$fp = fopen("info/ips.txt", "a");
fwrite($fp, "IP: $client_IP\nDate: $visit_date\n\n");
fclose($fp);
$curr_cnt;
$new_cnt;
$fp = fopen("info/counter.txt", "r");
$curr_cnt = fgets($fp);
fclose($fp);
$fp = fopen("info/counter.txt", "w");
$new_cnt = $curr_cnt + 1;
fwrite($fp, $new_cnt);
fclose($fp);
?>
<div id="wrapper">
<div id="header">
<p><span>tel:</span> <strong>774.437.9612</strong>
<ul>
<li class="no_bg"><a href="#">home</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">contact</a></li>
</ul>
</div> <!--header ends-->
<a href="#" id="logo" title="Darin's PC Repair" class="replace"><span>Darin's PC Repair</span></a>
<form id="search_form" action="search">
<p><input type="text" value="Search this site for..." />
<input type="submit" id="submit" value="" /></p>
</form> <!--form ends-->
<div id="banner">
<img style="margin-top: 10px;" src="images/darinpcrepair_image.gif" alt="" />
</div> <!--banner ends-->
<div id="navigation">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> <!--navigation ends-->
<div id="content">
<div id="left_column">
<div class="text">
<h2>Website Under Construction</h2>
<p>This website is still under construction. If you have any questions, or need to set up an appointment, please e-mail me or call me. My phone number can be found at the top of the page. You can e-mail me at: <a href="mailto: packetpirate@gmail.com" class="email">packetpirate@gmail.com</a><br />
<br />I hope to have the rest of the website up and running very soon.
</p>
</div> <!--text ends-->
<div class="text alternative">
<p> </p>
</div> <!--text ends-->
<div class="text">
<p> </p>
</div> <!--text ends-->
</div> <!--left column ends-->
<div id="right_column">
<div class="heading">
<h2>Sponsors</h2>
</div> <!--heading ends-->
<ul class="sponsors">
<li><script type="text/javascript"><!--
google_ad_client = "pub-8760377978778321";
/* Darin's PC Repair Ad */
google_ad_slot = "3664463414";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></li>
<li> <br /><br /><br /><br /><br /><center>Advertise Here</center></li>
</ul>
</div> <!--right column ends-->
</div> <!--content ends-->
</div> <!--wrapper ends-->
<div id="footer">
<div id="footer_content">
<ul>
<li class="no_bg"><a href="#">home</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">contact</a></li>
<li><div style="font-size: 15px;color: #fff;">
<?php
$visits;
$fp = fopen("info/counter.txt", "r");
$visits = fgets($fp);
fclose($fp);
echo "Visitors: " . $visits;
?></div></li>
</ul>
<p> © 2010 Darin's PC Repair. All Rights Reserved.</p>
</div> <!--footer content ends-->
</div> <!--footer ends-->
</body>
</html>
And the CSS:
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{
margin: 0;
padding: 0;
}
ul
{
list-style: none;
}
fieldset
{
border: 0;
}
body
{
position: relative;
background: #383d43 url(../images/top_banner_repeating.png) repeat-x;
color: #000;
font: 62.5% Myriad Pro,Arial,sans-serif;
}
#wrapper
{
width: 943px;
padding: 0px 0px 0px 1px;
margin: 0 auto;
}
#header
{
width: 908px;
height: 46px;
font-size: 14px;
padding: 16px 35px 0px 22px;
}
#header p
{
float: left;
color: #525961;
position: relative;
top: 15px;
}
#header span
{
color: #bababa;
}
#header ul
{
float:right;
position: relative;
top: 15px;
}
#header ul li
{
float: left;
margin: 0px 12px 0px 0px;
padding: 0px 0px 0px 12px;
}
#header ul li.no_bg
{
background: none;
}
#header ul li a
{
color: #fff;
text-decoration: none;
}
#header ul li a:hover
{
color: #525961;
text-decoration: none;
}
#logo
{
display: inline-block;
width: 259px;
height: 29px;
float: left;
clear: both;
margin: 12px 0px 0px 21px;
background: url(../images/darinpcrepair_logo.jpg) no-repeat;
text-indent: -9999px;
}
form
{
float: right;
}
input
{
width: 147px;
height: 12px;
float: left;
margin: 13px 0px 0px 0px;
padding: 5px 10px;
color: #a0a4a8;
border: none;
}
input#submit
{
display: inline;
width: 60px;
height: 21px;
float: left;
margin: 13px 0px 0px 8px;
background: url(../images/search_button.gif) no-repeat;
cursor: pointer;
}
#navigation
{
width: 948px;
height: 34px;
float: left;
padding: 5px 0px 5px 15px;
background: url(../images/navigation_repeating.gif) repeat-x;
border: 1px solid #43474b;
}
#navigation ul li
{
display: block;
float: left;
height: 29px;
margin-left: 10px;
}
#navigation ul li a
{
display: inline-block;
color: #cbd9e7;
height: 23px;
font-size: 14px;
padding: 12px 24px 0px 24px;
text-transform: uppercase;
text-decoration: none;
}
#navigation ul li a:hover
{
text-decoration: none;
background: url(../images/nav_button_repeating.gif) repeat-x;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#navigation ul li.active a
{
text-decoration: none;
background: url(../images/nav_button_repeating.gif) repeat-x;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#content
{
width: 964px;
float: left;
background: url(../images/darinpcrepair_content_repeating.gif) repeat-y;
}
#left_column
{
width: 635px;
float: left;
}
#right_column
{
width: 294px;
float: left;
padding: 18px 18px 0px 17px;
}
.text
{
font-family: Helvetica, Arial;
width: 626px;
height: 150px;
float: left;
padding: 32px 38px 22px 30px;
}
.text h2
{
font-size: 24px;
float: left;
margin: 0px 0px 12px 0px;
color: #fff;
}
.text p
{
color: #bcc4c7;
width: 552px;
float: left;
clear: left;
font-size: 12px;
}
.text p img
{
float: right;
margin: 0px 0px 0px 20px;
}
.text a.continue
{
position: relative;
color: #65b8f9;
float: left;
clear: left;
font-size: 15px;
margin: 30px 0px 0px 0px;
text-decoration: none;
}
.text a.continue:hover
{
position: relative;
color: #FF0000;
float: left;
clear: left;
font-size: 15px;
margin: 30px 0px 0px 0px;
text-decoration: none;
}
.text a.email
{
color: #65b8f9;
font-size: 15px;
text-decoration: none;
}
.text a.email:hover
{
color: #FF0000;
font-size: 15px;
text-decoration: none;
}
.alternative
{
background: #2a2d32;
border-top: 1px solid #26292e;
border-bottom: 1px solid #26292e;
}
.heading
{
width: 220px;
height: 23px;
float: right;
padding: 12px 0px 0px 14px;
margin: 0px 0px 18px 0px;
background: url(../images/nav_button_repeating.gif) repeat-x;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.heading h2
{
font-size: 17px;
color: #ffffff;
text-align: center;
font-weight: normal;
}
.heading img
{
float: right;
margin: 3px 0px 0px 0px;
}
ul
{
float: left;
margin: 0px 0px 39px 0px;
}
ul.sponsors li
{
display: block;
width: 200px;
height: 200px;
float: right;
margin: 0px 17px 10px 10px;
background: #ffffff no-repeat;
border: 1px solid #000;
color: #000000;
}
ul li
{
font-size: 14px;
color: #ffffff;
margin: 0px 0px 17px 11px;
}
ul li span
{
color: #65b8f9;
}
#footer
{
width: 100%;
float: left;
clear: both;
height: 120px;
border-top: 1px solid #3c4249;
background: #1e2329;
}
#footer_content
{
margin: auto;
width: 966px;
padding: 46px 17px 0px 0px;
}
#footer_content ul
{
float: right;
margin: 0px 0px 10px 0px;
}
#footer_content ul li
{
float: left;
margin: 0px 0px 0px 12px;
padding: 0px 0px 0px 12px;
background: url(../images/navigation_repeating.gif) left bottom no-repeat;
}
#footer_content ul li.no_bg
{
background: none;
}
#footer_content ul li a
{
color: #fff;
text-decoration: none;
}
#footer_content ul li a:hover
{
color: #525961;
text-decoration: none;
}
#footer_content p
{
float: right;
clear: right;
margin: 0px;
font-size: 12px;
color: #383d43;
}