I’m hoping this is an easy question for a CSS guru (which I’m definitely not).
I’m trying to adapt a fundraising thermometer image to work with MODx. It’s a WordPress plugin that does everything in CSS. It’s simple and, unlike most thermometers, it has blue ink which the person I’m doing the site for is determined to have.
I’ve got it working perfectly in FF, but in IE7, the mercury in the thermometer is shifted up about 10% of the way to the top. It reads 10% higher than it should, and there’s a gap between the bulb and the mercury. I’ve tried everything I can think of but nothing has worked.
I’ve boiled it down to a minimal form to get it working.
Snippet:
<?php
$src = 'http://localhost/bobsguides/assets/snippets/thermox/style.css';
$modx->regClientCSS($src);
function roundnum ($num, $nearest)
{
$ret = 0;
$mod = $num % $nearest;
if ($mod >= 0)
$ret = ( $mod > ( $nearest / 2)) ? $num + ( $nearest - $mod) : $num - $mod;
else
$ret = ( $mod > (-$nearest / 2)) ? $num - $mod : $num + ( -$nearest - $mod);
return $ret;
}
echo "<div class='ourprogress'>\n";
echo "<div class='ourprogressgraphics'>\n";
$current = 3000;
$max = 10000;
$percent = round(($current/$max)*100);
$percent = str_pad(roundnum($percent, 10), 2, "0", STR_PAD_LEFT);
echo "<div class='ourprogressmercury percent30'>\n";
echo "<div class='ourprogressmercurytop'></div>\n";
echo "</div>\n";
echo "</div>\n";
echo "<div class='ourprogressnumbers'>\n";
for ( $counter = $max; $counter >= 0; $counter=$counter-($max/10)) {
echo "<div class='progressvalue'>".$counter."</div>\n";
}
echo "</div>\n";
echo "</div>\n";
?>
CSS:
.ourprogress {
width: 200px;
height: 500px;
background-image: url(progress.jpg);
}
.ourprogressgraphics {
width: 13px;
padding: 48px 0px 0px 42px;
float: left;
}
.ourprogressmercury {
background-image: url(mercury.jpg);
background-repeat: repeat-y;
}
.ourprogressmercurytop {
background-image: url(mercury-top.jpg);
width: 13px;
height: 7px;
}
.ourprogressnumbers {
float: right;
margin: 25px 10px 0px 0px;
font-size: 10px;
color: #123456;
text-align: right;
width: 100px;
}
.progressvalue {
border-top: solid 1px #cccccc;
margin: 25px 0px 0px 0px;
}
.percent00 {margin-top: 395px; height: 0px;}
.percent10 {margin-top: 360px; height: 40px;}
.percent20 {margin-top: 320px; height: 80px;}
.percent30 {margin-top: 280px; height: 120px;}
.percent40 {margin-top: 240px; height: 160px;}
.percent50 {margin-top: 200px; height: 200px;}
.percent60 {margin-top: 160px; height: 240px;}
.percent70 {margin-top: 120px; height: 280px;}
.percent80 {margin-top: 80px; height: 320px;}
.percent90 {margin-top: 40px; height: 360px;}
.percent100 {margin-top: 0px; height: 400px;}
I’ve attached the images (and the CSS and PHP files slightly modified for my local install) in the zip file. I’d like to get this working. I think it might be a useful snippet and all the other thermometer examples I’ve looked at would be much more work to snippetize.
MODX Staff
☆ A M B ☆
