Roberto Herrero

Hola. Gracias por el código, me tocará utilizarlo...
Como sabes estoy diseñando una web (cutriweb para los amigos) y como todos, me he topado con este mismo problema.

Para diseñar la web utilizo Opera -mucho más «fino» que los otros dos-, y a este respecto creo que la cifra de usuarios que usan Opera puede ser bastante superior a la que se estima en las estadísticas de navegadores, ya que Opera permite configurarlo para mostrarse como otros navegadores.

De todos modos, al ver la web en Firefox, y todavía peor, en IE (6), la deformación, sobre todo de los line-height y los margin es increíble. Aunque no es mi mayor preocupación ahora, por ejemplo ya me he encargado de solucionar lo de los frames (ya no uso ninguno) y tengo cosas similares en mente por el momento, así que más adelante tendré que luchar contra las diferntes interpretaciones del código.

Yo todavía no estoy muy frustrado (falta de experiencia supongo) pero me imagino a quienes ya se hayan preguntado si no sería mejor utilizar todos el mismo navegador y acabar con estos quebraderos de cabeza...

El navegador, a poder ser, Opera ;)

Todo el dia llevo peleandome con la compatibilidad entre IE y Firefox. Mi gran error fue diseñar la última web para Firefox, cuando siempre lo hice sobre IE. Y al cambiar de navegador... ale, todo al aire.

Solución: en el CSS las propiedades con / se aplican a IE, el resto a Firefox.
Ejemplo:
width: 770px; para Firefox
/ width: 780px; para IE

Un saludo

Hola,

bueno yo tambien me sumo a la lista de ESTRESADOS por causa de los benditos CSS bueno agradezco porque acabo de entrarme que el unico que no cumple con los reglamentos de W3C es el IE que por lo que he leido sus programadores no les dio la gana de cumplir con esas reglas el cual mucho ENOJO MOLESTIA ESTRESS nos ha causado (DIOSSSSSS PORQUE????)

Ahora bien la solucion total a nuestros problemas nos los ha dado Ud. Roberto y es:

1) creamos una regla adaptada a Internet Explorer
2) repetimos la regla (lo que sea común no es necesario, únicamente lo que cambie -tradicionalmente padding, margin, width o height-) anteponiéndole html>body.

Mas abajo nos da un ejemplo:

#header {margin-bottom:3em} (solo funciona en IE me imagino)

html>body #header {margin-bottom:1em} (aqui funciona pa Firefox no??)

Esa es la solucion nada mas DIOSSSSSSS gracias por publicarlo de verdad estoy agradecido llevo buscando una respuesta tan simple y general como la suya ya que lo unico que encontraba eran respuestas a temas concretos..

Saludos y de nuevo gracias...

Estuve leyendo sobre los hacks, la seccion de: ...Termino con un ejemplo práctico, para entenderlo mejor:

#header {margin-bottom:3em}
html>body #header {margin-bottom:1em}... y me parecio excelente que haya solucion a este tipo de problemas que nos rompen la cabeza. Desafortunadamente, sigo rompiendomela porque trate de hacerlo y no me funciono en firefox. Por ejemplo, yo tengo lo siguiente:
#leftnav
{
width: 200px;
background-color: #81A7FE;
float:left;
margin-left:0px;
margin-top:0px;
}
y me funciono bien en IE7 pero luego hice lo siguiente:
html>body #leftnav
{
width: 200px;
background-color: #81A7FE;
float:left;
margin-left:-50px;
margin-top:0px;
}
y no me funciono en Firefox, la verdad no se si lo hice bien o esta malo.

Si me pudieran ayudar se los agradeceria.

Gracias

Saludos

si porfavor, yo tengo el mismo problema que carlos a donde se pone el codigo enotnces?

genial esa solucion!!! llevaba dias rompiendome la cabeza tratando de hallar una solucion para este problema, ami me funcione increiblemente

no funciona..

gracias!!!!!!!!
lo logramosssssssssss

Gracias por la ayuda!

No me funciono en Firefox

Solo una cosa, a mi no me funcionaba en firefox, hasta que me di cuenta de un error que parece tonto pero se deberia de puntualizar ya que nos puede pasar a cualquiera, y es que hay que dejar un espacio en blanco despues del «html>body »

