Hello everyone,
I’m revising my website. Now, there is a gap between my lowerheader and body sections, here’s the HTML and CSS.
HTML:
<!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" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<title>Atlanta Review Group™</title>
</head>
<body onload="MM_preloadImages('style/headerslice_r2_c2_s1.jpg','style/headerslice_r2_c2_s4.jpg')">
<table style="margin:0 auto;" border="0" cellpadding="0" cellspacing="0" width="635" align="center">
<!-- fwtable fwsrc="header.png" fwpage="Page 1" fwbase="headerslice" fwstyle="Dreamweaver" fwdocid = "1957171909" fwnested="0" -->
<tr>
<td><img src="style/spacer.gif" alt="" name="undefined_2" width="87" height="1" border="0" /></td>
<td><img src="style/spacer.gif" alt="" name="undefined_2" width="464" height="1" border="0" /></td>
<td><img src="style/spacer.gif" alt="" name="undefined_2" width="84" height="1" border="0" /></td>
<td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" /></td>
</tr>
<tr>
<td colspan="3"><img name="headerslice_r1_c1_s1" src="style/headerslice_r1_c1_s1.jpg" width="635" height="19" border="0" id="headerslice_r1_c1_s1" alt="" /></td>
<td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="19" border="0" /></td>
</tr>
<tr>
<td rowspan="2"><img name="headerslice_r2_c1_s1" src="style/headerslice_r2_c1_s1.jpg" width="87" height="107" border="0" id="headerslice_r2_c1_s1" alt="" /></td>
<td><img name="headerslice_r2_c2_s1" src="style/headerslice_r2_c2_s1.jpg" width="464" height="80" border="0" id="headerslice_r2_c2_s1" usemap="#m_headerslice_r2_c2_s1" alt="" /></td>
<td rowspan="2"><img name="headerslice_r2_c3_s1" src="style/headerslice_r2_c3_s1.jpg" width="84" height="107" border="0" id="headerslice_r2_c3_s1" alt="" /></td>
<td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="80" border="0" /></td>
</tr>
<tr>
<td><img name="headerslice_r3_c2_s1" src="style/headerslice_r3_c2_s1.jpg" width="464" height="27" border="0" id="headerslice_r3_c2_s1" alt="" /></td>
<td><img src="style/spacer.gif" alt="" name="undefined_2" width="1" height="27" border="0" /></td>
</tr>
</table>
<map name="m_headerslice_r2_c2_s1" id="m_headerslice_r2_c2_s1">
<area shape="poly" coords="22,49,36,18,45,9,57,2,60,8,56,17,54,25,52,32,53,38,55,33,57,28,63,29,64,32,65,36,63,42,59,47,55,50,57,53,59,57,63,59,66,58,68,53,68,49,67,46,66,43,65,37,69,37,70,31,71,23,74,16,79,11,82,7,83,10,83,15,87,11,92,8,96,8,100,10,104,15,106,22,106,27,104,34,99,43,95,50,91,55,95,55,100,53,101,47,103,39,107,35,112,33,117,34,121,31,125,31,139,29,145,28,150,27,150,23,151,13,151,13,152,10,163,0,164,6,164,15,163,24,166,26,171,24,177,24,181,24,185,23,192,24,202,24,212,24,220,28,222,31,228,28,234,28,244,28,252,28,258,36,262,28,264,24,271,22,278,23,280,28,280,32,285,30,292,29,296,28,303,28,313,30,322,29,340,30,345,25,352,24,359,24,365,27,370,30,374,30,381,30,390,29,397,29,406,30,460,30,464,36,464,44,460,52,450,54,192,54,184,56,176,55,170,58,164,57,156,60,151,59,144,61,137,59,132,62,128,63,116,63,104,64,97,66,90,68,84,66,78,70,70,70,63,72,54,70,50,65,44,59,42,56,32,58,30,66,28,70,22,77,14,80,6,78,1,73,0,67,3,62,9,64,14,65,13,59,16,53,22,49" href="javascript:;" alt="" onmouseout="MM_swapImage('headerslice_r2_c2_s1','','style/headerslice_r2_c2_s1.jpg',1);" onmouseover="MM_swapImage('headerslice_r2_c2_s1','','style/headerslice_r2_c2_s4.jpg',1);" />
</map>
<div id="lowerheader" align="center">
<div id="blueshadow">
<b><u>Home Page</u></b>
</div>
<!-- "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><u>weight loss</u></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><u>skin care</u></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><u>property insurance</u></h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2><u>auto insurance</u></h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2><u>health insurance</u></h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2><u>annuities</u></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><u>electronics</u></h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2><u>style & fashion</u></h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2><u>food/dining</u></h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2><u>cars/auto</u></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 March 22, 2011</div>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_displayStatusMsg(msgStr) { //v1.0
window.status=msgStr;
document.MM_returnValue = true;
}
//-->
</script>
</body>
</html>
CSS:
@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;
}
/********************/
/*PERSONAL NAV MENU**/
/********************/
#pMenu{
padding-bottom:23em;
padding-left:8em;
}
#pMenu a{
text-decoration:none;
}
#pMenu li{
list-style:none;
float:left;
margin-right:1em;
position:relative;
}
#pMenu li a{
color: #FFF;
text-shadow:1px 1px 1px #000;
width:auto;
padding-left:4%;
padding-right:4%;
padding-top:.2em;
padding-bottom:.2em;
border:.2em groove #0F0;
text-shadow:1px 1px 1px #000;
font-size:20px;
/*begin main gradient*/
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
/*end main gradient*/
}
#pMenu a:hover, #pMenu a:focus, #pMenu a:active {
color:#FF0;
/*begin hover gradient top level*/
background: #a0030b; /* Old browsers */
background: -moz-linear-gradient(top, #a0030b 0%, #f91d00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0030b), color-stop(100%,#f91d00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0030b', endColorstr='#f91d00',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a0030b 0%,#f91d00 100%); /* W3C */
}
#pMenu div{
left:-999em;
position:absolute;
margin-top:.5em;
width:20em;
border:.1em solid #003;
/*second gradient*/
background: rgb(96,108,136); /* Old browsers */
background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
}
#pMenu li:hover div, #pMenu a:focus+div{
left:0;
}
#pMenu div a{
text-decoration:none;
color:#0C0;
text-shadow:2px 2px 2px #000;
background:none;
filter:none;
border:none;
font-size:1em;
text-align:left;
padding-left:.2em;
}
#pMenu div a:hover, #pMenu div a:focus, #pMenu div a:active{
color:#0F0;
background:none;
filter:none;
border:none;
}
#pMenu h2{
text-align:left;
font-size:1em;
text-shadow:1px 1px 1px #000;
margin-top:.3em;
margin-bottom:.1em;
padding-left:.2em;
padding-top:.2em;
}
#pMenu h3{
text-align:left;
text-shadow: 1px 1px 1px #000;
font-size:.8em;
margin-bottom:.1em;
margin-top:.1em;
padding-top:.1em;
}
/******************/
/*End Personal Nav*/
/*****************/
Why is there a gap?
P.S.- I want to know if JPEGs allow transparency. 