Solved

Problem with excess space added in Internet Explorer.

Posted on 2008-10-31
5
534 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

932 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

10 Experts available now in Live!

Get 1:1 Help Now