This is the DOC file for the mystudents.php problem: how to do a gallery pic
layout for N students, enforcing equal pic width.

=====
ToDo:
1) Assemble all test results here, to address the problem and about CSS etc.
issues explored in extension of that.

2) Edit this file i.e. process odd notes, del. unnecessary ones.

3) Move it into more general DOC

-------------------------
PROBLEM
In my script mystudents.php, I'm having trouble getting pic.s to display at
the best width under all conditions.
This gets at a need for deeper understanding (and manipulation) of how CSS
etc. work out widths.  This DOC is about that k.

ORDINARY CASE of setting width of pics
Say nothing of width and it displays the pic at its original (pic-file
specified) size.
Or fix width, and it scales pic down to that size.
It would scale it up too, but that isn't how I've used it normally.

THIS CASE
I have not 1 but 3+ constraints I'd ideally like satisfied:
a) 	Fix cell width to be 1/N of window width; [TD width:x%]
a2.	Have pic no bigger than that width. [IMG max-width = 100%]
b)	Don't allow pic to scale up from its intrinsic size, only down.
		[done by (a2), and auto]
c)	Otherwise, have pic as big as possible [auto for IMG width]
d)	?Have all pics in same row, scaled by same amount?
	i.e. find width of all in a row, and impose min(of all widths)
e)	Have pics no bigger than an abs amount.

SOLUTIONS
Warning: it may be the width, not of IMG, but of the legend.

Setting TD width=100% gets (a) right behaviour rel. to page
Setting IMG max-width:100% gets (a2),
	and using max-width not width there gets (b).
	[e.g. style="width:auto; max-width:100%;" ]
Leaving IMG width:auto means it's as big as possible otherwise.
Enclosing IMG in DIV, with max-width: 80px sets a second ORed constraint, so
none of pics get too big.

If I want tables full width always, that's it.
If I want table narrower if pic constraints don't need full width, then?
	calc TD width using the 80px max rather than 100% as table width.
If I want (d) all pics on a row same size, then ? need java to look at widths.


UNITs
% means percent of the width of DOM-enclosing element. i.e. includes inherit.
em works in that it reacts to it; but doesn't seem right scale.
	5em seemed about 10 chars wide.

PROPERTIES (1: notes)
'auto' value: 
Setting L,R margins to 'auto' centers a box.

*If you set abs. positions to all 4 corners/sides of a box (DIV) then it
stretches the size (width,height) of the box.  It computes width (height) from
sides, if auto for width. And overflow:hidden.

*Spec width, leave height to be calc.
*set <IMG max-width:100%; max-height:100%;
	 height: auto; max-width: 550px;

width (CSS) e.g. '90%', '10em', 50 = 50px,
	auto, inherit, '',     Default is 'auto'.
		'inherit' means inherited from enclosing DOM element

width (JS): imgptr.width="300";  // sets it.  Gets it?

offsetWidth:  holds computed width in DIV and everything?

*javascript get/set values.
Often ptr.style.property='red';
But setValue()?
In .js (not javascript?) Form.Element.setValue("username","Jehiah"); 
var x=document.forms["myForm"]["phoneNmb"].value;
	// This illustrates how form objects have object fields; can be
	    accessed like assocArrays; and .value gets the val given the key
	    (property name).

PROPERTIES (2: actual property names)

background-color
	div { background-color: red;}    style="background-color: red;"
	//Maybe HTML pure only works if java field NOT a subfield of .style.
	JS: document.body.style.backgroundColor='red';

max-width	
min-width

Computed CSS properties:-
* IMG.width:  Holds computed width in Firefox, Safari.
* ptr.offsetWidth: holds computed width in DIV and everything?
* var w = getComputedStyle(DOMptr, null).getPropertyValue("width"); //This works
* ptr.currentStyle.width:

NOTES
//  Could spec. width in either % (of window width) or pixels
//  Could spec or not width of: IMG, TDcell
//  If no IMGwidth then it goes with pic's own size; and overrides cell width,
//    if pic bigger, but if less then cell width right and pic small within it.
//  Could spec in <STYLE>, or in <tag style=, or in <tag minWidth="0"
//  STYLE spec of maxwidth 100px works to stop stretching of pics., but seems to make all pics that width exactly.
//  What about em units not px? they are accepted but look wrong scale
//  CSS expressions?
//  Use java to onLoad process IMG width setting?


Sol for getting original IMG sizes to work with:
2) Simpler: use imgPtr.naturalWidth (after img loaded).
1) Re-load the image to a JS (disconnected) IMG object; wait for onload to
trigger; read off the width; delete object.
function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
	    var height = newImg.height;
	    var width = newImg.width;
	    alert ('The image size is '+width+'*'+height);
    }
    newImg.src = imgSrc; // this must be done AFTER setting onload
}


MISC
Why do my IMGs overlap if I don't spec. IMG must fit inside (width=100%) the
TD?  not interesting, just knockon from CSS.  Slight suprise that it doesn't
force either shrinking the IMGs of expanding the TDs.