Oh Really! Page

If you have multiple class definitions in a single object e.g. a table cell with Netscape 4.x and the 'background' or 'background-color' attributes are NOT the same 4.x seems to ADD the colors. Solution is to use the same class definitions in both places.

<td class="p-f-s"><a href="mailto:me@someone.com" class="p-f-s">me@someone.com</a></td>

The second class MUST be present to stop the text decoration effect.

It pretty obvious to us now - but the W3C DOM provides real-time results which confused us (small brains). This loop does NOT give the desired results because 'nodelist.length' is evaluated for each loop iteration and hence dynamically changes during execution.

// get a reference to an existing object
obj = document.getElementById("one");
// empty this object of its children
nodelist = obj.childNodes;
// now loop and remove them all
for(i = 0; i < nodelist.length; i++)
{
  this_node = nodelist[i];	// reference changes dynamically
  removed_node = obj.removeChild(this_node);
}

This loop does provide the correct results.

// get a reference to an existing object
obj = document.getElementById("one");
// empty this object of its children
nodelist = obj.childNodes;
// now loop and remove them all
c = nodelist.length;	// needed because changes dynamically
for(i = 0; i < c; i++)
{
  this_node = nodelist[0];	// reference changes dynamically
  removed_node = obj.removeChild(this_node);
}
// or you could use this simpler(?) alternate method
while(obj.hasChildNodes() == true)
{
  obj.removeChild(obj.childNodes[0]);
}

Since you don't strictly have to define variables in javascript before you use them we don't - normally. But it's bad programming discipline. And like most bad disciplines will occasionally leave you in the brown stuff. If you use variables in a recursive function YOU MUST DECLARE THEM EXPLICITLY.

// this does NOT  work correctly
function dothingy(one)
{
  nodelist = one.childNodes;
  count = nodelist.length;
  for(i = 0; i < count; i++)
  {
    if(nodelist[i].nodeType ==1)
    {
      dothingy(nodelist[i]);
    }
  }
}

This works perfectly.

// this works correctly
function dothingy(one)
{
var nodelist;	// local scope variables
var count;
nodelist = one.childNodes;
count = nodelist.length;
  for(i = 0; i < count; i++)
  {
    if(nodelist[i].nodeType ==1)
    {
      dothingy(nodelist[i]);
    }
  } 
}

"SCRIPT" and "STYLE" HTML Elements are elements and therefore according to the W3C DOM have an id attribute. If you set the id attribute on these tags in Gecko you get strange results. So don't. Actually the HTML ref says they these tags don't have an id attribute. Do we have an inheritance mismatch here between the W3C HTML spec and the W3C's DOM spec (or a Gecko bug)?

// this gives problems if used from the document root
// gives all elements a unique id
function dothingy(one)
{
  nodelist = one.childNodes;
  count = nodelist.length;
  for(i = 0; i < count; i++)
  {
    mn = nodelist[i];
    if(mn.nodeType ==1)
    {
     if(mn.id == "") mn.id = "base"+count++;	// give unique id
     dothingy(mn);
    }
  } 
}

This works perfectly.

// this works correctly and gives all valid elements a unique id
function dothingy(one)
{
 var nodelist;	// local scope variables
 var count;
 nodelist = one.childNodes;
 count = nodelist.length;
 for(i = 0; i < count; i++)
 {
  mn = nodelist[i];
  if(mn.nodeType ==1)
  {
   if(mn.nodeName != "STYLE" && mn.nodeName != "SCRIPT")
   {
    if(mn.id == "") mn.id = "base"+count++;	// give unique id
     dothingy(mn);
   }
  }
 } 
}

If you need to join images together with no spacing, say in the cells of a table, and you've racked your brain for an hour trying to figure out how to remove the thin line that most browsers (except Opera) leave between the images. Well rack no longer. The wheeze is to remove all spaces and new lines between all the HTML element definitions containing the images. We mean all. OK so it may the longest line in the world and looks as ugly as hell - but there are no spaces between the images! It really is a simple as that. Roy Whittle has written to point out that if very long lines offend your sense of the aesthetic then you can break the lines within the html tag as shown below. Oh by the way, don't forget the cellpadding and cellspacing attributes - both should be zero for a 'no-gap' table and 'cellpadding' for a 'no-gap' cell.

// this will leave a small space 
// between images in the cell
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td>
<img src="a.gif" border="0" alt="">
<img src="b.gif" border="0" alt="">
</td>
</tr>
</table>
// this will leave no space between 
// images in the cell 
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td><img src="a.gif" border="0"><img src="b.gif" border="0"></td>
</tr>
</table>
// alternate method - (from Roy Whittle) again this will leave no space between 
// images in the cell but source breaks are inside the html tags not between them
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td><img src="a.gif" 
border="0"><img src="b.gif" border="0"></td>
</tr>
</table>

Manuelle Greuff contributed this alternate CSS based suggestion. Use a 'font-size:0px;' inside the tags or in a class definition e.g.

// remove spaces in-line style definition
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td style="font-size:0px;">
<img src="a.gif" border="0" alt="">
<img src="b.gif" border="0" alt="">
</td>
</tr>
</table>
// remove spaces class definition 
// style sheet
.nospace {font-size:0px;}
// html
<table border="0" cellspacing="0" cellpadding="0" class="nospace">
<tr valign="top">
<td>
<img src="a.gif" border="0">
<img src="b.gif" border="0"></td>
</tr>
</table>

You can place the form, form end and form elements almost anywhere in a table and browsers will render it correctly. But if you don't get it just perfect the W3C validation service will reject your wonderful page. Now its not clear what 'just perfect' is 'cos the form section of the HTML 4.01 spec doesn't have anything to say on the question of positioning and nesting. However it appears the rules are:

• contain the whole form in a single table cell (between <td></td>) OR
• start the form before the table and finish it after the table AND make sure that all <input> elements are inside a cell - even hidden ones.

Who loves ya babe. The W3C's validator loves ya babe.

// form in a table cell - OK
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td>
<form name="none" method="post" action="/get/lost.php">
// form fields
</form>
</td>
</tr>
</table>
// table inside a form
<form name="none" method="post" action="/get/lost.php">
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td>
// form field e.g. input, textarea etc.
</td>
<td>
// form field e.g. input, textarea etc.
</td>
</tr>
<tr valign="top">
<td>
// form field e.g. input, textarea etc.
</td>
<td>
// form field e.g. input, textarea etc.
</td>
</tr>
</table>
</form>

You got this fantastic page, elegant and stunningly sophisticated, to finally to display just right and as you mouse over the page up pops this pesky image tool bar, courtesy of MSIE, and destroys your look. No problemo, you can disable it for the whole page using the non-standard 'meta' tag:

<meta http-equiv="imagetoolbar" content="no"> 

This toolbar can however also be useful so if you want it, either don't put the above on your page, or if you need to enable it for a single image use the non-standard <img> galleryimg="yes" ..../> attribute , conversely if you want to disable it for a single image use galleryimg="no". Its all explained at Microsoft's MSDN site for those of you that like to hang out there.