HTML Colored text will not show.

I created a widget just for information. It was an official support forum widget with links to official support forums, and it was working. However, now the colored text will not show. This is the widget source.

Code:

<strong>FORUMËT ZYTARE I MBËSHTETJËS</strong><br /><br />

<img src="http://illiweb.com/fa/optimisation_fdf/common/uk_us.gif" /> <a href="http://help.forumotion.com/forum"><span style="font-size: 10px;"><strong>Anglisht</strong></span></a><span style="font-size: 10px;"> <img src="http://i39.servimg.com/u/f39/18/21/41/30/arr10.png" /> <span style="color: rgb(50, 164, 213);"><em>Foru</em></span><em><span style="color: rgb(123, 185, 43);">Motion</span></em></span><br />

<img src="http://illiweb.com/fa/optimisation_fdf/common/flag_ar.png" /> <a href="http://help.ahlamontada.com/"><span style="font-size: 10px;"><strong>Arabisht</strong></span></a><span style="font-size: 10px;"> <img src="http://i39.servimg.com/u/f39/18/21/41/30/arr10.png" /> <span style="color: rgb(50, 164, 213);"><em>Ahla</em></span><em><span style="color: rgb(123, 185, 43);">Montada</span></em></span><br />

<img src="http://illiweb.com/fa/optimisation_fdf/common/flag_fr.png" /> <a href="http://forum.forumactif.com/"><span style="font-size: 10px;"><strong>Frëngjisht</strong></span></a><span style="font-size: 10px;"> <img src="http://i39.servimg.com/u/f39/18/21/41/30/arr10.png" /> <span style="color: rgb(50, 164, 213);"><em>Forum</em></span><em><span style="color: rgb(123, 185, 43);">Actif</span></em></span><br />

<img src="http://i34.servimg.com/u/f34/12/94/96/28/flag_n13.png" /> <a href="http://ondersteun.actieforum.com/"><span style="font-size: 10px;"><strong>Holandisht</strong></span></a><span style="font-size: 10px;"> <img src="http://i39.servimg.com/u/f39/18/21/41/30/arr10.png" /> <span style="color: rgb(50, 164, 213);"><em>Actie</em></span><em><span style="color: rgb(123, 185, 43);">Forum</span></em></span><br />

<img src="http://illiweb.com/fa/optimisation_fdf/common/flag_ru.png" /> <a href="http://help.forum2x2.ru/"><span style="font-size: 10px;"><strong>Rusisht</strong></span></a><span style="font-size: 10px;"> <img src="http://i39.servimg.com/u/f39/18/21/41/30/arr10.png" /> <span style="color: rgb(50, 164, 213);"><em>Forum</em></span><em><span style="color: rgb(123, 185, 43);">2x2</span></em></span><br />

<img src="http://illiweb.com/fa/optimisation_fdf/common/flag_es.png" /> <a href="http://asistencia.foroactivo.com/"><span style="font-size: 10px;"><strong>Spanjisht</strong></span></a><span style="font-size: 10px;"> <img src="http://i39.servimg.com/u/f39/18/21/41/30/arr10.png" /> <span style="color: rgb(50, 164, 213);"><em>Foro</em></span><em><span style="color: rgb(123, 185, 43);">Activo</span></em></span><br />

Translated Piece:

FORUMËT ZYTARE I MBËSHTETJËS - Official Support Forums
Anglisht - English
Arabisht - Arabic
Frëngjisht - French
Holandisht - Dutch
Rusisht - Russian
Spanjisht - Spanish

try adding important

Code:

<span style="color: rgb(123, 185, 43) !important;">

Make them all like this and they should work.

Code:


<img src="http://illiweb.com/fa/optimisation_fdf/common/uk_us.gif" alt="" border="0" /> <a href="http://help.forumotion.com/" target="_blank" rel="nofollow"><strong>English</strong></a> <img src="http://i39.servimg.com/u/f39/18/21/41/30/arr10.png" alt="" border="0" /> <span style="color: rgb(0, 165, 205);">Foru</span><span style="color: rgb(124, 186, 44);">motion</span>

I noticed something a bit off with Fx and it's inline properties since 33.0. Try adding a class name instead, it'll be easier to manage. ^^

Code:

<span class="_p1">Foru</span><span class="_p2">motion</span>

Then place this before ALL of your HTML in the widget :

Code:

<style type="text/css">
 ._p1, ._p2 {
   font-weight:normal;
   font-style:italic;
 }
 ._p1 { color:#00A5CD }
 ._p2 { color:#7CBA2C }
</style>

Oh that's smart, and it makes the code easier to do.

Edit: Solved