Solved

Problem with excess space added in Internet Explorer.

Posted on 2008-10-31
5
533 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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now