• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2696
  • Last Modified:

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

0
elliottbenzle
Asked:
elliottbenzle
1 Solution
 
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now