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....... :(