ej:

#contenidoCentral h2 {
   padding:20px 10px 10px 10px;
}
html>body #contenidoCentral h2 {
   padding:0 10px 10px 10px;
}

Me salvaste de una buena, gracias compadre, este será un POS-IT fijo de todo diseñador ;-)

#contenidoCentral h2 {
   padding:20px 10px 10px 10px;
}
html>body #contenidoCentral h2 {
   padding:0 10px 10px 10px;
}

disculpa, me confundi en el codigo de arriba

No funciona. Ni en Opera ni en Firefox.

Mi versión es IE 7.0 y si interpreta el CSS en 'html>body'

Tampoco me funciona.

Mi versión es IE 7.0 y si es verdad que interpreta el html>body

yo optè por sacar un aviso de no compatibilidad con i.e. en la web, realmente no hay derecho a tantos trabajos por un navegador que se quedò corto y a quien no merece arrodillarse, me sumo a la campaña web de no màs i.e., les recomiendo flock para diseñar, que està super y màs ràpido que Mozilla pero con mejores caracteristicas, el ùnico pero es que està en inglès,
pueden descargarlo aquì ensayarlo :http://www.flock.com,gracias por permitirnos el desahogo.

Lo solucioné:

Primero lo ajusto a Firefox, y como IE no interpreta los comentarios y Firefox sí, después pongo el ajuste de IE. Así:

#contenidoCentral h2 { padding:20px 10px 10px 10px; } //Firefox
// #contenidoCentral h2 { padding:0 10px 10px 10px; } // IE

Pero poniendo las dos líneas en eon código.

Mano, no entiendo su solucion pero en IE7 o las versiones anteriores de IE , el style que pondre es reconocible, pero en FF no reconoce, es mas ni lo muestra. Si alguien sabe la solucion por fas es urgente:

#def
{
display:block;
position:absolute;
width:232px;
height:182px;
z-index:1;
left:145px;
top: 74px;
visibility: hidden;

}

MIGUEL!!!!! tu método fue el ke me funciono... lloré de emoción jajaja como me rompi el c... con mis amigos de mocosoft!!!
Utilicé este método para IE y FF y me funcó de 10!!! los otros no me funcionaron.

margin-left: 175px;
/ margin-left: 170px;

Hola, soy diseñador gráfico pero hace un par de años me metí en maquetación web aunque no tan intensamente como ahora y he de comentar que el uso de hacks, al que yo estaba acostumbrado, no es necesario. Todo se puede solucionar sin hacks, simplemente hay qe invertir un pco más d etiempo en averiguar cómo.

Hayq ue tratar al CSS como al Windows, indicándole todo desde cero, por ejemplo rápido, no vladría usar un padding así por las buenas, yo lo que hago es resetear a 0 su valor por defecto y le pongo el que me interesa posteriormente.

Siguiendo esta regla básica, un poquito d epaciencia y nada de lógica, he conseguido hacer diseños complicados en maquetaciones.

Espero que le sirva de ayuda a alguno, suerte ;)

que genial construir css valido a partir de esos trucos y que se vea bien en la mayoria de los navegadores.....pero a mi aun me queda el problema de validar el «filter», cuando se usa png en los estilos....... :(

Gracias, me costado encontrar algo así y que valide los estándres

Hola, a mi no me funciona, internet explorer interpreta el estilo que esta despues de html>body sin problemas

Definitivamente la solución correcta es la de el pana Miguel!!!!!
Gracias =D

#2. Miguel, hace 1 año

Todo el dia llevo peleandome con la compatibilidad entre IE y Firefox. Mi gran error fue diseñar la última web para Firefox, cuando siempre lo hice sobre IE. Y al cambiar de navegador... ale, todo al aire.

Solución: en el CSS las propiedades con / se aplican a IE, el resto a Firefox.
Ejemplo:
width: 770px; para Firefox
/ width: 780px; para IE

Un saludo

hola, osea tb lo puedo aplicar para un padding o margin?? ej.

para firefox;
padding-right: 10px;
margin-bottom: 10px;

para IE:
/ padding-right: 8px;
/ margin-bottom: 8px;

no me fucniona aplicando el codigo expuesto

amigo gerardo que no te funciona?? el codigo.. a mi me funciono super.. eso si en EI7.
ahora lo mejor es hacer una buena estructura en css sin ningun float y ocupando Posicion absoluta y relativa.

Hola... Creo que me devolvere a la era de las cavernas, o mejor, a la de la tablas... volvere a diagramar con tablas hasta que IE fenesca bye bye...

el «hack» es con esto

* html #nameClass { atributos }

Muchas gracias por el consejo funciona perfectamente, me has ahorrado muchos meses de vida tambien :)

