Why is firefox adding extra space between my divs?

I'm trying to get my site to appear uniform on all browsers. In IE it looks fine. In firefox/safari/chrome there is a alrge line of extra space between the header "Pic of the week" and the picture itself. You can see the page here:

http://www.glowfishtw.com/flagfootball/index.asp

Any ideas as to what is causing this? I've attached my code. Thanks for any help.


<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flag Football Fanatics</title>
 
<!-- Begin Grab This - You'll need this external CSS file and the IE Statement below -->
<style type="text/css">@import url("menuh.css");</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%; margin:0px; padding:0px;}
#menuh a{height:0%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->
<!-- End Grab This -->
 
<script type="text/javascript">
<!--
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_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_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];}
}
//-->
</script>
 
<link href="qscroller.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="qscroller.js"></script>
<style type="text/css">
<!--
A { text-decoration:none;}
A:link	{color:blue;}
A:hover	{color: red;}
A:visited {color:blue;}
 .tab {font-size:12px;font-family:Arial,Helvetica;color:#CCCCCC;}
 .tabb {font-size:14px; font-family:Arial,Helvetica;}
 
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	height: 200px;
}
.oneColFixCtrHdr #container {
	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: center; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
	padding: 0 0px 0 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	text-align: center;
	background-color: #000C60;
}
.tophalf {
	background-image: url(images/tophalfbbg.jpg);
	background-repeat: repeat-x;
	height: 90px;
}
 
.bottomhalf {
	background-image: url(images/bottomhalfbbg.jpg);
	background-repeat: no-repeat;
	height: 105px;
	padding-top: 15px;
	padding-right: 12px;
}
.menuhalf {
	height: 22px;
	width: 780px;
	background-image: url(images/menuhalf.jpg);
	background-repeat: repeat-x;
	text-align: center;
}
 
a:link {
	color: #CCCCCC;
}
.spacer {
	width: 5px;
}
.oneColFixCtrHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
	padding: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #FFFFFF;
}
.oneColFixCtrHdr #footer {
	padding: 0 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#DDDDDD;
}
.oneColFixCtrHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 0px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
 
