CSS font properties for simple javascript "date"?

[reboulder]

Hi -

I'm in the process of adding CSS to my "home-grown" web site. One of my main goals is to keep font size consistent, regardless of browser font size setting.

I've just about got my initial style sheet ready, except for 1 thing: I use a simple javascript to display the date at the top of many pages, and can't figure out how to include CSS font properties to it.

You can have a look at a "trial" page at:

http://dickgilbert.com/proplist-csstest.htm

My style sheet is located at:

http://dickgilbert.com/default.css

Any help would be GREATLY appreciated!

Many thanks,
Dick Gilbert

 

[gerrygerry]

Can you post your code? -gerrygerry
Go To

http://quickfreewebsite.com!

 

[reboulder]

Hi, gerrygerry -

Here's the Javascript code I'm using (I'm entering it here by hand, so beware of typos!):

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!-- Hide from older browsers
<!-- Begin
var months=new Array(13);
months[1]=&quot;January&quot;;
months[2]=&quot;February&quot;;
months[3]=March&quot;;
months[4]=&quot;April&quot;;
months[5]=&quot;May&quot;;
months[6]=&quot;June&quot;;
months[7]=&quot;July&quot;;
months[8]=&quot;August&quot;;
months[9]=&quot;September&quot;;
months[10]=&quot;October&quot;;
months[11]=&quot;November&quot;;
months[12]=&quot;December&quot;;
var time=new Date();
var 1month=months[time.getMonth() + 1];
var date=time.getDate();
var year=time.getYear();
if (year <2000) //Y2K Fix, Isaac Powell
year = year + 1900; //

http://onyx.idbsu.edu/~ipowell

document.write(&quot;,center>&quot; + 1month + &quot; &quot;
document.write(date + &quot;, &quot; + year);
//End-->
</SCRIPT>

Hope that helps!
Dick
dick@dickgilbert.com

 

[dilettante]

Why not write out:

&quot;<span class=dateclass>&quot; + 1month + &quot; &quot; date + &quot;, &quot; + year + &quot;</span>&quot;

Then define &quot;.dateclass&quot; in your stylesheet to have centering and the font settings you want?

 

[reboulder]

Thanks, Dilettante. I'll give it a try!

 

[cactus1000]

You can also put font styles right in your document.write statement. Here's something I came up with to specify a smaller font for my &quot;last modified&quot; date output, with a work-around for Netscape 4.7 also.

This font style affects not only my text, but also the browser's date output.

<CENTER><script LANGUAGE=&quot;JavaScript&quot;>

if (navigator.appName == &quot;Microsoft Internet Explorer&quot
{
document.write('<font size=&quot;-5&quot;>Last updated :');
document.write(document.lastModified);
}
</script></center>

<CENTER><script LANGUAGE=&quot;JavaScript&quot;>

if (navigator.appName == &quot;Netscape&quot
{
document.write('<h6>Last updated :');
document.write(document.lastModified);

}

</script></center>

 

[reboulder]

Hi again -

Have to confess I'm not &quot;gettin' it.&quot; I'm basically a cut-'n-paste webmaster, surely not a programmer.

Dilettante, I tried adding your line of CSS code to the &quot;date&quot; javascript and did, at least partially, define &quot;.dateclass&quot; in my style sheet but, as yet, without success. Could you be more specific about where in the javascript code I should add that line?

Many thanks,
Dick
dick@dickgilbert.com

 

[dilettante]

I perhaps foolishly assumed you had styles defined in your page, either using an external stylesheet or an internal one.

Like maybe:

<STYLE>
.dateclass {text-align: center; font: 8pt Arial}
</STYLE>

Then when you document.write out the <SPAN> with that class, it'll pick up the styles you specified.

You can also do it with inline styles as suggested, writing out something like:

&quot;<span style='text-align: center; font: 8pt Arial'>&quot; + 1month + &quot; &quot; date + &quot;, &quot; + year + &quot;</span>&quot;

 

[dilettante]

Or why not define your SPAN as:

<SPAN id=dateSpan></SPAN>

And in your code set:

dateSpan.innerText = 1month + &quot; &quot; date + &quot;, &quot; + year

 

[dilettante]

*sigh*

I meant:

<SPAN id=dateSpan style=&quot;text-align: center; font: 8pt Arial&quot;></SPAN>

... and THEN set the innerText as described.

 

[dilettante]

*sheesh*

... and I STILL have a typo in the string expression. I meant:

dateSpan.innerText = 1month + &quot; &quot; + date + &quot;, &quot; + year

Sorry, fat fingers, slow brain tonight.

 

[reboulder]

Hi again, dilettante -

Thanks SO much for all your input. I GOT it!!!

I defined &quot;dateclass&quot; in my style sheet as you suggested (&quot;.dateclass {text-align:center; ...etc.}&quot, then added &quot;<span class=dateclass>&quot; immediately before the date JavaScript and &quot;</span>&quot; right after it. Appears to work like a charm!

http://dickgilbert.com/proplist-csstest.htm

Now folks can set their browser text size any way they want, and the size of the date text (like the rest of the text on the page) remains fixed. Whew. Thank you again for all your help! Cudn't have done it withoutcha!

Best regards,
Dick
dick@dickgilbert.com