Inicio > Mis eListas > hcc > Mensajes

 Índice de Mensajes 
 Mensajes 1301 al 1320 
AsuntoAutor
Existe diferencia Leonardo
Re: transparencia STRIP tm
Re: problemas de c STRIP tm
RE: Fondo de celda Angel J.
Re: Bordes lateral STRIP tm
RE: Otra_de_fondos Carlos d
RE: test en línea Carlos d
Presentación norberto
RE: Fondo de celda daniel e
RE:__Otra_de_fondo daniel e
Re: Existe diferen STRIP tm
RE:__Otra_de_fondo STRIP tm
Re: Existe diferen nageloti
capas en opera Rosario
RE: transparencia Angel J.
Re: transparencia Luis Ang
Re: consulta Juan R.
Re: Imagen de fond Juan R.
Re: Otra de fondos Juan R.
Re: problemas de c Juan R.
 << 20 ant. | 20 sig. >>
 
HTML con Clase
Página principal    Mensajes | Enviar Mensaje | Ficheros | Datos | Encuestas | Eventos | Mis Preferencias

Mostrando mensaje 1321     < Anterior | Siguiente >
Responder a este mensaje
Asunto:Re: [hcc] problemas de compatibilidad con el explorer
Fecha:Martes, 21 de Mayo, 2002  18:09:46 (+0200)
Autor:Juan R. Pozo <jrpozo @........net>

FreMeN escribió: 
 
> Cuando asigno un tamaño a una capa ( lo hago en porcentajes) , y con 
> padding 0, me encajan todas las capas como yo quiero, pero en el 
> momento que quiero ponerle padding a una de ellas, ya se desvaría, 
> según el navegador; con explorer no cuenta el pading para 
> dimensionar la capa ( es decir, con un padding del 100%, por ej., si 
> le pongo de padding 10%, o 10px, o lo que sea, sigue encajando bien 
> en pantalla) pero con mozilla, netscape y opera, tengo q 
> redimensionar la capa según el padding (p. ej, poniendo el tamaño al 
> 90% y el padding al 10% para conseguir el efecto anterior ). 
> Supongo q es fallo del explorer [...] 
 
En efecto, como se explica en el artículo que te pasó Strip, se trata 
de un bug de MSIE, y es justamente el principal fallo de Explorer por 
el cual conviene desarrollar las páginas en Mozilla y adaptarlas 
después a Explorer. 
 
Una de las mejores maneras de corregir el problema es la propuesta por 
Tantek Çelik en su página web (en inglés): 
 
http://tantek.com/CSS/Examples/boxmodelhack.html 
 
Consiste en lo siguiente. Imagina un cuadro (box) creado por un 
elemento DIV con las siguientes propiedades de estilo: 
 
div.boxtest { 
  border : 20px solid; 
  padding : 30px; 
  background : #ffc; 
  width : 300px; 
} 
 
El ancho *total* del cuadro (que incluye contenido, relleno, bordes y 
margen, como explico en http://html.conclase.net/tutorial/html/5/3) 
sería 20 + 30 + 300 + 30 + 20 = 400 píxels. 
 
Ahora bien, para algunos navegadores (Explorer 5.x para Windows) width 
define la anchura total del cuadro, lo cual es incorrecto, ya que 
según la especificación width sólo define la anchura del contenido. En 
estos navegadores, la anchura del contenido se queda en: 300 - 20 - 30 
- 30 - 20 = 200 píxels. 
 
Para obtener resultados homogéneos, tenemos que ser capaces de decir a 
estos navegadores (y sólo a éstos) que la anchura (tal y como ellos la 
entienden) es de 400 píxels. Para ello nos basamos en el siguiente 
bug: 
 
div.boxtest { 
  border : 20px solid; 
  padding : 30px; 
  background : #ffc; 
  width : 400px; 
  voice-family : "\"}\""; 
  voice-family : inherit; 
  width : 300px; 
} 
 
IE5.x/Win se parará al llegar a la regla voice-family, e ignorará el 
resto. Para él, width valdrá 400px. Los demás navegadores llegarán 
hasta el final, y para ellos, width valdrá 300px. Se elige 
voice-family para hacer la trampa porque es una propiedad que 
normalmente no usaremos prácticamente nunca (y menos en una hoja para 
pantalla). 
 
Ahora, como Opera 5 sí implementa bien el modelo de cuadros de CSS 
pero se atasca como IE5/Win en la regla voice-family, añadimos un 
regla de estilo más: 
 
html>body .boxtest { 
  width : 300px; 
}  
 
IE5/Win ignorará esto porque no soporta el selector >, que es un 
selector de CSS2. html>body significa los elementos BODY hijos del 
elemento HTML, o sea, el BODY de toda la vida (es importante notar que 
Opera necesita que no haya espacios alrededor del >, aunque la 
especificación sí lo permite). 
 
Un saludo, 
-- 
Juanra - http://html.conclase.net/