CODEWITHSUNDEEP
cssinternet-explorerfontstags
Hildoceras Giannis
Hildoceras Giannis

Reputation: 1

CSS and IE9 : tags uncorrectly interpreted

I am doing a little website about a MCQ on chemical security pictograms.

The pupil reads the questions, chooses the answers, validate and reads the answers on another page.

Very simple.

The right answers are written in green, and if the pupil has correctly answered, there is also a message in green "good answer". A bad choice would be written in red with "bad answer".

The website is absolutely correct on firefox, but the colors and fonts do not appear correctly on IE9.

I use tags in the part :

<style>
  itsfalse {
    font-family: "Times New Roman",serif; 
    font-weight: bold; 
    color:#00A000;
  }
  itstrue { 
    font-family: "Times New Roman",serif; 
    font-weight: bold; 
    color:#FF0000;
  }
  goodans {
    font-family: "Arial",sans-serif; 
    font-weight: bold; 
    color: #00A000; 
    font-size:larger;
  }
  badans {
    font-family: "Arial",sans-serif;
    font-weight: bold;
    color:#FF0000;
  }
</style>

For instance when the choice was right I'd have something like :

<itstrue>[the right answer]</itstrue> 
<goodans>Good answer!</goodans>

As I said, Firefox reads it correctly and IE reads what is between the tags but does not use the styles.

If I do not use CSS but good ol' HTML and its <font></font>, no problem, but it's kind of heavy.

PS website on http://hildoceras.fr/quizz (in french tags are vrai, faux, bon, mau in correction.php)

Upvotes: 0

Views: 159

Answers (2)

Joshua
Joshua

Reputation: 4159

You should not use custom HTML tags, if you do, it's no longer HTML.

Stick with HTML and use CSS classes, like so:

    <style type="text/css"> 
    .itsfalse {font-family:"Times New Roman",serif; font-weight:bold; color:#00A000;} 
    .itstrue {font-family:"Times New Roman",serif; font-weight:bold; color:#FF0000;} 
    .goodans {font-family:"Arial",sans-serif; font-weight:bold; color:#00A000; font-size:larger;} 
    .badans {font-family:"Arial",sans-serif; font-weight:bold; color:#FF0000;} 
    </style>
    ...
    <span class="itstrue"> [the right answer] </span> 
    <span class="goodans">&nbsp;&nbsp;&nbsp;Good answer !</span>

Upvotes: 1

chipcullen
chipcullen

Reputation: 6960

I think you're main issue is that you're making up elements. Some browsers will parse this just fine, while others will ignore any style declarations made for those elements. That's why the HTML5 shim is in existence.

Try using standard HTML elements (<p>, <div>) with classes like "itstrue" and "goodans".

Upvotes: 1

Related Questions