Random web bits

Centre aligning divs, paras and tables in Firefox

A recurring theme in forums on the web is the problem of elements not centring in FF even though 'style="text-align:centre"' is set (or in a CSS). Most people get round it by using the 'center' tag but this prevents the page passing strict validation.

The problem is caused by the margin being set to a value (often zero), usually in a parent container. Quite often the 'body' tag has a margin of zero in the style sheet (to avoid white space around the edge of the page).

If a 'div', 'paragraph' or 'table' has both centre alignment and a fixed left margin then the latter wins and the container is stuck at the left of the page.

To get around this the margins need to be set to 'auto'. My style sheets include the following for paragraphs, divs and tables.

p {margin-left:auto; margin-right:auto}

MP3 player code (media player or quicktime)

This is about the shortest code I have for generating a media player on a page (I use it for mp3 samples on the flsso.org.uk website). It is an 'object' only version and will pass strict validation. The browser chooses which player to use. Unfortunately I have found it doesn't work on some IE6 browsers (see my audio test page).

<object type="audio/mpeg" data="yourfile.mp3" width="200" height="40">
  <param name="src" value="yourfile.mp3">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
  alt : <a href="yourfile.mp3">yourfile.mp3</a>
</object>

Here is a javascript version which inserts a 'div' containing the player and inserts the media file name where required:

function load(media)
{  
document.write('<div id="play" name="play" height="50" width="300" style="align:center"></div>');
var player = document.getElementById('play'); 
player.innerHTML = '<object type="audio/mpeg" data="'+media+'" width="300" height="40">'
+  '<param name="src" value="'+media+'">'
+  '<param name="autoplay" value="false">'
+  '<param name="volume" value="100">'
+  '<param name="autoStart" value="0">'
+  'alt : <a href="'+media+'">'+media+'</a>'
+  '</object>';
} 

Flash

The following embeds a flash without the use of the embed command (i.e. it validates). The only drawback is in IE where the animation will not play until it is fully loaded (not a problem for most page graphics but not good for movies).

<object type="application/x-shockwave-flash" data="youranimationfile.swf" width="100" height="300">
<param name="movie" value="youranimationfile.swf" />
<param name="quality" value="high" />

Forgotten the password but saved it in the browser

SELECT all the following (it's one line of javascript) and CUT it to the clipboard. Then go to your page with the password and PASTE it into the address line, then press ENTER

javascript:(function(){var s,F,j,f,i; s = ""; F = document.forms; for(j=0; j<F.length; ++j){ f = F[j]; for (i=0; i<f.length; ++i) { if (f[i].type.toLowerCase() == "password") s += f[i].value + "\n"; } }if (s) alert("Passwords in forms on this page:\n\n" + s); else alert("There are no passwords in forms on this page.");})();