I am wondering why the body section is at the top of the screen, and why is the bottom slice of the image I sliced with Fireworks still there even though there is no code remaining of the spacer gif’s and the slices. I just want to start by displaying the page correctly.
Then there are gaps between the lower header section and the body section, as well as a break between the body and footer. ???
The Whole HTML File Right now:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="You can find product reviews here for renowned internet products. This is an unbiased site that exposes bad products and promotes the good ones." />
<meta name="Keywords" content="keyword1, keyword2,..." />
<meta name="rating" content="General" />
<meta name="revisit-after" content="14 days" />
<meta name="ROBOTS" content="All" />
<link href="style/main.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="style/ie.css" rel="stylesheet" type="text/css" media="screen" />
<link href="style/dropdownmenus.css" rel="stylesheet" type="text/css" media="screen" />
<title>Atlanta Review Group™</title>
</head>
<body>
<div id="header" align="center">
<div id="lowerheader" align="center">
<div id="blueshadow">
<b><u>Home Page</u></b>
</div>
<p id="redshadow">Hello, and welcome to Atlanta Review Group where we write about cool products circulating on the internet. We also work to expose the scams out there. This is some temporary text.</p>
<!-- "Please Select a Page from Below" -->
<!--[if !IE]> -->
<div style="margin-top:1em;">
<object type="application/x-shockwave-flash" data="pleaseselectapage.swf" width="300" height="30">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="300" height="30">
<param name="movie" value="pleaseselectapage.swf" />
<!--><!-- http://Validifier.com -->
</object>
<!-- <![endif]--></div>
</div>
<div id="body" align="center">
<!-- begin Personal navigation menu -->
<ul id="pMenu">
<li><a href="http://www.atlantareviewgroup.com/health.php">health</a>
<div>
<h2>weight loss</h2>
<h3>fitness</h3>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h3>dieting</h3>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>skin care</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/insurance.php">insurance</a>
<div>
<h2>property insurance</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>auto insurance</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>health insurance</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>annuities</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/general.php">general</a>
<div>
<h2>electronics</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>style & fashion</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>food/dining</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>cars/auto</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/dating.php">dating</a>
<div>
<ul>
<li><a href="#">RealMatureSingles</a></li>
<li><a href="#">SeniorPeopleMeet</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/education.php">education</a>
<div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</div>
</li>
</ul>
<!-- end Personal navigation menu-->
</div>
<div id="footer" align="center">
<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="thanksforvisiting.swf" width="380" height="68">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="380" height="68">
<param name="movie" value="thanksforvisiting.swf" />
<!--><!-- http://Validifier.com -->
</object>
<!-- <![endif]-->
</div>
<div class="blackshadow">©AtlantaReviewGroup.com</div>
<div class="blackshadow">Updated June 30, 2011</div>
</body>
</html>
The Whole CSS File:
@charset "utf-8";
/* CSS Document */
body{
background-image: url(bg.jpg);
background-position:top center;
background-color:#FFF;
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
}
#header{
background-image:url(header.jpg);
background-repeat:no-repeat;
width:635px;
height:126px;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
}
#loveheader{
background-repeat:no-repeat;
width:635px;
height:126px;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
#lowerheader{
background-image:url(lowerheader.jpg);
width:783px;
height:100px;
}
#body{
background-image:url(body.jpg);
width:783px;
text-align: center;
}
#body2{
background-image:url(body.jpg);
width:783px;
text-align: center;
}
#footer{
background-image:url(footer.jpg);
width:783px;
height:82px;
text-align: center;
}
#redshadow{
color:#CCC;
font-size:16px;
font-family:Verdana, Geneva, sans-serif;
text-shadow: 0px 0px 2px #900, 0px -7px 30px #966, 0px -14px 60px;
}
#blueshadow{
font-size:24px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
text-align:center;
vertical-align:bottom;
text-shadow:0 0 4px #09F, 0 -5px 15px #009;
margin:0;
padding-top:.8em;
}
#redshadow{
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#003;
text-shadow:0 0 2px #F60, 0 -3px 10px #900;
}
div.whitebox{
color:#000;
text-shadow:1px 1px 1px #000;
display:block;
background:#FFF;
border:6% inset #CCC;
width:70%;
height:auto;
padding:2%;
/*for IE*/
filter:alpha(opacity=50);
/*standard CSS3*/
opacity:0.5;
}
#realmaturesingles{
text-decoration:none;
font-family:Impact;
font-size:3em;
color:#CF0;
right:-6%;
top:-1em;
}
#seniorpeoplemeet{
text-decoration:none;
font-family:Tahoma, Geneva, sans-serif;
font-size:3em;
color:#FF0;
right:-39%;
top:-.2em;
}
.blackshadow{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
text-shadow:0px 2px 2px #000;
text-align:center;
color:#000;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}
#lowerheader tr td #redshadow b {
font-size: 16px;
}