Bro, gracias, por fin la solucion a mis eternos problemas conlos diferentes navegadores

Saludos

Saludos,

En colaboración al post puedo definir que para una buena orquestación de la maqueta de la página, es preferible separar los CSS de IE y los demás navegadores. Para ello la propia Microsoft, estableció un método de lectura de su navegador que solo IE reconoce y que por medio de él podemos filtrar. Para un mejor entendimiento pongo un ejemplo sencillo:

**************
--link rel=»stylesheet» href=»templates/css/general.css» type=»text/css» />
--link rel=»stylesheet» href=»templates/css/template.css» type=»text/css» />
--!--[if IE]> ((Este sería el llamado que solo IE reconoce))

--![endif]-->

**************

En el CSS de IE pondría todo aquello que el Internet Explorer no reconoce.

Espero les haya servido,

Atte, Alexander Vizquel

PS. Disculpen que haya repetido el mensaje pero la respuesta no acepta el comienzo del codigo HTML. Recuerden esto por si van a copiar la solución y sustituir «--» por el simbolo menor que que comienza las etiquetas en html.

A mí también me funcionó el código de Miguel, los demás no.
Aún así sigo teniendo problemas con el en IE no me funciona el margin:0
¿Alguna idea?

Me fucionó perfecto.
line-height: 0; /* ff */
// line-height: 60px; /* ie */

Cuando no te funciona el margin: prueba con el left o el padding.

Sí, he tenido este problema muchas veces. Uso habitualmente Firefox para navegar, pero para testear mis webs lo hago con IE.

Nunca había probado lo que dices y funciona, siempre tengo problemas con el Padding y el Margin, gracias por esa simple, pero muy útil, ayuda ;-)

Más de un año después tu post sigue siendo vigente... ya probaron con el gchrome?

Un saludo

Tengo la cabeza hecha un bombo.

http://rogertm.bloggerscuba.com/tag/programando/

aquí un sitio para «dejar un mensaje en español (?) al navegante errante para que se actualice a una versión mas reciente o cambie a otro navegador».
Intentaré un poco más, pero esto es una opción..

Solución rápida y elegante de casi todos vuestros problemas, sin necesidad de hacks y cosas raras...
*{margin:0;padding:0}

Solución menos rápida pero más profesional de casi todos vuestros problemas, usar un Reset CSS, os propongo el que yo mismo he diseñado:

http://blog.objetivocreativo.com/version-final-reset-css-v11/

Objetivo Creativo....

gracias! Qué buena página.

El problema esta en el iE no en el firefox. Hay que diseñar para el firefox y luego hacer los hack para el iE (por cierto iE6 se comporta distinto al iE7 y este al iE8) vamos que hay que tirarlo a la basura el iE.

Objetivo Creativo, con esa sola linea me arreglaste el diseño, el reset css ni hablar, buenísimo y de hecho fundamental para el diseño... felicitaciones por tu blog, está genial.

La solución propuesta no funciona en todas las versiones de IE debido a los caprichos de cada una:
html>body no es entendido por IE6, pero sí por IE7, en el cual también he tenido problemas con los márgenes.
Lo de los comentarios no lo he probado, pero si también los interpreta IE8 tampoco vale, porque esta versión sí que se comporta de manera más o menos estándar, por lo que no se deben aplicar los hacks necesarios para las otras versiones de IE.

En mi caso funcionó la solución propuesta en:

http://www.flashmania.es/recursos_web/diseno-web/recursos-web-disenar-para-varios-exploradores

La solución mejor que he probado es hacer hojas distintas para cada navegador. De esa forma el resultado coincide pixel a pixel con el diseño.