Solved

Why is there space in between this text and the search box?

Posted on 2008-11-01
5
169 Views
Last Modified: 2010-04-25
I'm trying to get the text "search flagfootball" and the search box to be about 10 px vertically from each other
on this page:

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

In firefox/minefield the border around the image scroller disappears, and in internet explorer the bordedr is there but the spacing is messed up. Can anyone tell me what is going on here? thanks.

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

<!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=utf-8" />

<title>Untitled Document</title>

<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;

}

.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;

}

a:link {

	color: #CCCCCC;

}

.picscroll {

	padding-top: 0px;

	padding-bottom: 0px;

	padding-left: 0px;

	margin-top: 10px;

	margin-bottom: 10px;

	margin-left: 6px;

	border-top-width: 6px;

	border-right-width: 4px;

	border-bottom-width: 6px;

	border-left-width: 4px;

	border-top-color: #000000;

	border-right-color: #000000;

	border-bottom-color: #000000;

	border-left-color: #000000;

	border-top-style: solid;

	border-right-style: solid;

	border-bottom-style: solid;

	border-left-style: solid;

}

.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 20px; /* 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 10px; /* 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: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */

}

.style2 {

	font-family: Arial, Helvetica, sans-serif;

	font-weight: bold;

	font-size: 10px;

	color: #FFFFFF;

}

.search {

	padding-top: 10px;

}

-->

</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%';">
 

<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 align="center" class="tophalf">

    <table width="774" height="90" border="0" id="tophalf">

      

      <tr>

        <td width="515"><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','class','picscroll','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" class="picscroll">

            <param name="movie" value="PicStrip.swf" />

            <param name="quality" value="high" /><param name="BGCOLOR" value="#000000" />

            <embed src="PicStrip.swf" width="500" height="60" 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></td>

        <td width="248" align="left" valign="top" style="padding-top:8px"><span class="style2">&nbsp;&nbsp;&nbsp;&nbsp;Search Flag Football</span>

          <div class="search">

          <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>

               </div>

         </td>

      </tr>

    </table>

  </div>

  <div id="mainContent">

    <h1> Main Content </h1>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>

    <h2>H2 level heading </h2>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

	<!-- end #mainContent --></div>

  <div id="footer">

    <p>Footer</p>

  <!-- end #footer --></div>

<!-- end #container --></div>

</body>

</html>

Open in new window

0
Comment
Question by:elliottbenzle
  • 3
5 Comments
 
LVL 28

Expert Comment

by:chilternPC
ID: 22858865
Hmm if you are going to use tables - then I would put a table at that point and then put in the "search Flag Football" and the form inside the table.
it looks the same in safari, chrome and firefox, its IE that's different.

also change thefirst line of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


why?

see:

http://brainstormsandraves.com/archives/2003/10/21/xhtml/

0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22859309
The first rule is to NOT surround a table layout by a DIV -- tables worked perfectly for over 14 years before DIVs came along.  All browsers wrap tables perfectly, you will only get problems if you use a DIV to try to limit table width and height -- if you want the DIV to POSITION the table, that is fine, but remember, browsers wrap text in tables to fit the overall width you specify like <TABLE width=780> so leave the tables unlimited by DIV widths and heights, and they will work out fine. If you need to specify a <TD height=70>, then go ahead and do that, all browsers will respect it.  As far as I can see there is nothing special in your layout, so get rid of the DIV around the table and specify the height of the TD cells you need, and it will work.
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22860015
To fix that missing border around the flash in FF, I think you need to move the style outside the flash block, i.e. instead of using the "class" "picsroll" parameters, surround the whole flash code block with  a .  I haven't found any good explanation of why this is necessary, but I've seen it before.

You should also get rid of those &nbsp; that you are using to align the text and the search box.  Just put the Search Flag Football text in the same div as the form and then adjust your style to get the alignment the way you want.


        Search Flag Football

            <form method="get" action="http://www.google.com/custom">
                <input name="q" size="16" maxlength="255" value="" type="text">
                <input name="btnG" value="Search" type="submit">

                <input name="sitesearch" value="www.glowfishtw.com" type="hidden">
            </form>
       

with style something like this:

.search {
      margin-top: 10px 0px 10px 6px;
      text-align:left;
}
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22860043
...some spooky stuff happened with my post; I guess it doesn't like code in a non-code place!  Have attached that code again in box below.

My second line above was supposed to say "surround the whole flash code block with  a... div class=picsroll
.  
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 22860046
omg.. one more time
<div class="search">

        <p class="style2">Search Flag Football</p>

            <form method="get" action="http://www.google.com/custom">

                <input name="q" size="16" maxlength="255" value="" type="text">

                <input name="btnG" value="Search" type="submit">
 

                <input name="sitesearch" value="www.glowfishtw.com" type="hidden">

            </form>

        </div>
 

with style something like this:
 

.search {

	margin-top: 10px 0px 10px 6px;

	text-align:left;

}

Open in new window

0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

762 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

20 Experts available now in Live!

Get 1:1 Help Now