Correct the Centering

[krmidas]

I've been able to add the Status LED from the gauges page (the one that indicates if the site is updating properly) to my index page. To make it work, I also had to add these CSS references to my index page:

<link rel="stylesheet" href="css/gauges-ss.css">
  <link rel="stylesheet" href="css/ddimgtooltip.css">

Unfortunately, doing this has forced all the weather data on the index page to be centered (like the gauges on the gauge page). If I remove the css statements above, the formatting returns to normal (left and right justified), but I also lose the status light. I was able to insert <p align="left">, and that corrected the left margin, but I couldn't figure out how to correct the right margin.

Is there any way to override whatever formatting the css is forcing on this page, so I can go back to the nice alignment I had before? Or do I have to revise the CSS files?

I've attached reference screen grabs.

-Tom

[Mr.Meteo]

Hi Tom,

That is what we call a "side-effect"! Css is "cascading" as a layout could be altered
by all subsequent layout definition.

A thing that you could try is to change the order in which .css files are called
to have the style.css in last position. That way if your new .css file do something
wrong, it will be "corrected" by the last .css file called!

Hope this help!

Regards,
Jacques

[krmidas]

Jacques,

Unfortunately, moving the styles CSS file to the last position didn't have any effect.

I was able to fix the headings and everything in the left column by adding <P align="left">, but do you have any other suggestions how to make the right column aligned the way it used to be? I can't use <P align="right> because that only justifies the numbers, not the words.

Here's a link: http://tomkeramidas.com/cumulus/index.htm

-Tom

[Mr.Meteo]

Hi Tom,

1st thing, your template don't find this file: http://tomkeramidas.com/cumulus/images/bullets.png

Second, you have a bunch of errors (158), keep that in mind:
In XHTML, all that is open, have to be closed, then your try with align:
<P text-align="right">... need the closing 'P'...</p>
Others, like meta, or input, need only a slash, like this: <meta... />
(This page could help you: http://validator.w3.org/check)

For your alignement problem, since the problem is only in page index, a solution
could be to force alignement in that page only, but just 1 place, like this
Just before </head>, put the lines:

<style type="text/css">
td {
   text-align: left;
}
</script>

Hope this help!

Regards,
Jacques

[krmidas]

Thanks for the tips. I'll give them a try.

Not understanding the comment about ...bullets.png. Where is that file referenced?  Is it part of the Weather Blues template? Is my index page calling for it?

-Tom

[Mr.Meteo]

Hi Tom,

The error seems to be gone, but a few others appear, as these lines:

 </div></div><script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
</div></div><script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>

Supposed to be only one, like this:

  </div>
</div>
<script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>

You have probably to install something like Firefox with Firebug... you see all errors
with suggested track to solve them.

Regards,
Jacques

[krmidas]

Jacques,

Thanks for the help cleaning up <script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>.

The page seems be working fine for now. I created an alternate gauges javascript file called gauges2 which has a different download counter (60 seconds vs. 20 for my gauges page) and deactivated the auto-update feature (doesn't apply to this page).

I did this because I wanted to be able to quickly see on my index page if my station was actually online or not (green light or blinking red light), without having to rely on a webtag, which of course wouldn't work if the station was not updating, or looking at the time of the last successful page update.

http://tomkeramidas.com/cumulus/index.htm

Thanks for the help!

-Tom

[krmidas]

Anyway to have the date and "current upload status" lined up with the columns beneath them? I've attached a screen grab. Page can be seen here: http://tomkeramidas.com/cumulus/index.htm

[Mr.Meteo]

Hi Tom,

A little comment about your "scrolling forecast"... That is a HTML5 library,
so when I look at it at office (with IE8), I'm redirected  to your gauges.htm page
displaying a blinking page; switching between your header picture and a blue page
with this message:

No HTML5 Canvas support in your browser... Sorry...
Try upgrading your browser to a more recent version - nearly all browsers support Canvas now, even IE9!

Redirecting you to an 'old' gauges page...

For your alignement problem, you need a line like this:

<tr class="td_data">
     <td colspan="2" align="left">Thursday, March 7...</td>  ("Colspan" merge 2 cols)
     <td colspan="2" align="left"> Current FTP Upload Status </td>
 </tr>

Hope this help,
Jacques

[avoorpool]

Hi Jacques,

I'll 'jump' on this post as well...!!
Thanks for the hint in regards to the 'behaviour' of IE8.
Does that mean, a visitor will see the same effect when they open up the SteelSerie Gauges page??

I'm using the same display on my index page for Forecast scrolling bar, and it seems annoying when this happens, although I checked my visitors log and till Jan 1 there's been 1 IE8 user visiting........

Cheers,

Arthur

[Mr.Meteo]

Hi Arthur,

Yes gauges page is in html5 format, so old browser couldn't display it.
That is why the SteelSeries have an automatic link to a "backdoor" page
in case the visitor haven't html5 support

Regards,
Jacques

[krmidas]

Never noticed that. I've got IE9 and it displays properly. Thanks for the heads up about IE8.

I'll try out the formatting suggestions tomorrow.

Thanks!

[avoorpool]

HI Jacques,

Thanks for the update.
I think I'll have to work a bit on the 'good-old' Gauges.htm page I guess.... 

Cheers,

Arthur

[krmidas]

The alignment didn't work. Here's the html I used:

<table width="100%"  border="0" cellpadding="0" cellspacing="0" summary="Observations actuelles">
               <tr class="td_data">
     <td colspan="2" align="left"><strong><#update format=dddd','>&nbsp;<#update format=mmmm>&nbsp;<#update format=d','>&nbsp;<#update format=yyyy>&nbsp;
 <#update format=t></td><td colspan="2" align="left">Current FTP Upload Status <canvas id="canvas_led" width="25" height="25"></canvas><br></caption></strong></td>
               <tr>

I've attached a frame grab. It seems to have centered both lines in each half of the column.

-Tom

[krmidas]

Jacques,


Regarding the alignment problem I'm having, could I set up the "Date" and "Current FTP Upload Status" the same way you've set up the readings under "Temperature and Humidity", "Rainfall", etc?  Wouldn't this give me proper alignment?

Here's my page: http://tomkeramidas.com/cumulus/index.htm. Right now it looks like it's aligned, but that's only because I'm using a bunch of "&nbsp;", and depending on how many characters the date uses up, the "Current FTP Status" gets moved left or right.

-Tom