Css simple style dont work on IE but yes in any other browser

i have a simple css file called Titulos.css who contain this:

h1 {    font: 50px Tahoma, Helvetica, Arial, Sans-Serif; text-align: center; color: #111; text-shadow: 0px 2px 3px #555;    }
h2 {    font: 14px Tahoma, Helvetica, Arial, Sans-Serif; text-align: center; color: #CCC; text-shadow: 0px 1px 2px #555;    }
h3 {    font: 10px Tahoma, Helvetica, Arial, Sans-Serif; text-align: center; color: #CCC;   }
b1 {    font: 16px Tahoma, 开发者_JAVA技巧Helvetica, Arial, Sans-Serif; color: #DDD;   }
b2 {    font: 10px Tahoma, Helvetica, Arial, Sans-Serif; color: #F9F7ED;    }
.caja {  width: 690px; height: 40px; background-color: transparent; border: 0px solid #000000; font-size:x-large; color: #222; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-weight: bold;" size="299";  }
.style1 {   text-align: right; }

And a page who call this file like:

<link rel="stylesheet" type="text/css" href="LIB/titulos.css" />

Later in this page im trying to use some of the styles like:

<div id="todo" align="center" >
    <div id="cabeza" style="width:850px;height:100px">
    </div>
    <div id="contenido" style="width:850px;height:420px;background-image: url(IMG/cuadro.png)" >
        <div id="titulo" style="width:765px;height:75px;padding-top: 18px;margin: auto;text-align: left;">
            <b1>Bienvenido <b><?php echo($username); ?></b></b1><br>
            <?php $check = mysql_query("SELECT * FROM sms WHERE ref = '".$username."' ORDER BY fecha DESC LIMIT 0, 1") or die(mysql_error());
            while($info = mysql_fetch_array( $check )) { 
                echo("<b1> Tu ultimo mensaje enviado fue: </b1><b2>" . $info['texto'] . " enviado el " . $info['fecha'] . "</b2>");

That only a part of the code of course, the think is, Firefox and Chrome display the code above like this: alt text http://img31.imageshack.us/img31/8814/bieng.jpg that as you can see have the styles applied. But when i see the code from IE 8 (even 7 or 6) this is what you see: alt text http://img268.imageshack.us/img268/8132/malcu.jpg So, what do you think?

<b1> and b2 are not html elements. Modern browsers(Firefox, Chrome, etc.) automatically detect these and apply the css rules onto them(as error detection), but Internet Explorer fails to apply css rules because theyre not html tags.

I suggest you replace <b1> & <b2> with actual tags(and use classes for css), or if you want a hack, put document.createElement("b1");document.createElement("b2") in a script. It will force IE7 and 8 to apply the css rules.

Example:

    h1 {    font: 50px Tahoma, Helvetica, Arial, Sans-Serif; text-align: center; color: #111; text-shadow: 0px 2px 3px #555;    }
    h2 {    font: 14px Tahoma, Helvetica, Arial, Sans-Serif; text-align: center; color: #CCC; text-shadow: 0px 1px 2px #555;    }
    h3 {    font: 10px Tahoma, Helvetica, Arial, Sans-Serif; text-align: center; color: #CCC;   }
    /* classes */
    .b1 {    font: 16px Tahoma, Helvetica, Arial, Sans-Serif; color: #DDD;   }
    .b2 {    font: 10px Tahoma, Helvetica, Arial, Sans-Serif; color: #F9F7ED;    }
    .caja {  width: 690px; height: 40px; background-color: transparent; border: 0px solid #000000; font-size:x-large; color: #222; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-weight: bold;" size="299";  }
    .style1 {   text-align: right; }

and:

<div id="todo" align="center" >
    <div id="cabeza" style="width:850px;height:100px">
    </div>
    <div id="contenido" style="width:850px;height:420px;background-image: url(IMG/cuadro.png)" >
        <div id="titulo" style="width:765px;height:75px;padding-top: 18px;margin: auto;text-align: left;">
<!-- assuming headers -->
            <h1 class="b1">Bienvenido <b><?php echo($username); ?></b></h1><br>
            <?php $check = mysql_query("SELECT * FROM sms WHERE ref = '".$username."' ORDER BY fecha DESC LIMIT 0, 1") or die(mysql_error());
            while($info = mysql_fetch_array( $check )) { 
                echo("<h1 class='b1'> Tu ultimo mensaje enviado fue: </h1><h2 class='b2'>" . $info['texto'] . " enviado el " . $info['fecha'] . "</h2>");