gap on a between tables on my site

CSSisthebest · 07-12-2007, 02:45 AM

This Problem Is Fixed.

hey ppls,

i know i shouldnt be using tables for layouts lol
but the problem i have is when i open my site in ie6 there appears to be a gap between 2 of rows in one of my tables, strangely this does not happen in Firefox Opera, Safari or Netscape.

here is my code i have highlighted in blue where i think the problem is suituated:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>




<style type="text/css">

#dropmenudiv{
position:absolute;
border:0px solid black;
border-bottom-width: 0;
font:normal 13px Times New Roman;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
color: #595b5a;
border-bottom: 0px solid black;
padding: 1px 0;
text-decoration: none;

}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #595b5a;
color:#FFFFFF;
}

</style>

<script type="text/javascript">

//***********************************************
//* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
//* This notice MUST stay intact for legal use
//* Visit http://www.dynamicdrive.com/ for full source code
//***********************************************//

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="maintenance.html">Maintenance</a>'
menu1[1]='<a href="datarecovery.html">Data Recovery</a>'
	
//Contents for menu 2,
var menu2=new Array()
menu2[0]='<a href="home.html">Home</a>'
menu2[1]='<a href="business.html">Business</a>'
menu2[2]='<a href="wireless.html">Wireless</a>'
		
var menu3=new Array()
menu3[0]='<a href="webdesign.html">Web Design</a>'
menu3[1]='<a href="webmaintenance.html">Web Maintenance</a>'
menu3[2]='<a href="portfoliogallery.html">Portfolio Gallery</a>'

var menuwidth='165px' //default menu width
var menubgcolor='white'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'; opacity: .95; filter: alpha(opacity=95)" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=-3
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {
	font-family: Georgia;
	font-style: italic;
	font-size: 20px;
	color: #fb7116;
}
.style3 {
	font-size: 12px;
	color: #464646;
}
.style4 {font-size: 20px; color: #fb7116; font-family: Georgia;}
.style9 {
	font-size: 16px;
	font-family: "Times New Roman", Times, serif;
}
.style10 {color: #ffffff}
.style11 {font-family: "Times New Roman", Times, serif}
.style12 {color: #ffffff; font-family: "Times New Roman", Times, serif; }
a:link {
	text-decoration: none;
	color: #FFFFFF;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
body {
	background-color: #c0c0c0;
}



a.botnav:link {
	text-decoration: none;
	color: #464646;
}
a.botnav:visited {
	text-decoration: none;
}
a.botnav:hover {
	text-decoration: none;
}
a.botnav:active {
	text-decoration: none;
}
body {
	background-color: #c0c0c0;
}



a.home:link {
	text-decoration: none;
	color: #000000;
}
a.home:visited {
	text-decoration: none;
}
a.home:hover {
	text-decoration: none;
}
a.home:active {
	text-decoration: none;
}
body {
	background-color: #c0c0c0;
}



.style15 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #464646;
	


	
}

.outsidetable1 {
border : 0px solid 
}

.outsidetable2 {
border : 2px solid #464646
}

.outsidetable3 {
border : 0px solid 
}

.outsidetable4 {
border : 0px solid 
}

.outsidetable5 {
border : 0px solid 
}

.outsidetable6 {
border : 0px solid 
}
-->
</style>
</head>

<body>
<table class="outsidetable1" width="200" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td><table class="outsidetable2" width="200" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><table class="outsidetable3" width="200" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="header.gif" width="800" height="66">
                <table class="outsidetable4" width="800" height="32" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td class="outsidetable6" width="800" height="34" background="homebuto_02.jpg"><table width="800" height="32" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                          <td width="218">&nbsp;</td>
                          <td width="48"><div align="center"><span class="style9"><a href="index.html" class="home">Home</a></span></div></td>
                          <td width="80"><div align="center" class="style10 style11"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">IT Services </a></div></td>
                          <td width="85"><div align="center" class="style12"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">Networking</a></div></td>
                          <td width="90"><div align="center" class="style12"><a href="servicearea.html">Service Area </a></div></td>
                          <td width="98"><div align="center" class="style12"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()">Web Solutions </a></div></td>
                          <td width="181"><span class="style12"><a href="rates.html">&nbsp;&nbsp;Rates</a></span></td>
                        </tr>
                    </table></td>
                  </tr>
              </table></td>
          </tr>
          <tr>
            <td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="180" align="texttop" >
                <param name="movie" value="technolanebanner.swf">
                <param name="wmode" value="transparent">
                <param name="quality" value="high">
                <embed src="technolanebanner.swf" wmode="transparent" width="800" height="180" align="texttop" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
            </object></td>
          </tr>
          <tr>
            <td><table class="outsidetable5" width="800" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="70" bgcolor="#FFFFFF">&nbsp;</td>
                  <td width="250" align="left" valign="top" bgcolor="#FFFFFF"><div align="justify"><span class="style1"><br>
                            <br>
              Technolane IT Services<br>
                      </span><span class="style4"><span class="style3"><br>
              Curabitur facilisis, libero et ultricies auctor, augue metus congue odio, eu rhoncus diam libero et magna. Donec nisi felis, dapibus vel, dignissim et, laoreet tincidunt, lectus. Nam sit amet tortor at orci congue lacinia. Donec in libero vel libero tempor ornare. Sed dapibus ante at enim. Donec fermentum, augue id accumsan mollis, est lectus vestibulum nisl, eget ullamcorper nulla justo ac dolor. </span></span><span class="style1"><br>
          </span></div></td>
                  <td width="70" bgcolor="#FFFFFF">&nbsp;</td>
                  <td width="250" align="left" valign="top" bgcolor="#FFFFFF"><div align="justify"><span class="style1"><br>
                            <br>
              Technolane Web Solutions<br>
                      </span><span class="style4"><span class="style3"><br>
              Curabitur facilisis, libero et ultricies auctor, augue metus congue odio, eu rhoncus diam libero et magna. Donec nisi felis, dapibus vel, dignissim et, laoreet tincidunt, lectus. Nam sit amet tortor at orci congue lacinia. Donec in libero vel libero tempor ornare. Sed dapibus ante at enim. Donec fermentum, augue id accumsan mollis, est lectus vestibulum nisl, eget ullamcorper nulla justo ac dolor. </span></span><span class="style1"><br>
              <br>
          </span></div></td>
                  <td width="160" bgcolor="#FFFFFF">&nbsp;</td>
                </tr>
            </table></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td valign="top"><div align="center" class="style15"><br>
        <span class="botnav"><a href="index.html" class="botnav">Home</a> |<a href="servicearea.html" class="botnav"> Service Area</a> | <a href="rates.html" class="botnav">Rates</a> | <a href="contactus.html" class="botnav">Contact Us</a> | <a href="usefullinks.html" class="botnav">Links</a> </span></div></td>
  </tr>
  <tr>
    <td valign="top">&nbsp;</td>
  </tr>
</table>
 <script language="JScript" type="text/jscript" src="http://scripts.ediy.co.nz/scripts/NoIEActivate.js"></script>
</body>
</html>

thanking you in advance

James

This Problem Is Fixed.

CSSisthebest · 07-12-2007, 02:01 PM

this is a link to a ie screenshot of my problem as you can see there is a gap between tables:

http://img411.imageshack.us/img411/3208/problemxl6.jpg