Solved

Problem with excess space added in Internet Explorer.

Posted on 2008-10-31
5
537 Views
Last Modified: 2012-05-05
I'm making a site which looks fine in Fire Fox, but when viewed in IE extra vertical space is added to one of the cells throwing everything else off. Here is the page and the cell where the extra space is being added. I've also attached the full code. Any help would be appreciated.

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

<td colspan="2" rowspan="3" valign="middle" bgcolor="#000000"><script language="JavaScript"><!--
function PicStrip_DoFSCommand(command, args){
if (command == "status") window.status = args;
}// --></script>
                  <script language="VBScript"><!--
on error resume next
Sub PicStrip_FSCommand(ByVal command, ByVal args) call PicStrip_DoFSCommand(command, args)
end sub
--></SCRIPT>

                  <CENTER>
                   
  <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="580" height="60" id="PicStrip">
  <param name="flashvars" value="Copyright=(c) Cool Focus [www.coolfocus.com]">
  <param name="movie" value="PicStrip.swf"> <param name="menu" value="false"> <param name="quality" value="best"> <param name="scale" value="noscale"> <param name="salign" value="LT"> <param name="bgcolor" value="#000000"> <param name="wmode" value="window">
  <embed src="PicStrip.swf" flashvars="Copyright=(c) Cool Focus [www.coolfocus.com]" menu="false" quality="best" scale="noscale" salign="LT" bgcolor="#000000"  wmode="window" width="580" height="60" swliveconnect="TRUE" name="PicStrip" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
  </object>
                  </CENTER></td>
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!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=iso-8859-1" />
<title>Untitled Document</title>
<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>
<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>
<style type="text/css">
A {
	text-decoration:none;
	color: #CCCCCC;
}
A:link	{color:#CCCCCC;}
A:visited{color: #FFFFFF;}
A:hover	{color: #FFFFFF;}
 .tab {font-size:12px;font-family:Arial,Helvetica;color:#CCCCCC;}
 .tabb {font-size:12px; font-family:Arial,Helvetica;}
.blue_bg {
	background-image: url(images/blue_topper.jpg);
	background-repeat: no-repeat;
}
.style4 {
	font-family: Arial, Helvetica;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: bold;
}
body {
	background-color: #4b4b4b;
}
.style5 {
	font-size: 7pt;
	color: #CCCCCC;
}
</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=865;
 
//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 Scroll - News Scroll - News Scroll - News Scroll - News Scroll - News Scroll - News Scroll - News Scroll - News Scroll - News Scroll - News Scroll - News Scroll</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-->
 
</head>
 
<body onload="startw(); document.getElementById('wslider').style.top = '15%'; "MM_preloadImages('images/rarrowon.jpg','images/larrowon.jpg');"><body onload="MM_preloadImages('images/larrowon.jpg','images/rarrowon.jpg')">
 
 
  <tr>
    <td>&nbsp;</td>
    <td><!-- 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>
<div class="blue_bg">
<table width="875" border="0">
            <!--DWLayoutTable-->
            <tbody>
              <tr>
                <td width="1" height="4"></td>
                <td width="411"></td>
                <td width="167"></td>
                <td width="279"></td>
              </tr>
              <tr>
                <td rowspan="3"></td>
                <td colspan="2" rowspan="3" valign="middle" bgcolor="#000000"><script language="JavaScript"><!--
function PicStrip_DoFSCommand(command, args){
if (command == "status") window.status = args;
}// --></script> 
                  <script language="VBScript"><!--
on error resume next
Sub PicStrip_FSCommand(ByVal command, ByVal args) call PicStrip_DoFSCommand(command, args)
end sub
--></SCRIPT>
 
                  <CENTER>
                    
  <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="580" height="60" id="PicStrip">
  <param name="flashvars" value="Copyright=(c) Cool Focus [www.coolfocus.com]">
  <param name="movie" value="PicStrip.swf"> <param name="menu" value="false"> <param name="quality" value="best"> <param name="scale" value="noscale"> <param name="salign" value="LT"> <param name="bgcolor" value="#000000"> <param name="wmode" value="window"> 
  <embed src="PicStrip.swf" flashvars="Copyright=(c) Cool Focus [www.coolfocus.com]" menu="false" quality="best" scale="noscale" salign="LT" bgcolor="#000000"  wmode="window" width="580" height="60" swliveconnect="TRUE" name="PicStrip" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
  </object>
                  </CENTER></td>
                <td height="17" valign="top"><span class="style4">&nbsp;&nbsp;&nbsp;&nbsp;Search Flag Football </span></td>
              </tr>
              <tr>
                <td height="27" align="left" valign="bottom"><form method="get" action="http://www.google.com/custom">
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <input type="text" name="q" size="16" maxlength="255" value="" />
					<input type="submit" name="btnG" value="Search" />
					  <input type="hidden" name="sitesearch" value="www.glowfishtw.com" />
				</form>				</td>
              </tr>
              <tr>
                <td height="14" align="center" valign="top"> <span class="style5">- <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></td>
              </tr>
              <tr>
                <td height="11"></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td height="124"></td>
                <td></td>
                <td colspan="2" valign="middle">
                  <table width="428" height="86" border="0" class="scbg">
				  <!--DWLayoutTable-->
				  <tr>
				    <td width="20" 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="372" height="66" align="center" valign="bottom"><div id="qscroller2" class="qscroller"></div></td>
      <td width="22" 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="" />	
                                                                                                                                     <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="" /> 
  	  <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="" />   
  	  <img src="images/scorebox.jpg" alt="" />  	  </div>
                                                                                                                                   </div></td>
              </tr>
              <tr>
                <td height="426"></td>
                <td></td>
                <td>&nbsp;</td>
                <td></td>
              </tr>
            </tbody>
      </table>
</div></td></tr>
  <p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
 
  <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
Comment
Question by:elliottbenzle
  • 3
  • 2
5 Comments
 
LVL 25

Accepted Solution

by:
Rouchie earned 500 total points
ID: 22850011
Okay there is a lot of problems in the code here.

First, you have 2 body tags...

   <body onload="startw(); document.getElementById('wslider').style.top = '15%'; "MM_preloadImages('images/rarrowon.jpg','images/larrowon.jpg');"><body onload="MM_preloadImages('images/larrowon.jpg','images/rarrowon.jpg')">


I think this should read:

  <body onload="startw(); document.getElementById('wslider').style.top = '15%'; MM_preloadImages('images/rarrowon.jpg','images/larrowon.jpg'); ">


Next, you have a table row directly after this line, but no table declaration.  So, on line 107:

    <tr>

should become

    <table>
         <tr>

as you cannot have a table row that's not in a table.

Finally, as for your white space, try this, which removes padding from the table cell and margins from the Flash object, which both contribute towards the creation of white space...

<td colspan="2" rowspan="3" valign="middle" bgcolor="#000000" style="padding:0; text-align:center;"><script language="JavaScript"><!--
function PicStrip_DoFSCommand(command, args){
if (command == "status") window.status = args;
}// --></script>
<script language="VBScript"><!--
on error resume next
Sub PicStrip_FSCommand(ByVal command, ByVal args) call PicStrip_DoFSCommand(command, args)
end sub
--></SCRIPT>
<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="580" height="60" id="PicStrip" style="margin:0;">
  <param name="flashvars" value="Copyright=(c) Cool Focus [www.coolfocus.com]">
  <param name="movie" value="PicStrip.swf"> <param name="menu" value="false"> <param name="quality" value="best"> <param name="scale" value="noscale"> <param name="salign" value="LT"> <param name="bgcolor" value="#000000"> <param name="wmode" value="window">
  <embed src="PicStrip.swf" flashvars="Copyright=(c) Cool Focus [www.coolfocus.com]" menu="false" quality="best" scale="noscale" salign="LT" bgcolor="#000000"  wmode="window" width="580" height="60" swliveconnect="TRUE" name="PicStrip" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
</object>
</td>

Open in new window

0
 
LVL 4

Expert Comment

by:MattKenefick
ID: 22850541
IE will add extra white space if you use images or such with gaps. Use comment tags to eliminate any spaces between things that should be butt-to-butt with each other.

With this method, you can arrange and organize your code, but it will also be IE compliant.
<img src="whatever.jpg"><!--
--><img src="whatever2.jpg"><!--
--><img src="whatever3.jpg">

Open in new window

0
 
LVL 25

Expert Comment

by:Rouchie
ID: 22850670
>> but it will also be IE compliant.

LOL that's the kind of thing I would expect to hear at a Microsoft press-conference....!!!!

Yes I agree with your advice here.  I had simply used the return key to stick everything against the left-edge of the code and tried to make sure no spaces where left anywhere in there.

Roll on IE8 and let's hope they make a good job of it.... :-)
0
 
LVL 4

Expert Comment

by:MattKenefick
ID: 22850773
Yeah, I heard they finally broke down with IE8 and it is supposed to follow all the rules..

It passed the first two Acid Tests perfectly as I recall.
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 22850856
Yeah I noticed Beta 2 was doing okay.  It's always the little bugs that drive the designers crazy though.... ;-)
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
message Alert on an empty search 10 29
Send form to asp server side 6 28
How to calculate height of a text using jquery 3 42
Use Mid in Html 6 23
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question