What changed?
A web page that worked for over a year suddenly started overlapping an image on top of a table presented under it. The table used to render lower, completely below the image. I didn't change the code.
The image is the lower of two .gif images, and the table is immediately under it. I attached the image. Here is the code below (abbreviated - I removed the last 66 rows of the last table):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>YELLOW TRAP LOCATIONS</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.bmag {background-color: #ff88ff;}
.bhel {background-color: #ff88e5;}
.bcer {background-color: #ff88cc;}
.bcar {background-color: #ff88aa;}
.brdd {background-color: #ff8888;}
.bver {background-color: #ffaa88;}
.born {background-color: #ffcc88;}
.bamb {background-color: #ffe088;}
.byel {background-color: #ffff88;}
.bcha {background-color: #e0ff88;}
.blef {background-color: #ccff88;}
.blim {background-color: #aaff88;}
.bgrn {background-color: #88ff88;}
.bkel {background-color: #88ffaa;}
.baqu {background-color: #88ffcc;}
.btur {background-color: #88ffe0;}
.bcyn {background-color: #88ffff;}
.bsky {background-color: #88e0ff;}
.bazu {background-color: #88ccff;}
.bste {background-color: #88aaff;}
.bblu {background-color: #8888ff;}
.bind {background-color: #aa88ff;}
.bvio {background-color: #cc88ff;}
.bpur {background-color: #e088ff;}
.blil {background-color: #e0ccff;}
.blav {background-color: #eeccff;}
.bfuc {background-color: #ffccff;}
.bsst {background-color: #ffddff;}
.bclo {background-color: #ffeeff;}
.bros {background-color: #ffccee;}
.bpnk {background-color: #ffdddd;}
.bsho {background-color: #eeffcc;}
.bblk {background-color: #000000;}
.bwht {background-color: #ffffff;}
.bblg {background-color: #f0f0f0;}
.bbgr {background-color: #dddddd;}
.blgr {background-color: #cccccc;}
.bhgr {background-color: #aaaaaa;}
.bgry {background-color: #888888;}
.bbrn {background-color: #aa8800;}
.btan {background-color: #eeddbb;}
.bvil {background-color: #eeddff;}
.bpea {background-color: #ddffdd;}
.breg {background-color: #ddffff;}
.bbgf {background-color: #44ff00;}
.bbgg {background-color: #ffffff;}
.bx {background-color: #c0c0c0;}
.cenx {text-align: center;}
.bigr {font-size: 36pt;}
.wfl {width: 100%;}
.w45 {width: 45%;}
.w40 {width: 40%;}
.w35 {width: 35%;}
img {padding: 6pt;}
body {background-color: #ffddaa; padding: 5%;}
table {border: solid thin #000000; background-color: #ffffff;}
th {border: solid thin #000000; padding: 0 6pt 0 6pt;}
td {border: solid thin #000000; padding: 0 6pt 0 6pt; background-color: #eeffee;}
</style>
</head>
<body>
<h1 class="cenx bigr">YELLOW-TRAP LOCATIONS</h1>
<h1 class="cenx">In the Bloomington Indiana area</h1><hr />
<p><img src="sect5.gif" alt="5-section signal head" style="float: right;" />
The dangerous condition known as <a href="lagtrap.htm">yellow-trap</a> (or lag-trap) is manifesting itself at several
intersections in the Bloomington Indiana area. This has caused many traffic accidents.</p>
<p>A simple explanation of <a href="lagtrpqz.htm">yellow-trap</a> can be found here.</p>
<table cellspacing="1"><tr><th>Table Key:</th><th><br /></th></tr>
<tr>
<td class="byel">Analysis</td>
<td class="byel">The signal can yellow-trap. No dangerous sightings have been made yet.</td>
</tr>
<tr>
<td class="born">Sighting</td>
<td class="born">Page author sighted yellow-trap events that endangered vehicles</td>
</tr>
<tr>
<td class="brdd">Accident</td>
<td class="brdd">Confirmed accident(s) caused by yellow-trap</td>
</tr>
</table>
<p>Note that some other intersections can yellow-trap due to emergency vehicle pre-emption, whether or not they
have left turn signals. They are not listed here, because it would be very hard to find out which ones.</p>
<hr />
<h2 class="cenx">Bloomington Area Signals with Yellow-Trap</h2>
<p><img src="yeltrpsgn.gif" alt="yellow trap sign" style="float: right;" /></p>
<p>The Bloomington area has many signals where this problem occurs.</p>
<p><strong>THESE INTERSECTIONS ARE (as of 2008) OUT OF COMPLIANCE WITH THE USDOT 2003 MUTCD, Section 4D.05.</strong></p>
<p>If a signal can cause a yellow-trap sequence, this regulation requires that one of the following be done,
with a 2008 compliance date: The yellow-trap condition must be removed or prevented by modifying the signal sequence, or
Dallas Phasing must be used, or the sign at right must be posted near the left turn signal.</p>
<table class="wfl" cellspacing="1">
<tr><th class="w40">Location</th><th>Prob</th>
<th>Jurisdiction</th><th>Experience</th><th class="w35">Directions affected</th>
</tr>
<tr><td>Third St (Ind 46) at Smith Rd</td><td class="brdd">HIGH</td>
<td class="blef">State</td><td class="brdd">Accident</td><td>eastbound; westbound</td>
</tr>
<tr><td>Walnut St at South Dr</td><td class="brdd">HIGH</td>
<td class="bvio">Bloomington</td><td class="born">Sighting</td><td>northbound; southbound</td>
</tr>
<tr><td>Second St at Oakdale Dr / Basswood Dr</td><td class="brdd">HIGH</td>
<td class="blef">State</td><td class="byel">Analysis</td><td>eastbound; westbound</td>
</tr>
<tr><td>Ind 46 bypass at Tenth St (Ind 45)</td><td class="brdd">HIGH</td>
<td class="blef">State</td><td class="brdd">Accident</td><td>northbound; southbound</td>
</tr>
<tr><td>Second St (Ind 45) at Ind 37 southbound ramp</td><td class="brdd">HIGH</td>
<td class="blef">State</td><td class="brdd">Accident</td><td>eastbound; westbound</td>
</tr>
</table>
</body>
</html>