.style3 {
	font-size: 10px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
 
    .speciallink {
	font-family: verdana, arial, helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 8px;
	font-style: normal;
	font-weight: normal;
    }
 
    .speciallink A:link {
	color: #FFFFFF;
	text-decoration: none;
    }
 
    .speciallink A:visited {
	color: #CCCCCC;
	text-decoration: none;
    }
 
    .speciallink A:hover {
	color: #666666;
    }
.style7 {
	font-family: verdana, arial, helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 8px;
}
.picbox {
	width: 250px;
	padding-right: 0px;
	padding-left: 0px;
	margin-right: 25px;
	margin-left: 25px;
	background-color: #E7E9FF;
	text-align: center;
}
.picboxheader {
	width: 250px;
	margin-top: 25px;
	margin-right: 25px;
	margin-left: 25px;
	background-color: #E7E9FF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #000000;
}
 
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
 
/***********************************
*   http://javascripts.vbarsan.com/
*   This notice may not be removed 
***********************************/
 
//-- Begin Scroller's Parameters and message -->
//scroller width: change to your own;
var wwidth=770;
 
//scroller height: change to your own;
var wheight=20;
 
//background color: change to your own; 
var wbcolor="#ccffcc";
 
//scroller's speed: change to your own;
var sspeed=2;
var restart=sspeed;
var rspeed=sspeed;
 
//text: change to your own
 
wwholemessage='<nobr class=tab><b>News Scroller Horizontal v2.2 => '+
'<a class=tabb href="http://javascripts.vbarsan.com">'+
'Vertical Scroller JavaScript 7.0 + Horizontal Scroller JavaScript 7.0 + Typewriter Scroller JavaScript 5.0</a> <= Text Scroller Horizontal v2.2</b></nobr>';
 
//-- end Parameters and message-->
 
//-- begin: Scroller's Algorithm -->
var sizeupw=0;var operbr=navigator.userAgent.toLowerCase().indexOf('opera');if(operbr==-1&&navigator.product&&navigator.product=="Gecko"){var agt = navigator.userAgent.toLowerCase();var rvStart = agt.indexOf('rv:');var rvEnd = agt.indexOf(')', rvStart);var check15 = agt.substring(rvStart+3, rvEnd);if(parseFloat(check15)>=1.8) operbr=0;}if (navigator.appVersion.indexOf("Mac")!=-1)operbr=0;
function goup(){if(sspeed!=rspeed*8){sspeed=sspeed*2;restart=sspeed;}}
function godown(){if(sspeed>rspeed){sspeed=sspeed/2;restart=sspeed;}}
function startw(){if(document.getElementById)ns6marqueew(document.getElementById('wslider'));else if(document.all) iemarqueew(wslider);else if(document.layers)ns4marqueew(document.wslider1.document.wslider2);}function iemarqueew(whichdiv){iedivw=eval(whichdiv);iedivw.style.pixelLeft=wwidth+"px";iedivw.innerHTML='<nobr>'+wwholemessage+'</nobr>';sizeupw=iedivw.offsetWidth;ieslidew();}function ieslidew(){if(iedivw.style.pixelLeft>=sizeupw*(-1)){iedivw.style.pixelLeft-=sspeed+"px";setTimeout("ieslidew()",100);}else{iedivw.style.pixelLeft=wwidth+"px";ieslidew();}}function ns4marqueew(whichlayer){ns4layerw=eval(whichlayer);ns4layerw.left=wwidth;ns4layerw.document.write('<nobr>'+wwholemessage+'</nobr>');ns4layerw.document.close();sizeupw=ns4layerw.document.width;ns4slidew();}function ns4slidew(){if(ns4layerw.left>=sizeupw*(-1)){ns4layerw.left-=sspeed;setTimeout("ns4slidew()",100);}else{ns4layerw.left=wwidth;ns4slidew();}}function ns6marqueew(whichdiv){ns6divw=eval(whichdiv);ns6divw.style.left=wwidth+"px";ns6divw.innerHTML='<nobr>'+wwholemessage+'</nobr>';sizeupw=ns6divw.offsetWidth;if(operbr!=-1){document.getElementById('operaslider').innerHTML='<nobr>'+wwholemessage+'</nobr>';sizeupw=document.getElementById('operaslider').offsetWidth;}ns6slidew();}function ns6slidew(){if(parseInt(ns6divw.style.left)>=sizeupw*(-1)){ns6divw.style.left=parseInt(ns6divw.style.left)-sspeed+"px";setTimeout("ns6slidew()",100);}else{ns6divw.style.left=wwidth+"px";ns6slidew();}}
//-- end Algorithm -->
</script>
<!-- End of Script between <head> & </head> tags-->
 
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
 
</head>
 
<body class="oneColFixCtrHdr"; onload="startw(); document.getElementById('wslider').style.top = '10%';MM_preloadImages('images/winteron.jpg','images/registeron.jpg','images/springon.jpg','images/fallon.jpg','images/summeron.jpg','images/parentson.jpg','images/coacheson.jpg','images/kidson.jpg','images/scheduleson.jpg','images/nflyouthon.jpg','images/ruleson.jpg','images/pictureson.jpg','images/videoon.jpg','images/contacton.jpg','images/adultleagueon.jpg')">
 
<div id="container">
  <div id="header" align="center">
<!-- You may remove first cell below (<td> ... </td>) to get rid of Speed-change -->
<script language="JavaScript">document.write('<table align="center" border="0"><tr><td width='+wwidth+'px>');if(document.getElementById || document.all){document.write('<span style="width:'+wwidth+'px;"><div style="position:relative;overflow:hidden;width:'+wwidth+'px;height:'+wheight+'px;clip:rect(0 '+wwidth+'px '+wheight+'px 0);background-image: url(images/topbar.jpg);" onMouseover="sspeed=0;" onMouseout="sspeed=restart">');if(operbr!=-1)document.write('<div id="operaslider" style="position:absolute;visibility:hidden;"></div>');document.write('<div id="wslider" style="position:absolute;height:'+wheight+'px;"></div></div></span>')}</script>
<ilayer width=&{wwidth}; height=&{wheight}; name="wslider1" bgcolor=&{wbcolor};><layer name="wslider2" width=&{wwidth}; height=&{wheight}; onMouseover="sspeed=0;" onMouseout="sspeed=restart"></layer></ilayer></td></tr></table>
<!-- end  of code between BODY TAGS -->
 
  </div>
  <div class="tophalf">
  
    <table width="539" height="80" border="0" align="left">
      <tr>
        <td width="4">&nbsp;</td>
        <td width="520" bgcolor="#000000"><div align="center">
          <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','500','height','60','align','middle','src','PicStrip','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','bgcolor','#000000','movie','PicStrip' ); //end AC code
        </script>
          <noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="500" height="60" align="middle">
              <param name="movie" value="PicStrip.swf" />
              <param name="quality" value="high" />
              <param name="BGCOLOR" value="#000000" />
              <embed src="PicStrip.swf" width="500" height="60" align="middle" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#000000"></embed>
            </object>
            </noscript>
        </div></td>
      </tr>
    </table>
                <table width="233" height="62" align="center"0">
  <tr>
    <td height="14" valign="top"><div align="left" ><span class="style3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Search Flag Football</span></div></td>
  </tr>
  <tr>
    <form method="get" action="http://www.google.com/custom">
       <td height="26" valign="top"><div align="left">
                  <input type="text" name="q" size="20" maxlength="255" value="" />
					<input type="submit" name="btnG" value="Search" />
					  <input type="hidden" name="sitesearch" value="http://www.flagfball.com/" />
       </div></td>
    </form>
  </tr>
  <tr>
    <td height="12" valign="top"><div align="center"><span class="speciallink">- <a href="javascript:void(0)">register</a> - <a href="javascript:void(0)">schedule</a> - <a href="javascript:void(0)">old site</a> - <a href="javascript:void(0)">adult league</a> - </span></div></td>
  </tr>
</table>
</div>
 
<div class="bottomhalf">
  <table width="316" height="86" border="0" align="right" class="scbg">
				  <!--DWLayoutTable-->
<tr>
				    <td width="22" rowspan="2" align="center" valign="middle"><a id="go-prev" href="javascript:void(0)"><span href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('larrow','','images/larrowon.jpg',1)"><img src="images/larrow.jpg" name="larrow" width="13" height="12" border="0" id="larrow" /></span></a></td>
                    
      <td width="260" height="66" align="center" valign="bottom"><div id="qscroller2" class="qscroller"></div></td>
      
      <td width="17" rowspan="2" align="center" valign="middle">  <a id="go-next" href="javascript:void(0)"><span href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rarrow','','images/rarrowon.jpg',1)"><img src="images/rarrow.jpg" name="rarrow" width="13" height="12" border="0" id="rarrow" /></span></a></td>
      </tr>
				  <tr>
				    <td height="14"></td>
      </tr>
    </table>
<div class="hide">
	<div class="qslide2">
		<img src="images/scorebox.jpg" alt="" />
		<img src="images/scorebox.jpg" alt="" />
		<img src="images/scorebox.jpg" alt="" />
		<img src="images/scorebox.jpg" alt="" />	
	</div>
      
  	<div class="qslide2">
  	  <img src="images/scorebox.jpg" alt="" />
  	  <img src="images/scorebox.jpg" alt="" />
  	  <img src="images/scorebox.jpg" alt="" />
  	  <img src="images/scorebox.jpg" alt="" />   	  
     </div>
      
  	<div class="qslide2">
  	  <img src="images/scorebox.jpg" alt="" />
  	  <img src="images/scorebox.jpg" alt="" />
  	  <img src="images/scorebox.jpg" alt="" />
  	  <img src="images/scorebox.jpg" alt="" />   	  
     </div>
</div>                
</div>
  
<div class="menuhalf">
<div id="menuh">	
		  
	  <ul>
			   <li><a href="#" class="top_parent" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('register','','images/registeron.jpg',1)"><img src="images/register.jpg" name="register" width="60" height="19" border="0"></a>
                  
                 <ul>
                    <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('winter','','images/winteron.jpg',1)"><img src="images/winter.jpg" name="winter" width="60" height="19" border="0"></a></li>
                      <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('spring','','images/springon.jpg',1)"><img src="images/spring.jpg" name="spring" width="60" height="19" border="0"></a></li>
                      <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('fall','','images/fallon.jpg',1)"><img src="images/fall.jpg" name="fall" width="60" height="19" border="0"></a></li>
                   <li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('summer','','images/summeron.jpg',1)"><img src="images/summer.jpg" name="summer" width="60" height="19" border="0"></a></li>
                 </ul>
        		</li>
      		</ul>   
      
          	 	<ul>
              		<img src="images/menuspacer.jpg">		       				
	      	  </ul>   
       
    			<ul>
		    	  <li>
                		<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('parents','','images/parentson.jpg',1)"><img src="images/parents.jpg" name="parents" width="60" height="19" border="0"></a>		
               	  </li>
		     	</ul>   
                
              	<ul>
              		<img src="images/menuspacer.jpg">		       				
   	  </ul>   
                
                <ul>
			    	<li>
               		  <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('coaches','','images/coacheson.jpg',1)"><img src="images/coaches.jpg" name="coaches" width="66" height="19" border="0"></a>                 	</li>
		     	</ul>   
                
              	<ul>
              		<img src="images/menuspacer.jpg">		       				
   	  </ul>   
                
                <ul>
			    	<li>
           		    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('kids','','images/kidson.jpg',1)"><img src="images/kids.jpg" name="kids" width="43" height="19" border="0"></a>                 	</li>
		     	</ul>   
                
              	<ul>
              		<img src="images/menuspacer.jpg">		       				
   	  </ul>   
                
                
                               <ul>
			    	<li>
           		      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('schedule','','images/scheduleson.jpg',1)"><img src="images/schedules.jpg" name="schedule" width="76" height="19" border="0"></a> </li>
		     	</ul>   
                
              	<ul>
              		<img src="images/menuspacer.jpg">		       				
		      	</ul>   
                
                                <ul>
			    	<li>
           		      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nflyouth','','images/nflyouthon.jpg',1)"><img src="images/nflyouth.jpg" name="nflyouth" width="148" height="19" border="0"></a> </li>
		     	</ul>   
                
              	<ul>
              		<img src="images/menuspacer.jpg">		       				
   	  </ul>  
                
                                                <ul>
			    	<li>
           		      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('adultleague','','images/adultleagueon.jpg',1)"><img src="images/adultleague.jpg" name="adultleague" width="94" height="19" border="0"></a> </li>
		     	</ul>   
                
   	  <ul>
              		<img src="images/menuspacer.jpg">		       				
   	  </ul>   
                
                 
                
                                <ul>
			    	<li>
           		      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rules','','images/ruleson.jpg',1)"><img src="images/rules.jpg" name="rules" width="49" height="19" border="0"></a> </li>
		     	</ul>   
                
              	<ul>
              		<img src="images/menuspacer.jpg">		       				
   	  </ul>   
                
                  <ul>
			    	<li>
           		      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('pictures','','images/pictureson.jpg',1)"><img src="images/pictures.jpg" name="pictures" width="63" height="19" border="0"></a> </li>
		     	</ul>   
                
              	<ul>
              		<img src="images/menuspacer.jpg">		       				
		      	</ul> 
                
                                                <ul>
			    	<li>
           		      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('video','','images/videoon.jpg',1)"><img src="images/video.jpg" name="video" width="49" height="19" border="0"></a> </li>
		     	</ul>   
                
              	<ul>
              		<img src="images/menuspacer.jpg">		       				
   	  </ul> 
                
 
                
                
                
                
    </div>
 
</div>  
  
  <div id="mainContent">
    <table width="780" height="115" border="0" bgcolor="#FFFDE1">
      <tr>
        <td width="300" height="82" valign="top">
        
        <div align="center" class="picboxheader">
          <p>Pic of the Week</p>
          </div>
        <div align="center" class="picbox"><img src="images/runningman.jpg" width="200" height="200"></div></td>
        <td width="463">&nbsp;</td>
      </tr>
    </table>
    <p>
      <!-- end #mainContent -->
    </p>
  </div>
  <br class="clearfloat" />
  <div id="footer">
    <p>Footer</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
 
 
  <script type="text/javascript">
<!--
window.addEvent('domready', function() {
var opt = {
    slides: 'qslide2',
    duration: 1500,
    buttons: {next:'go-next',prev:'go-prev'},
    transition: Fx.Transitions.Quint.easeOut
  }
  var scroller = new QScroller('qscroller2',opt);
  scroller.load();
});
//-->
</script>
 
</body>
</html>

Open in new window

LVL 4
elliottbenzleAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

shiraztiCommented:
Put the text "Pic of the Week" within <span> tag instead of <p>.
<span>Pic of the Week</span>

Another option : set the paragraph margin to 0px
<p style="margin:0px">Pic of the Week</p>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.