Phil23 wrote: ↑Thu 01 Aug 2019 10:00 pm
Think it's fixed now...
Thought it was.....
Until I checked it from my phone yesterday.
Since I eliminated the gap under the forecast at the top, I seem to have broken the way the window width resizes.
I have got
http://weather.inverellit.com/gauges.htm as well as
http://weather.inverellit.com/gauges-ss.htm, with my gauges being an edit to get the Nav menu at the top.
The original works fine while mine stuffs up on resize
(and only since I
"Fixed" that gap that was taunting the OCD
)
Assuming I've still got a div closing off wrong, but can't seem to spot it.
(
If I still had a dot matrix I'd have strip of paper stretched out on the floor).
I can see that on the original one the borders collapse before the content while on mine the whole lot scales together.
Anyone see where I've gone wrong? (Again).
Gauges1.JPG
Gauges2.JPG
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="keywords" content="<#location> weather data, weather, data, weather station, steelseries">
<title><#location> Weather</title>
<link rel="stylesheet" href="weatherstyle.css">
<link rel="stylesheet" href="lib/steelseries/css/gauges-ss.css">
</head>
<body>
<!-- <div class="content"> -->
<div id="content">
<h1><#location> Weather</h1>
<h2 style="text-align: left; text-transform: none;"> <span id='lang_latitude'>Latitude</span> <#latitude> <span id="lang_longtitude">Longitude</span> <#longitude> <span id="lang_elevation">Elevation</span> <#altitude></h2>
<!-- Start of navigation menus at the top -->
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
<tr>
<td colspan="4" class="td_navigation_bar">:<a href="index.htm">now</a>: :<a href="today.htm">today</a>: :<a href="yesterday.htm">yesterday</a>: :<a href="datasummary.php">daily data</a>: :<a href="thismonth.htm">this month</a>: :<a href="thisyear.htm">this year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly records</a>:<br>:<a href="gauges.htm">gauges</a>: :<a href="graphs.htm">graphs</a>: :<a href="wz.htm">weatherzone</a>: :<a href="https://cumulus.hosiene.co.uk/" target="_blank">forum</a>: :<a href="https://weather.inverellit.com/pws/" target="_blank">dashboard</a>: <#webcam></td>
</tr>
</table>
<!-- End of navigation menus at the top -->
<p>
<noscript>
<h2 style="color:red; text-align:center">>>This pages requires JavaScript enabling in your browser.<<<br>>>Please enable scripting it to enjoy this site at its best.<<</h2>
</noscript>
<!-- </div> Removed to fix gap-->
<div class="row">
<canvas id="canvas_led" width="25" height="25"></canvas>
<canvas id="canvas_status" width="550" height="25"></canvas>
<canvas id="canvas_timer" width="70" height="25"></canvas>
</div>
<div class="row">
<div class="gauge">
<div id="tip_0">
<canvas id="canvas_temp" width="221" height="221"></canvas>
</div>
<input id="rad_temp1" type="radio" name="rad_temp" value="out" checked onclick="gauges.doTemp(this);"><label id="lab_temp1" for="rad_temp1">Outside</label>
<input id="rad_temp2" type="radio" name="rad_temp" value="in" onclick="gauges.doTemp(this);"><label id="lab_temp2" for="rad_temp2">Inside</label>
</div>
<div class="gauge">
<div id="tip_1">
<canvas id="canvas_dew" width="221" height="221"></canvas>
</div>
<input id="rad_dew1" type="radio" name="rad_dew" value="dew" onclick="gauges.doDew(this);"><label id="lab_dew1" for="rad_dew1">Dew Point</label>
<input id="rad_dew2" type="radio" name="rad_dew" value="app" checked onclick="gauges.doDew(this);"><label id="lab_dew2" for="rad_dew2">Apparent</label>
<br>
<input id="rad_dew3" type="radio" name="rad_dew" value="wnd" onclick="gauges.doDew(this);"><label id="lab_dew3" for="rad_dew3">Wind Chill</label>
<input id="rad_dew4" type="radio" name="rad_dew" value="hea" onclick="gauges.doDew(this);"><label id="lab_dew4" for="rad_dew4">Heat Index</label>
<br>
<input id="rad_dew5" type="radio" name="rad_dew" value="hum" onclick="gauges.doDew(this);"><label id="lab_dew5" for="rad_dew5">Humidex</label>
</div>
<div class="gauge">
<div id="tip_4">
<canvas id="canvas_hum" width="221" height="221"></canvas>
</div>
<input id="rad_hum1" type="radio" name="rad_hum" value="out" checked onclick="gauges.doHum(this);"><label id="lab_hum1" for="rad_hum1">Outside</label>
<input id="rad_hum2" type="radio" name="rad_hum" value="in" onclick="gauges.doHum(this);"><label id="lab_hum2" for="rad_hum2">Inside</label>
</div>
</div>
<div class="row">
<div id="tip_6" class="gauge">
<canvas id="canvas_wind" width="221" height="221"></canvas>
</div>
<div id="tip_7" class="gauge">
<canvas id="canvas_dir" width="221" height="221"></canvas>
</div>
<div id="tip_10" class="gauge">
<canvas id="canvas_rose" width="221" height="221"></canvas>
</div>
</div>
<div class="row">
<div id="tip_5" class="gauge">
<canvas id="canvas_baro" width="221" height="221"></canvas>
</div>
<div id="tip_2" class="gauge">
<canvas id="canvas_rain" width="221" height="221"></canvas>
</div>
<div id="tip_3" class="gauge">
<canvas id="canvas_rrate" width="221" height="221"></canvas>
</div>
</div>
<div class="row">
<div id="tip_9" class="gauge">
<canvas id="canvas_solar" width="221" height="221"></canvas>
</div>
<div id="tip_8" class="gauge">
<canvas id="canvas_uv" width="221" height="221"></canvas>
</div>
<div id="tip_11" class="gauge">
<canvas id="canvas_cloud" class="gaugeSizeStd"></canvas>
</div>
</div>
<div class="content">
<div class="unitsTable">
<div style="display:table-row">
<div id="temperature" class="cellRight">
<span id="lang_temperature">Temperature</span>:
</div>
<div style="display:table-cell">
<input id="rad_unitsTemp1" type="radio" name="rad_unitsTemp" value="C" checked onclick="gauges.setUnits(this);"><label id="lab_unitsTemp1" for="rad_unitsTemp1">°C</label>
</div>
<div style="display:table-cell">
<input id="rad_unitsTemp2" type="radio" name="rad_unitsTemp" value="F" onclick="gauges.setUnits(this);"><label id="lab_unitsTemp2" for="rad_unitsTemp2">°F</label>
</div>
</div>
<div style="display:table-row">
<div id ="rainfall" class="cellRight">
<span id="lang_rainfall">Rainfall</span>:
</div>
<div style="display:table-cell">
<input id="rad_unitsRain1" type="radio" name="rad_unitsRain" value="mm" checked onclick="gauges.setUnits(this);"><label id="lab_unitsRain1" for="rad_unitsRain1">mm</label>
</div>
<div style="display:table-cell">
<input id="rad_unitsRain2" type="radio" name="rad_unitsRain" value="in" onclick="gauges.setUnits(this);"><label id="lab_unitsRain2" for="rad_unitsRain2">Inch</label>
</div>
</div>
<div style="display:table-row">
<div id="pressure" class="cellRight">
<span id="lang_pressure">Pressure</span>:
</div>
<div style="display:table-cell">
<input id="rad_unitsPress1" type="radio" name="rad_unitsPress" value="hPa" checked onclick="gauges.setUnits(this);"><label id="lab_unitsPress1" for="rad_unitsPress1">hPa</label>
</div>
<div style="display:table-cell">
<input id="rad_unitsPress2" type="radio" name="rad_unitsPress" value="inHg" onclick="gauges.setUnits(this);"><label id="lab_unitsPress2" for="rad_unitsPress2">inHg</label>
</div>
<div style="display:table-cell">
<input id="rad_unitsPress3" type="radio" name="rad_unitsPress" value="mb" onclick="gauges.setUnits(this);"><label id="lab_unitsPress3" for="rad_unitsPress3">mb</label>
</div>
<div style="display:table-cell">
<input id="rad_unitsPress4" type="radio" name="rad_unitsPress" value="kPa" onclick="gauges.setUnits(this);"><label id="lab_unitsPress4" for="rad_unitsPress4">kPa</label>
</div>
</div>
<div style="display:table-row">
<div id="wind" class="cellRight">
<span id="lang_windSpeed">Wind Speed</span>:
</div>
<div style="display:table-cell">
<input id="rad_unitsWind4" type="radio" name="rad_unitsWind" value="km/h" checked onclick="gauges.setUnits(this);"><label id="lab_unitsWind4" for="rad_unitsWind4">km/h</label>
</div>
<div style="display:table-cell">
<input id="rad_unitsWind3" type="radio" name="rad_unitsWind" value="m/s" onclick="gauges.setUnits(this);"><label id="lab_unitsWind3" for="rad_unitsWind3">m/s</label>
</div>
<div style="display:table-cell">
<input id="rad_unitsWind1" type="radio" name="rad_unitsWind" value="mph" onclick="gauges.setUnits(this);"><label id="lab_unitsWind1" for="rad_unitsWind1">mph</label>
</div>
<div style="display:table-cell">
<input id="rad_unitsWind2" type="radio" name="rad_unitsWind" value="kts" onclick="gauges.setUnits(this);"><label id="lab_unitsWind2" for="rad_unitsWind2">knots</label>
</div>
</div>
<div style="display:table-row">
<div id ="cloud" class="cellRight">
<span id="lang_cloudbase">CloudBase</span>:
</div>
<div style="display:table-cell">
<input id="rad_unitsCloudBase1" type="radio" name="rad_unitsCloud" value="m" checked onclick="gauges.setUnits(this);"><label id="lab_unitsCloudBase1" for="rad_unitsCloudBase1">m</label>
</div>
<div style="display:table-cell">
<input id="rad_unitsCloudBase2" type="radio" name="rad_unitsCloud" value="ft" onclick="gauges.setUnits(this);"><label id="lab_unitsCloudBase2" for="rad_unitsCloudBase2">ft</label>
</div>
</div>
</div>
</div> <!-- Added for gap fix -->
<div class="credits" style="padding: 0px 10px 10px 10px; text-align: left">
<hr>
Scripts by Mark Crossley - version <span id="scriptVer"></span><br>
Gauges drawn using Gerrit Grunwald's <a href="http://harmoniccode.blogspot.com" target="_blank">SteelSeries</a> <a href="https://github.com/HanSolo/SteelSeries-Canvas">JavaScript library</a>
<span id="rgraph_attrib"><br>Wind Rose drawn using RGraph</span>
</div>
<!-- Start of navigation menus at the bottom -->
<table style="width:100%;border-collapse: collapse; border-spacing: 0;" >
<tr>
<td colspan="4" class="td_navigation_bar">:<a href="index.htm">now</a>: :<a href="today.htm">today</a>: :<a href="yesterday.htm">yesterday</a>: :<a href="datasummary.php">daily data</a>: :<a href="thismonth.htm">this month</a>: :<a href="thisyear.htm">this year</a>: :<a href="record.htm">records</a>: :<a href="monthlyrecord.htm">monthly records</a>:<br>:<a href="gauges.htm">gauges</a>: :<a href="graphs.htm">graphs</a>: :<a href="wz.htm">weatherzone</a>: :<a href="https://cumulus.hosiene.co.uk/" target="_blank">forum</a>: :<a href="https://weather.inverellit.com/pws/" target="_blank">dashboard</a>: <#webcam></td>
</tr>
</table>
<!-- End of navigation menus at the bottom -->
<!-- </div>Added to Fix gap at top -->
<!-- Credits -->
<p class="credits">
Page updated <#update>
<br>
powered by <span id="programName"></span> v<span id="programVersion"></span> (b<span id="programBuild"></span>)
<br>
Transmitter Battery <#txbattery channel=1>
<br>
<a href="http://cumulussites.net/" target="_blank"><img src="http://cumulussites.net/button.php?u=Phil23" alt="Cumulus Top Weather Sites" border="0" width="162" height="55"></a>
</p><!-- Credits -->
</div><!-- id content -->
<!-- Included Scripts -->
<!-- Google CDN hosted JQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- or... -->
<!-- Local JQuery library, do not use if your containing page already pulls in a copy of JQuery -->
<!-- <script src="scripts/jquery-1.8.2.min.js"></script> -->
<!-- Combined steelseries.js & tween.js -->
<script src="lib/steelseries/scripts/steelseries_tween.min.js"></script>
<!-- Once you have customised this scripts to your requirements you should minimise
and concatenate them into a single file in the same order as below -->
<script src="lib/steelseries/scripts/language.min.js"></script>
<script src="lib/steelseries/scripts/gauges.js"></script>
<!--Optional Wind Rose scripts -->
<script src="lib/steelseries/scripts/RGraph.common.core.min.js"></script>
<script src="lib/steelseries/scripts/RGraph.rose.min.js"></script>
</body>
</html>
You do not have the required permissions to view the files attached to this post.