This situation is completely new to me: The page I designed appears differently on Firefox 31 in Ubuntu (correct):
compared to Windows 7 (wrong):
I was able to replicate this issue on another Windows 7 machine using FF 31. My HTML and CSS both validate with W3C, and my CSS is lint-free. There's nothing unusual about what I'm doing here. My understanding so far has been that a browser should be platform-independent. Can anyone offer an explanation for this behavior and any suggestions on how to fix it? Thank you in advance.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>FortavaScript | The Simple Pendulum</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="This program solves the equation for the total energy of a simple pendulum to illustrate conservation of mechanical energy for large oscillations.">
<meta name="keywords" content="simple, pendulum, period, oscillations, amplitude, nonlinear, gravity">
<meta name="author" content="Joel" >
<meta name="generator" content="Bluefish 2.2.5" >
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
});
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript" src="amp.js"></script>
<script type="text/javascript" src="Flot/jquery.js"></script>
<script type="text/javascript" src="Flot/jquery.flot.js"></script>
</head>
<body onload="amp()">
<div class="header2">
<h2>The Simple Pendulum</h2>
</div>
<div class="content">
<p>A common example of a mechanical system that exhibits oscillatory motion is the simple pendulum. A simple pendulum is an idealized system consisting of a bob of mass $m$ attached to the lower end of a rigid rod of length $L$ and negligible mass. The default parameters of this program generate a stable numerical solution when simulating large amplitude oscillations.</p>
</div>
<div class="header3">
<h3>Oscillations of a Pendulum</h3>
</div>
<div class="program">
This program solves the equation for the total energy of a simple pendulum to illustrate conservation of mechanical energy for large oscillations.
</div>
<div class="model">
$E = \frac{1}{2} m L^2 \omega^2 + m g L (1 - \cos \theta)$
</div>
<div class="form">
<form id="pendulum">
<table class="form">
<tr>
<td>
<label><span class="rollover">Initial angle<span>0.0 ≤ <i>θ</i> ≤ 1.6 rad</span></span>, $\theta_0$, of the mass:</label>
<input type="number" name="theta0" id="theta0" value="0.1" min="0.0" max="1.6" step="0.1"> rad
</td>
</tr>
<tr>
<td>
<label><span class="rollover">Ratio<span>1.0 ≤ <i>g</i>/<i>L</i> ≤ 10.0</span></span> of $\frac{g}{L}$:</label>
<input type="number" name="read_ratio" id="read_ratio" value="9.0" min="1.0" max="10.0" step="0.1">
</td>
</tr>
<tr>
<td>
<label><span class="rollover">Initial angular velocity<span>0.0 ≤ <i>ω</i> ≤ 6.0 rad/sec</span></span>, $\omega_0$, of the mass:</label>
<input type="number" name="omega_read" id="omega_read" value="0.0" min="0.0" max="6.0" step="0.1"> rad/sec
</td>
</tr>
<tr>
<td>
<label><span class="rollover">Time-step<span>0.001 ≤ <i>dt</i> ≤ 0.1 sec</span></span>, $dt$, of the system:</label>
<input type="number" onchange="three" name="dt_read" id="dt_read" value="0.01" min="0.001" max="0.1" step="0.001"> sec
</td>
</tr>
<tr>
<td>
Period of the pendulum: <span id="output"></span> sec
</td>
</tr>
</table>
<input type="button" value="Evaluate" onclick="amp()">
</form>
</div>
<div class="box">
<div class="container">
<div id="placeholder" class="placeholder"></div>
</div>
</div>
<div class="download">
<a class="fortran" href="amp.f08">Download the original Fortran source</a>
|
<a class="java" href="amp.java">Download the translated Java source</a>
|
<a class="js" href="amp.js">Download the JavaScript</a>
</div>
<div class="mail">
<p class="feedback">
<a class="physics" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="186870616b717b6b586b6d7c7c7d767471767336767d6c">[email protected]</a>?subject=The%20Simple%20Pendulum">Errata</a>
</p>
</div>
<div class="center"><!-- W3C -->
<p class="center">
<a class="badge" href="http://validator.w3.org/check?uri=http%3A%2F%2Fpages.suddenlink.net%2Fphysics%2Famp.htm">
<img src="HTML5_Badge_32.png" alt="Valid HTML!">
</a>
<img src="valid-css-blue.png" alt="Valid CSS!">
</p>
</div>
<div class="footer">
Copyright © 2014 Joel DeWitt
</div>
<div class="fortavascript"><a href="index.htm">FortavaScript</a></div>
</body>
</html>
CSS:
body {
background: url(background.png) repeat-x;
font: 18px/1.5em "proxima-nova", Helvetica, Arial, sans-serif;
}
a {
border: 1px solid ghostwhite;
text-decoration: none;
}
...
A preview of the page can be seen here.