mail us  |  mail this page

contact us
training  | 
tech stuff  | 

Oh Really! Page

Very long in the tooth. Last updated around end of the twelth century. Lots of Netscape 4.x stuff (one feels nauseous just thinking about it). Mostly historic interest.

We started this page as way of trying to document all those little things that can cost hours of time (actually the first cost a couple of weeks elapsed).

Contents

  1. XHTML, GECKO and CSS Positioning
  2. Comments in CSS, Javascript and HTML
  3. Netscape 4.x and Color
  4. W3C DOM dynamic results
  5. W3C DOM Recursion
  6. W3C DOM IDs
  7. Abutting Images with no spaces
  8. Nesting forms and Tables
  9. Center a page with CSS
  10. width=100% or width:100% with a <div>
  11. Conditionally generating text with CSS
  12. Regular CSS borders
  13. Production CSS popout menus
  14. MSIE 5/6 CSS popout menus
  15. No margins on page with CSS
  16. Align text left and right with CSS
  17. Printer friendly pages with CSS
  18. That Pesky MSIE Image Tool Bar
  19. Trivial Graphic Rollover
  20. CSS - Paras - Divs & Spacing & Cascades
  21. CSS - Notes on float and clear
  22. CSS - Trivial Image zoom
  23. CSS - Show/Hide text
  24. Embedding SWF and YouTube movies
  25. CSS Stuff

XHTML, GECKO and CSS Positioning

With a DOCTYPE declaration of 'HTML 4.01 Transitional' CSS positioning was working perfectly e.g.:

object.style.left = 7;

This line placed the object exactly where we wanted it. We changed the DOCTYPE to 'XHTML 1.0 Transitional'. Wouldn't work with Gecko. We checked the DTD references (now that's real fun). Perfect. Searched the web - nothing. Turns out that Gecko gets picky with XHTML and needs:

object.style.left = 7+"px";

Works perfectly with MSIE and Gecko.

Comments in CSS, Javascript and HTML

Comments are different in CSS, Javascript and HTML. Mix them at your peril. We had problems with this especially in CSS definitions that got lost by Gecko while it was looking for a correct terminator. The W3C CSS validation service pointed out the error of our ways - but not the solution. Took us hours to find the CSS comment format definition - maybe we should buy a book!

CSS Comments - C style

/* a CSS comment using C style */

HTML Comments

<!-- an HTML comment that will kill CSS -->

Javascript Comments - C++ style or C style

// a Javascript comment using C++ style
/* a Javascript comment using C style */

Don't mix 'em up cos you are gonna have problems.

Netscape 4.x and color ADDs

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.

W3C DOM Dynamic Results

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]);
}

W3C DOM Recursion

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]);
    }
  } 
}

W3C DOM Mozilla IDs

"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);
   }
  }
 } 
}

Abutting images with no spaces

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>

Nesting Forms and Tables

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:

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>

That Pesky MSIE Image Toolbar

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.

Trivial Graphic Rollover

We try not to use graphic rollovers whenever possible. Well, thats not exactly true we actually try not to use javascipt whenever possible for any rollover effect - preferring CSS based text effects instead. However we had no choice recently and we forgot our trivial rollover and had to look through some dusty files to find it again. OK so there a gzillion of them out there but this is the one we use - nice and self contained - to heck with those script tags.

<a href="" onmouseover="document.thingy.src='on.gif';" 
onmouseout="document.thingy.src='off.gif';">
<img name="thingy" src="off.gif"  border="0" alt=""></a>

Notes:

  1. Does not work with an id attribute in the <img> tag- must be a name.

Embedding SWF and YouTube movies

We have used OpenOffice for years but for some strange reason just discovered it could output in SWF format (as well as PPT and PDF). So we clicked the export function, selected swf and we had a file. Now what.

The normal output from a flash movie maker gives you all kinds of stuff that you can paste into your HTML document. We knew the name of the swf file. Period. Not its size, classid or any of that other stuff. Turns out that a trivial subset of HTML markup works perfectly adequately and that details like size are important for layout but not for the flash player which by default scales the movie to fit the desired space while preserving the aspect ratio.

So the only problem left is whether to use just OBJECT tags or do what most most folks do and use both. All modern browsers support the OBJECT tag (and it validates) however if you are committed to support every browser known to mankind since the beginning of time you need to adopt a dual strategy - both are shown below.

Notes: We failed to get CSS to apply consistent styling to either EMBED or OBJECT tags for alignment, height and width so fell back to using a crude <div align="center"> to place the displays and added the width/height attributes in the OBJECT tag. This Adobe Tech Note defines the OBJECT and EMBED tag attributes for use with swf and this one defines the classid values if you need to use them.

