EN firefox, Opera, Safari, Chrome si, pero en IE no

ESNOLA · #1 (**permalink**) 06/01/2009, 12:05

Tengo un problema con un css, el caso como dice el título del post es que se ve bien en todos los navegadores menos en IE, se puede ver mejor en http://www.todoelbarco.com/prueba.html y pego el código abajo.

A ver si alguien me puede echar un cable.

Edito el post para añadir que si renombro acronym por otro nombre cualquiera deja de funcionar ese estilo en IE.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<style>    
 mod {
    border-bottom: 1px dotted #333333;       
    cursor: help; 
    background-color: #C0FFFF;         
} 
 admin {
    border-bottom: 1px dotted #333333;       
    cursor: help; 
    background-color: #C0FFC0;      
}

usuario {
    border-bottom: 1px dotted #333333;       
    cursor: help;
    background-color: #FFFFC0;      
}  
acronym {
    border-bottom: 1px dotted #333333;
    cursor: help; 
    background-color: #F0F0F0;
}
</style>
<body>

<big><big> <center>       <br />
Poner el puntero encima de los nombres<br />
<b><u>Estos no funcionan en Internet Explorer, pero SI en Opera, Chrome, Firefox, Safari :</b></u><br />                                              
    <admin title="Administrador" alt="Administrador"><font color="#dd2222">Esnola</font> </admin> ---
    <usuario title="Recien LLegado" alt="Recien LLegado"><font color="#008000">prumar</font> </usuario> ---              
    <mod title="Diseñador grafico" alt="Diseñador grafico"><font color="#b7005b">Odisea</font> </mod>    <br />  
  <small><small>  mod {
    border-bottom: 1px dotted #333333;       
    cursor: help; 
    background-color: #C0FFFF;         
}  <br />

 admin {
    border-bottom: 1px dotted #333333;       
    cursor: help; 
    background-color: #C0FFC0;      
} <br />

usuario {
    border-bottom: 1px dotted #333333;       
    cursor: help;
    background-color: #FFFFC0;      
}<br /> </small> </small>
    
<br />
  <b><u>Estos funcionan en todos los navegadores :</b></u><br />                                            
     <acronym title="administrador" alt="administrador"><font color="#dd2222">Esnola</font> </acronym> ---
    <acronym title="Recien LLegado" alt="Recien LLegado"><font color="#008000">prumar</font> </acronym>  ----           
    <acronym title="Diseñador grafico" alt="Diseñador grafico"><font color="#b7005b">Odisea</font> </acronym>    <br />    
   <small><small> acronym {
    border-bottom: 1px dotted #333333;
    cursor: help;
    background-color: #F0F0F0;
}  </small></small>
          </center>
</body>
</html>

Triby · #2 (**permalink**) 06/01/2009, 15:33

El problema es que no estas usando codigos estandar: http://validator.w3.org/check?uri=ht...Inline&group=0

Dudo mucho que las etiquetas mod, admin o usuario existan en HTML, por lo que deberias crear clases o IDs:

Código:

<style type="text/css">
.mod {
    border-bottom: 1px dotted #333333;       
    cursor: help; 
    background-color: #C0FFFF;         
} 
</style>
<body>
<span class="mod">Esto es mod</span>
</body>

ESNOLA · #3 (**permalink**) 06/01/2009, 16:43

Muchas gracias, esa es la solución