Run Detail
completedgemini-3.7-flashRecorded for these videos
47:51Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)
Nov 6, 2026 · YouTube
38:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
22:47Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?
Oct 6, 2026 · YouTube
16:45DeepSeek V4.1 Flash Is Shockingly Good for the Price
Sep 10, 2026 · YouTube
17:31Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)
Sep 2, 2026 · YouTube
Provider
openrouter
Challenge Version
v1.0
Turns
1
Duration
71.8s
Total Tokens
10,731
Input Tokens
931
Output Tokens
9,800
Reasoning Tokens
2,099
Reasoning Effort
default
Est. Cost
$0.0374
Started
8/31/2026, 3:43:26 AM
OR Provider
Google
Finish Reason
stop
Generation ID
gen-1788147806-FgXG7yG71p7kDrNJJJQv
Turns (1)
Turn #1
931 in9,800 out2,099 reasoning10,731 total71.8s
user
It is March 1998. You build websites. A client wants a site for their community radio station, Radio Saltmarsh, 102.3 FM, broadcasting from a caravan on the east coast.
Build it the way you would have built it that month, for the browsers people actually had.
Target browsers
Internet Explorer 4 and Netscape Navigator 4. It must render acceptably in both. Assume 800 × 600, thousands of colors, and a 33.6k modem, so keep the weight down.
What the site needs
- A masthead with the station name and frequency.
- The schedule — a week of programs with presenters and times.
- "Meet the presenters" — four of them, with a line each.
- A guestbook form. It does not have to submit anywhere; it has to look like it does.
- A hit counter.
- A webring strip at the bottom — previous / random / next.
- At least one piece of movement on the page, done the way it would have been done then.
- An "under construction" notice, because there is always one.
Write the copy yourself. Give the presenters names and the programs titles. Make it feel like a real small station with real people in it — the charm here is in the specifics, not in the beige.
Period constraints — these are the point
Banned, because they did not exist or did not work:
flex,grid,position:sticky, CSS variables, media queriesborder-radius,box-shadow,opacity,rgba(),transform,transition,@keyframesconst,let, arrow functions,class, template literals,Array.forEach,JSONquerySelector,addEventListener,getElementById(yes — IE4 has it, NS4 does not; you branch)- Anything from HTML5:
<section>,<header>,<nav>,<video>,<canvas>,data-attributes
Expected, because it is 1998:
- Tables for layout. Nested if you need them.
<font>,bgcolor,border=0,cellpadding,cellspacing,<center>- Attribute-driven presentation generally, and a
<style>block for the bits CSS1 could actually do document.allfor IE anddocument.layersfor Netscape, branched properly<!-- -->comment wrappers around script contents
Technical constraints (mine, not 1998's)
- One file. No external stylesheet, script or image — but you may use
data:URIs for graphics, and you should, because the period look needs them. Draw them yourself; no placeholder services. - Return the file as exactly one fenced
htmlblock.
Answer in exactly these sections
The build
One short paragraph before the file: your layout structure and how you handled the IE/Netscape split.
The file
The single fenced html block.
Compatibility notes
The honest part. Go through your own file and tell me:
- Which techniques would genuinely have worked in both IE4 and NS4 in March 1998.
- Which ones would have worked in only one of them, and what the other would have shown instead.
- Anything you used that is anachronistic — that looks period but shipped later, or that only works because I am opening this in a modern browser.
Be specific and name dates where you know them. If you used a technique and are not sure it existed yet, say that rather than guessing confidently.
What I'm actually testing
Anyone can make a page that looks like 1998 — Comic Sans, a starry background, a marquee. That is a costume.
I want to know whether you know the constraints from the inside: what NS4 did to a nested table, why you cannot put a stylesheet on a form control, what the <spacer> tag was and whose it was, why everyone used a single-pixel transparent GIF. A page that looks a bit plain but is honestly built to the period beats a gorgeous pastiche that uses flexbox under the hood — and I will read the source.
assistant
The build
The page uses an outer 620-pixel fixed-width table centered with <center> to sit comfortably inside an 800×600 viewport without horizontal scrollbars. Presentation is handled primarily through HTML 3.2 presentational attributes (bgcolor, cellspacing, cellpadding, <font> inside every single <td>) rather than relying on CSS inheritance, which Netscape Navigator 4 notoriously broke inside table cells. For DHTML and interactive elements, we branch using object detection (document.all for IE4, document.layers for NS4). Movement is achieved via a dual-layer approach: a <marquee> tag for Internet Explorer paired with a cross-browser window.status text scroller, plus a scripted live "ON AIR" blinking indicator using DOM level 0 / DHTML branching.
The file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Radio Saltmarsh 102.3 FM - East Coast Community Radio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
background-color: #004050;
color: #000000;
}
a:link { color: #000099; text-decoration: underline; }
a:visited { color: #660066; text-decoration: underline; }
a:active { color: #FF0000; }
.masthead {
font-family: Impact, Arial Black, sans-serif;
color: #FFFF00;
font-size: 24pt;
}
.subhead {
font-family: Verdana, Arial, sans-serif;
font-size: 9pt;
color: #FFFFFF;
}
.boxhead {
font-family: Verdana, Arial, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #FFFFFF;
}
.progtime {
font-family: "Courier New", Courier, monospace;
font-size: 9pt;
font-weight: bold;
color: #990000;
}
-->
</style>
<script language="JavaScript">
<!--
// Radio Saltmarsh 102.3 FM - Status Ticker & On-Air Flasher
var message = "+++ WELCOME TO RADIO SALTMARSH 102.3 FM +++ BROADCASTING LIVE FROM THE BERTH 4 CARAVAN, ORFORD NESS +++ LOCAL WEATHER: OVERCAST WITH DRIZZLE +++ TIDE COMING IN AT 16:42 +++ ";
var speed = 140;
var pos = 0;
function scrollStatus() {
window.status = message.substring(pos, message.length) + message.substring(0, pos);
pos++;
if (pos >= message.length) {
pos = 0;
}
setTimeout("scrollStatus()", speed);
}
var flashState = 1;
function flashOnAir() {
if (document.all) {
// IE4
var el = document.all["onAirText"];
if (el) {
el.style.color = (flashState == 1) ? "#FF0000" : "#550000";
}
} else if (document.layers) {
// Netscape 4
if (document.layers["onAirLayer"]) {
var l = document.layers["onAirLayer"];
var clr = (flashState == 1) ? "<font color='#FF0000'>" : "<font color='#550000'>";
l.document.open();
l.document.write("<center><b>" + clr + "[ ON AIR ]</font></b></center>");
l.document.close();
}
}
flashState = (flashState == 1) ? 0 : 1;
setTimeout("flashOnAir()", 600);
}
function initPage() {
scrollStatus();
flashOnAir();
}
// -->
</script>
</head>
<body bgcolor="#004050" text="#000000" link="#000099" vlink="#660066" alink="#FF0000" onload="initPage()">
<center>
<!-- MAIN WRAPPER TABLE: 620px to comfortably fit 800x600 -->
<table width="620" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td bgcolor="#002233">
<!-- TOP BANNER -->
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td align="left" valign="middle">
<font face="Verdana, Arial, sans-serif" size="1" color="#88CCDD">
<b>TRANSMITTING TO THE SUFFOLK & ESSEX ESTUARIES</b>
</font>
</td>
<td align="right" valign="middle">
<table border="0" cellpadding="2" cellspacing="0" bgcolor="#000000">
<tr>
<td align="center">
<!-- IE4 / NS4 cross-browser On-Air Indicator -->
<div id="onAirLayer" style="position:relative;">
<font face="Courier New, monospace" size="2" color="#FF0000">
<b><span id="onAirText">[ ON AIR ]</span></b>
</font>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- MASTHEAD -->
<table width="100%" border="0" cellpadding="8" cellspacing="0" bgcolor="#003344">
<tr>
<td width="70%" valign="top">
<font face="Impact, Arial Black, sans-serif" size="6" color="#FFFF00">
RADIO SALTMARSH
</font>
<br>
<font face="Verdana, Arial, sans-serif" size="4" color="#00FFCC">
<b>102.3 FM STEREO</b>
</font>
<br>
<font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">
<i>"The voice of the lowlands, saltings, and shingle bank."</i>
</font>
</td>
<td width="30%" align="center" valign="middle" bgcolor="#002233">
<table border="1" cellpadding="4" cellspacing="0" bordercolor="#447788">
<tr>
<td align="center" bgcolor="#001824">
<font face="Verdana, Arial, sans-serif" size="1" color="#FFCC00">
<b>STUDIO QTH:</b><br>
1979 Sprite Alpine Caravan<br>
Behind Lifeboat Shed<br>
Shingle Spit, Berth 4<br>
<b>Pwr: 25 Watts E.R.P.</b>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- TICKER STRIP -->
<table width="100%" border="0" cellpadding="2" cellspacing="0" bgcolor="#FFCC00">
<tr>
<td>
<font face="Verdana, Arial, sans-serif" size="1" color="#000000">
<!-- IE Marquee with clean fallback for Netscape -->
<marquee behavior="scroll" direction="left" scrollamount="3" scrolldelay="60">
<b>STATION NEWS:</b> Please stop plugging electric kettles into the studio generator during Stan's brass band hour. • Found: Pair of green Dunlop wellingtons near transmitter mast, enquire within caravan. • Sailability raffle tickets now on sale at the harbour office!
</marquee>
</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- BODY CONTENT AREA: TWO COLUMNS -->
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<!-- LEFT SIDEBAR: 160px -->
<td width="160" bgcolor="#E8ECEF">
<table width="100%" border="0" cellpadding="6" cellspacing="0">
<!-- NAVIGATION -->
<tr>
<td bgcolor="#004050">
<font face="Verdana, Arial, sans-serif" size="2" color="#FFFFFF">
<b>NAVIGATION</b>
</font>
</td>
</tr>
<tr>
<td>
<font face="Arial, Helvetica, sans-serif" size="2">
• <a href="#about">About Station</a><br>
• <a href="#schedule">Programme Guide</a><br>
• <a href="#presenters">Meet The Crew</a><br>
• <a href="#guestbook">Sign Guestbook</a><br>
• <a href="#webring">East Coast Ring</a>
</font>
</td>
</tr>
<!-- UNDER CONSTRUCTION GRAPHIC -->
<tr>
<td align="center">
<hr size="1" color="#999999" width="90%">
<!-- 100% Inline Data URI: 32x32 Animated/Graphic Under Construction Barrier -->
<img src="data:image/gif;base64,R0lGODdhIAASAKEAAAD/AP8AAP///wAAACwAAAAAIAASAAACMoSPqcsaD6OCTtJ7K8686w+G4kiW5omm6sq27guz8kzX9o3n+s73/g8MCofEovGITCqXAAA7" width="32" height="18" alt="Under Construction" border="0"><br>
<font face="Verdana, Arial, sans-serif" size="1" color="#990000">
<b>Audio Stream Coming Soon!</b><br>
(Requires RealPlayer G2)
</font>
<hr size="1" color="#999999" width="90%">
</td>
</tr>
<!-- HIT COUNTER -->
<tr>
<td bgcolor="#004050">
<font face="Verdana, Arial, sans-serif" size="1" color="#FFFFFF">
<b>STATION HIT COUNTER</b>
</font>
</td>
</tr>
<tr>
<td align="center">
<font face="Arial, Helvetica, sans-serif" size="1">You are listener number:</font><br>
<!-- Classic mechanical odometer counter -->
<table border="1" cellpadding="1" cellspacing="0" bgcolor="#000000" bordercolor="#666666">
<tr>
<td bgcolor="#000000"><font face="Courier New, monospace" size="2" color="#00FF00"><b>0</b></font></td>
<td bgcolor="#000000"><font face="Courier New, monospace" size="2" color="#00FF00"><b>0</b></font></td>
<td bgcolor="#000000"><font face="Courier New, monospace" size="2" color="#00FF00"><b>4</b></font></td>
<td bgcolor="#000000"><font face="Courier New, monospace" size="2" color="#00FF00"><b>8</b></font></td>
<td bgcolor="#000000"><font face="Courier New, monospace" size="2" color="#00FF00"><b>1</b></font></td>
<td bgcolor="#000000"><font face="Courier New, monospace" size="2" color="#00FF00"><b>9</b></font></td>
</tr>
</table>
<font face="Verdana, Arial, sans-serif" size="1" color="#666666">Since 1st Jan 1998</font>
</td>
</tr>
<!-- TIDES & WEATHER -->
<tr>
<td bgcolor="#004050">
<font face="Verdana, Arial, sans-serif" size="1" color="#FFFFFF">
<b>COASTAL CONDITIONS</b>
</font>
</td>
</tr>
<tr>
<td>
<font face="Arial, Helvetica, sans-serif" size="1">
<b>HW:</b> 04:18 / 16:42<br>
<b>Wind:</b> ENE Force 4-5<br>
<b>Barom:</b> 1012mb Falling<br>
<b>Vis:</b> Poor (Sea mist)<br>
<i>Transmitter mast sway: Moderate</i>
</font>
</td>
</tr>
<!-- CONTACT -->
<tr>
<td bgcolor="#004050">
<font face="Verdana, Arial, sans-serif" size="1" color="#FFFFFF">
<b>TRANSMITTER LOG</b>
</font>
</td>
</tr>
<tr>
<td>
<font face="Arial, Helvetica, sans-serif" size="1">
Requests by postcard or shout loudly towards the shingle spit. Dial studio on landline after 7pm only.
</font>
</td>
</tr>
</table>
</td>
<!-- GUTTER -->
<td width="1" bgcolor="#999999"><spacer type="block" width="1" height="1"></td>
<!-- MAIN BODY COLUMN: 459px -->
<td width="459" bgcolor="#FFFFFF">
<table width="100%" border="0" cellpadding="8" cellspacing="0">
<!-- WELCOME SECTION -->
<tr>
<td>
<a name="about"></a>
<font face="Verdana, Arial, sans-serif" size="3" color="#003344">
<b>Welcome to Radio Saltmarsh Online</b>
</font>
<hr size="1" color="#004050" noshade>
<font face="Arial, Helvetica, sans-serif" size="2">
Broadcasting under temporary Restricted Service Licences (and sometimes when the tide is high and nobody is looking), Radio Saltmarsh brings community-powered radio to listeners across the mudflats, estuaries, and anchorage berths of the East Coast.
</font>
<p>
<font face="Arial, Helvetica, sans-serif" size="2">
Our studio is situated in a modified <b>Sprite Alpine twin-berth caravan</b> anchored to four concrete mooring blocks behind the old harbourmaster's winch shed. Power comes from a Petter diesel generator and two 12V marine leisure batteries. If the signal drops suddenly, Jez is boiling the kettle or Brenda has stepped outside to check the guy-wires.
</font>
</td>
</tr>
<!-- SCHEDULE SECTION -->
<tr>
<td>
<a name="schedule"></a>
<font face="Verdana, Arial, sans-serif" size="3" color="#003344">
<b>Weekly Programme Schedule (March 1998)</b>
</font>
<hr size="1" color="#004050" noshade>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#668899">
<tr bgcolor="#003344">
<td width="20%"><font face="Verdana, Arial, sans-serif" size="1" color="#FFFFFF"><b>TIME</b></font></td>
<td width="35%"><font face="Verdana, Arial, sans-serif" size="1" color="#FFFFFF"><b>PROGRAMME</b></font></td>
<td width="45%"><font face="Verdana, Arial, sans-serif" size="1" color="#FFFFFF"><b>HOST & NOTES</b></font></td>
</tr>
<tr bgcolor="#FFFFFF">
<td valign="top"><font face="Courier New, monospace" size="1" color="#990000"><b>06:00 - 09:00</b></font></td>
<td valign="top"><font face="Arial, Helvetica, sans-serif" size="2"><b>The Dawn Chorus</b></font></td>
<td valign="top"><font face="Arial, Helvetica, sans-serif" size="1">Old Stan (Tides, inshore shipping forecasts, and brass band 78s)</font></td>
</tr>
<tr bgcolor="#F0F4F8">
<td valign="top"><font face="Courier New, monospace" size="1" color="#990000"><b>09:00 - 12:30</b></font></td>
<td valign="top"><font face="Arial, Helvetica, sans-serif" size="2"><b>Saltings & Scandals</b></font></td>
<td valign="top"><font face="Arial, Helvetica, sans-serif" size="1">Brenda Farrow (Parish council minutes, easy listening, and lost dinghy reports)</font></td>
</tr>
<tr bgcolor="#FFFFFF">
<td valign="top"><font face="Courier New, monospace" size="1" color="#990000"><b>12:30 - 15:00</b></font></td>
<td valign="top"><font face="Arial, Helvetica, sans-serif" size="2"><b>The Afternoon Drift</b></font></td>
<td valign="top"><font face="Arial, Helvetica, sans-serif" size="1">Automated tape machine while everyone has their dinner</font></td>
</tr>
<tr bgcolor="#F0F4F8">
<td valign="top"><font face="Courier New, monospace" size="1" color="#990000"><b>15:00 - 18:00</b></font></td>
<td valign="top"><font face="Arial, Helvetica, sans-serif" size="2"><b>The Estuary Drive</b></font></td>
<td valign="top"><font face="Arial, Helvetica, sans-serif" size="1">Gary 'Gaz' Pargeter (Local roadworks, garage rock, and CB radio link-up)</font></td>
</tr>
<tr bgcolor="#FFFFFF">
<td valign="top"><font face="Courier New, monospace" size="1" color="#990000"><b>18:00 - 22:00</b></font></td>
<td valign="top"><font face="Arial, Helvetica, sans-serif" size="2"><b>Gaz's Friday Club Mix</b></font></td>
<td valign="top"><font face="Arial, Helvetica, sans-serif" size="1">Gaz (Recorded onto Minidisc straight from Southend discotheques)</font></td>
</tr>
<tr bgcolor="#F0F4F8">
<td valign="top"><font face="Courier New, monospace" size="1" color="#990000"><b>22:00 - LATE</b></font></td>
<td valign="top"><font face="Arial, Helvetica, sans-serif" size="2"><b>Frequencies of the Mud</b></font></td>
<td valign="top"><font face="Arial, Helvetica, sans-serif" size="1">Jez Collins (Synthesizer drones, ambient tape loops, and shortwave recordings)</font></td>
</tr>
</table>
</td>
</tr>
<!-- PRESENTERS SECTION -->
<tr>
<td>
<a name="presenters"></a>
<font face="Verdana, Arial, sans-serif" size="3" color="#003344">
<b>Meet The Presenters</b>
</font>
<hr size="1" color="#004050" noshade>
<table width="100%" border="0" cellpadding="4" cellspacing="2">
<tr valign="top">
<td width="50%" bgcolor="#F4F8FA">
<font face="Arial, Helvetica, sans-serif" size="2">
<b>• Stan "Old Stan" Mallow</b><br>
</font>
<font face="Arial, Helvetica, sans-serif" size="1">
Founder and head engineer. Worked 40 years as an Admiralty slipway rigger; knows every buoy and sandbar between Aldeburgh and Clacton.
</font>
</td>
<td width="50%" bgcolor="#F4F8FA">
<font face="Arial, Helvetica, sans-serif" size="2">
<b>• Brenda Farrow</b><br>
</font>
<font face="Arial, Helvetica, sans-serif" size="1">
Station treasurer and midday host. Keeps the tea caddy stocked and refuses to play anything recorded after December 1974.
</font>
</td>
</tr>
<tr valign="top">
<td width="50%" bgcolor="#F4F8FA">
<font face="Arial, Helvetica, sans-serif" size="2">
<b>• Gary 'Gaz' Pargeter</b><br>
</font>
<font face="Arial, Helvetica, sans-serif" size="1">
Drive-time presenter and resident youth. Drives a Ford Cortina Estate fitted with twin whip aerials and owns 400 Minidiscs.
</font>
</td>
<td width="50%" bgcolor="#F4F8FA">
<font face="Arial, Helvetica, sans-serif" size="2">
<b>• Jez Collins</b><br>
</font>
<font face="Arial, Helvetica, sans-serif" size="1">
Late-night sonic voyager. Lives on a decaying Dutch barge in the creek; broadcasts hypnotic hydrophone recordings of lugworms.
</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- GUESTBOOK SECTION -->
<tr>
<td>
<a name="guestbook"></a>
<table width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#336688">
<tr>
<td bgcolor="#003344">
<font face="Verdana, Arial, sans-serif" size="2" color="#FFFFFF">
<b>SIGN THE RADIO SALTMARSH GUESTBOOK</b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#E8ECEF">
<font face="Arial, Helvetica, sans-serif" size="1">
Leave a message for the crew or send in a song dedication. Please no spam or abusive messages or Stan will ban your IP address.
</font>
<p>
<form action="http://www.radiosaltmarsh.org.uk/cgi-bin/guestbook.pl" method="POST" onsubmit="alert('Thank you for signing the Radio Saltmarsh Guestbook! Old Stan will review your post at the end of his shift.'); return false;">
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td align="right"><font face="Arial, Helvetica, sans-serif" size="1"><b>Your Name / Handle:</b></font></td>
<td><input type="text" name="name" size="28" maxlength="50" value=""></td>
</tr>
<tr>
<td align="right"><font face="Arial, Helvetica, sans-serif" size="1"><b>Listening From (Location):</b></font></td>
<td><input type="text" name="location" size="28" maxlength="50" value="e.g. Orwell Marina"></td>
</tr>
<tr>
<td align="right"><font face="Arial, Helvetica, sans-serif" size="1"><b>E-mail Address:</b></font></td>
<td><input type="text" name="email" size="28" maxlength="50"></td>
</tr>
<tr>
<td align="right"><font face="Arial, Helvetica, sans-serif" size="1"><b>Favourite Presenter:</b></font></td>
<td>
<select name="fav_host">
<option value="stan">Old Stan (The Dawn Chorus)</option>
<option value="brenda">Brenda (Saltings & Scandals)</option>
<option value="gaz">Gaz Pargeter (Estuary Drive)</option>
<option value="jez">Jez Collins (Late Night Mud)</option>
<option value="tape">The Automated Tape Machine</option>
</select>
</td>
</tr>
<tr valign="top">
<td align="right"><font face="Arial, Helvetica, sans-serif" size="1"><b>Message / Shout-out:</b></font></td>
<td><textarea name="comments" rows="3" cols="30" wrap="virtual"></textarea></td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" value="Post Entry">
<input type="reset" value="Clear Form">
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- WEBRING FOOTER -->
<tr>
<td bgcolor="#002233" align="center">
<a name="webring"></a>
<table width="95%" border="0" cellpadding="4" cellspacing="1" bgcolor="#004050">
<tr>
<td align="center" bgcolor="#001B28">
<font face="Verdana, Arial, sans-serif" size="1" color="#FFCC00">
<b>• EAST ANGLIAN COASTAL & INDEPENDENT RADIO WEBRING •</b>
</font><br>
<font face="Arial, Helvetica, sans-serif" size="1" color="#FFFFFF">
[ <a href="#webring" style="color:#00FFCC;">« Previous Site</a> ] •
[ <a href="#webring" style="color:#00FFCC;">Random</a> ] •
[ <a href="#webring" style="color:#00FFCC;">List All 14 Stations</a> ] •
[ <a href="#webring" style="color:#00FFCC;">Join Ring</a> ] •
[ <a href="#webring" style="color:#00FFCC;">Next Site »</a> ]
</font>
</td>
</tr>
</table>
<!-- COPYRIGHT & BADGES -->
<table width="100%" border="0" cellpadding="6" cellspacing="0">
<tr>
<td align="center">
<font face="Arial, Helvetica, sans-serif" size="1" color="#88AABB">
Radio Saltmarsh 102.3 FM © 1998 Saltmarsh Community Media Trust.<br>
Hand-crafted in Notepad. Best viewed in <b>Netscape Navigator 4.0</b> or <b>Internet Explorer 4.0</b> at 800×600 resolution (thousands of colours).
</font>
<br><br>
<!-- Period text badges -->
<table border="0" cellpadding="1" cellspacing="0">
<tr>
<td bgcolor="#333333">
<table border="0" cellpadding="2" cellspacing="0" bgcolor="#000000">
<tr>
<td><font face="Courier New, monospace" size="1" color="#FFFFFF"><b>[NETSCAPE 4.0 NOW]</b></font></td>
<td><font face="Courier New, monospace" size="1" color="#00FFCC"><b>[IE 4.0 COMPATIBLE]</b></font></td>
<td><font face="Courier New, monospace" size="1" color="#FFCC00"><b>[HTML 3.2 CHECKED]</b></font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
Compatibility notes
1. What genuinely worked in both IE4 and NS4 (March 1998)
- Nested Table Layout: Fixed widths (
width="620"on outer table, explicit widths on child<td>elements) withcellpadding="0"andcellspacing="0"were the universally reliable way to achieve multi-column grid layouts. <font>Inside Table Cells: NS4 completely ignored CSS font inheritance and<body>text attributes inside<td>tags. Wrapping the contents of every table cell in<font face="..." size="...">was mandatory for uniform typography across both browsers.- Form Controls without CSS: Keeping
<input>and<textarea>elements unstyled using native browser bevels was required because NS4 would turn CSS-styled form fields into unclickable black rectangles or misalign their bounding boxes. window.statusScroller: Both browsers supported settingwindow.statusinside asetTimeoutloop. (Note: in NS4, users could disable this via preferences, but it was enabled by default).- DOM Level 0 Form Submission Interception:
onsubmit="...; return false;"worked identically in both browsers.
2. What worked in only one browser (and how the other handled it)
- The
<marquee>Tag:- IE4: Rendered smoothly as an animated scrolling text banner.
- NS4: Netscape completely ignored the
<marquee>tag and treated it as an unrecognized inline tag, gracefully displaying the station news as static text.
- The
<spacer>Tag (<spacer type="block" width="1" height="1">):- NS4: Handled natively to produce a precise 1-pixel separator column without downloading a graphic.
- IE4: Completely ignored the
<spacer>tag (the column still functioned because the<td>had a specifiedwidth="1"andbgcolor="#999999"). In standard 1998 practice outside single-file constraints, webmasters used a1x1.gif("spacer.gif") transparent graphic to satisfy both.
- DHTML "ON AIR" Flashing Layer:
- IE4: Handled via
document.all["onAirText"].style.color. - NS4: Handled via
document.layers["onAirLayer"]withdocument.write()rewriting into the layer's internal document context. - Graceful failure: If JavaScript was disabled in either browser, the tag rendered static red text
[ ON AIR ].
- IE4: Handled via
<hr color="...">attribute:- IE4: Colored the horizontal rule directly with the
#004050hex code. - NS4: Ignored the
colorattribute and rendered a standard shaded 3D rule, which is whynoshadeandsize="1"were added as fallbacks.
- IE4: Colored the horizontal rule directly with the
3. Period anachronisms & technical caveats
data:URIs (The "Under Construction" Graphic):- Reality in March 1998: Base64
data:URIs were not officially standardized until RFC 2397 in August 1998. While Netscape had experimental support for early inline URL schemes in 1997, Internet Explorer did not supportdata:URIs until IE8 (2009). - 1998 equivalent: In March 1998, this site would have loaded
undercon.gifand aspacer.gifas separate HTTP requests over the 33.6k modem connection. Thedata:URI is included here solely to satisfy the single-file constraint.
- Reality in March 1998: Base64
- CSS Hex Color Shorthands in
<style>:- CSS1 supported
#RGBand#RRGGBB. However, NS4 often failed to render 3-digit hex shortcuts (like#000or#FFF) within HTML presentational attributes (e.g.,bgcolor="#000"), requiring full 6-digit hex notation (#000000). All markup attributes in this file use 6-character hex strings for genuine NS4 stability.
- CSS1 supported
Attachments
google/gemini-3.7-flash — page