OBJECT Tag Only

The OBJECT tag is a standard HTML tag but our target browsers (MSIE6+, Gecko and Opera 9) have different implementations. The following HTML code snippet seems to be the minimal that will play our test file as well as some others we tested (check your browser's support).

<div align="center">
<object data="test.swf" height="500" width="500"
 type="application/x-shockwave-flash">
<param name="movie" value="test.swf">
</object>
</div>

Notes:

  1. The movie is centered based on the div tag and the OBJECT tag's height and width attributes control the layout space occupied.

  2. MSIE ignores the data attribute whereas Gecko ignores the movie param so you need both.

  3. The default is to immediately start playing when the page loads - if you need to inhibit this behaviour add the following:

    <param name="play" value="false">
    

    If the above param is included the .swf file must have embedded controls to allow the user to start the movie manually.

Both OBJECT and EMBED Tags

EMBED is one of those historical non-standard tags (introduced by Netscape in 1995'ish) that continue to plague the industry but is supported by almost every browser - go figure. Experiments showed that MSIE (6+), Gecko and Opera 9 support this tag - you can even leave out the OBJECT tag and it will still work - as will (most) older browsers that followed Netscape, whereas those same older browsers may not support the OBJECT tag. This code will not validate even as serbo-croation HTML/XHTML. The following HTML code snippet displays our test file (check your browser's support).

<div align="center">
<object data="test.swf" height="500" width="500"
 type="application/x-shockwave-flash">
<param name="movie" value="test.swf">
<embed src="test.swf" type="application/x-shockwave-flash" 
 width="500" height="500">
</div>

The flash movie is centered based on the div tag and the height and width tags control the layout space occupied while by default the flash movie player plugin scales to fit the available space while preserving the aspect ratio. The EMBED is simply nested inside the OBJECT tag.

Adding YouTube Movies

YouTube videos also use the Flash media player plugin (though in FLV format not SWF). Those clever folks over at Youtube have made the process trivial. Go to the Youtube video page that you want to add. To the right of the video is a panel at the bottom of which is a line labeled Embed. Double click this line, right click on the mouse and select copy, then paste it into your page. The snippet uses the OBJECT and EMBED wheeze above. If you want it to validate then delete the EMBED code and add the both a data attribute (for Gecko) and a type attribute (for MSIE) and get rid of the </param>s as shown below:

# non-validating youtube code snippet
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/SOME-URL"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/SOME-URL"
 type="application/x-shockwave-flash" 
 wmode="transparent" width="425" height="350"></embed>
</object>

# validating code transformation
<object data="http://www.youtube.com/v/SOME-URL" width="425" 
height="350" type="application/x-shockwave-flash">
<param name="movie" value="http://www.youtube.com/v/SOME-URL">
<param name="wmode" value="transparent">
</object>

Adding Other Media Types

One day when we we need to embed other players we will do some more research. In the mean time if you are using the Windows media player you can look this MS page detailing the available params for the OBJECT tag which indicates that Firefox/Gecko uses a type of video/x-ms-wmp whereas this MS page details the normal MS mime types.



Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or info-support at zytrax. You will have a warm inner glow for the rest of the day.

Tech Stuff

RSS Feed Icon

If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as Firefox

Search

web zytrax.com

Share

Icons made by Icomoon from www.flaticon.com is licensed by CC 3.0 BY
share page via facebook tweet this page

Page

email us Send to a friend feature print this page Display full width page Decrease font size Increase font size

Resources

HTML Stuff

W3C HTML 4.01
HTML5 (WHATWG)
HTML4 vs HTML5
HTML5 Reference
W3C Page Validator
W3C DOCTYPE

CSS Stuff

W3C CSS2.1
W3C CSS2.2
Default Styles
CSS3 Selectors
CSS 3 Media Queries
CSS 3 Colors

DOM Stuff

W3C DOM
W3C DOM 3 Core
W3C 3 Events

Accessibility

usability.gov
W3C - WAI
Web Style Guide
WebAim.org

Useful Stuff

Peter-Paul Koch
A List Apart
Eric Meyer on CSS
glish.com

Our Stuff

Our DOM Pages
DOM Navigation
Liquid Layout
CSS Short Cuts
CSS overview
CSS One Page

Javascript Stuff

ECMA-262

Site

CSS Technology SPF Record Conformant Domain
Copyright © 1994 - 2017 ZyTrax, Inc.
All rights reserved. Legal and Privacy
site by zytrax
Hosted by super.net.sg
web-master at zytrax
Page modified: October 08 2015.