Forum Moderators: open

Message Too Old, No Replies

a cross browser and cross html/css/script problem

         

tsvet

9:25 pm on Apr 22, 2003 (gmt 0)

10+ Year Member



I was trying to do a little piece on my site telling the latest result of a football team. As I wanted it to stand on different pages, I wanted to use something that'll let me create a text file with the result and then all the different pages will quote that file.
Someone gave me the following solution:
<script type="text/jscript" src="score.js">
that works perfect, but I wanted to put the result with white letters on a claret background.
So I created a class "claret", which was to send the background colour to #660033
and then put it in front of the script in the following way:
<div class="claret"><font color="#ffffff"><script type="text/jscript" src="score.js"></font></div>
Now I don't know if that's just a wrong way of doing it or there is some bug in my browser, or just it's a different browser capability, but it does not work with my Mozilla browser.
It's ok in IE as well as Opera, but when executed in Mozilla, all I'm getting is the claret square, but no writing inside:
<sorry, no personal URLs>
Thanx a million!

[edited by: tedster at 9:31 pm (utc) on April 22, 2003]

tedster

9:51 pm on Apr 22, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld, tsvet.

If you stay with this approach, you should switch out "jscript" and replace it with "javascript". Jscript is Microsoft's proprietary name and I doubt Netscape or Mozilla will like it, although Opera may have no problem because it tries very hard, out of self defense, to spoof itself as Explorer.

But this "solution" is really a non-standard hack or workaround. Athletic scores are not javascript or jscript - they're just text. So approaching things this way could be a problem.

One way to do this is to really make the file javascript. You could use the .js file to create a variable which held the score of the game. Then call the js file in the head of each page and where you want to insert the latest score, use javascript to write that variable.

Another approach would be to create one html file for the score and then insert that file wherever ou want it by using an iframe.

choster

9:53 pm on Apr 22, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try
<div class="claret"><font color="#ffffff"><script type="text/javascript" src="score.js">[b]</script>[/b]</font></div>

grahamstewart

11:00 pm on Apr 22, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



And don't mix <font> tags and CSS.
Font tags are deprecated and using them in combination with css will only cause you hairloss.

Instead set the font color in your CSS definition of the claret class, like this..

.claret {
color: #ffffff;
background: #800000;
}

Incidentally, its better to name css classes by what they are, rather than what they look like. (e.g. Call it something like .scoreboard instead) That way if you decide to change the background to green in the future, your code will still make sense. :)

g1smd

12:15 am on Apr 23, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You should export the CSS to an external file and call it with a one line instruction in the <head> section:
<link type="text/css" rel="stylesheet" src="/path/file.css">

External CSS files must not contain any HTML tags or code.

grahamstewart

12:22 am on Apr 23, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I assumed you were doing this already, but if not then yes g1smd is correct: external CSS files are better because they get cached by the browser and they keep your code clean.

tsvet

5:36 am on Apr 23, 2003 (gmt 0)

10+ Year Member



Thanx a lot guys!
I tryed before to define the font colour in the class setting but it still didn't work. I'll try to swithch the jscript to javascript.
I've been told that using frames is no good, so I've tryed to keep away from them.
I will move my CSS in an outside file as that really makes the head of my html file quite messy.
I'll play and let you know about the result.
Cheers!

[edited by: tsvet at 5:55 am (utc) on April 23, 2003]

tsvet

5:52 am on Apr 23, 2003 (gmt 0)

10+ Year Member



Well, I set the font colour in the class definition and swapped "jscript" for "javascript" and I get the score to appear in all browsers, but they all show the text in black, which is my body text colour. Obviously they do not accept the font colour set in the head -
.scoreboard {
background-color: #660033;
padding: 0.2em;
border: none;
font-color: #FFFFFF; }

then
<div class="scoreboard"><script type="text/javascript" src="score.js"></script><br></div>

grahamstewart

8:00 am on Apr 23, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The correct css property is just
color
not
font-color
.
you can always check your css by using a validator [jigsaw.w3.org].

tsvet

7:50 pm on Apr 23, 2003 (gmt 0)

10+ Year Member



It works perfect now!
Thanx a million all!