CSS y Netscape
5 seguidores
Hola gente!
Estoy desarrollando mi primera pagina en CSS, y bien... En IE no hay problema, ha quedado tal y como quería, pero en Netscape se desmonta todo el invento. ¿Que hay que tener en cuenta para desarrollar con CSS pensando en la compatibilidad entre navegadores?
Podeis ver la web aqui: www.artifices.net
Gracias y saludos!!
helenp
Hola,
Bueno no soy nadie para decir el fallo,
habrá varias,
pero normalmente no hay diferencias tan grandes entre navegadores, si no se trata de antiugos, lo he visto con n7 y mozilla, y se ve fatal.
Así a la primera veo malas clasificaciones como:
<div class="normalbold" id="contacto">
</div>
no es necesario tantas clases, metiendo el texto en una <p> pones
en css p { } o si no lo quieres iguales, puedes poner esas reglas en el id.
Hay muchos tutoriales para leer postados anteriormente en este forum.
Te aconsejo leer algunos :)
jescortes
Gracias por contestar Helenp :)
¿Pero mi uso incorrecto de las clases, provoca una mala visualización en netscape? Yo entiendo que no esté empleando el código de forma óptima (por algo estoy empezando), pero no pensaba que eso pudiera ocasionar la incompatibilidad entre navegadores.
Pensaba que quizás el problema fuera por el uso del "float" para las distintas columnas, o indicar anchos fijos en lugar de porcentajes...
¿Alguien me puede dar un poco más de luz?
Asias!
Usuario desconocido
El problema es que Internet Explorer interpreta el css como le da la gana, por ejemplo el modelo de caja de IE es distinto al propuesto por el W3C, de esta manera una web que utilice el mismo se verá bien en todos los navegadores ecpto en IE que se desconfigurará, hay algunos problemas con el float, yo lo que hago siempre es probar las web con netscape(mozilla), y luego les busco los hacks para IE si es que hacen falta
jescortes
Jeje... yo precisamente lo he hecho al revés... lo he optimizado para IE, y luego cuando lo tenia todo cuadradito, lo he mirado en Netscape y me he llevado la sorpresa.
Y no existe un listado de esas cosas especiales que hace el IE interpretando el CSS?
helenp
Bueno, pero las diferencias no suelen ser tan grandes........
al menos mis paginas no ha tenido ninguna diferencia tan grandes entre navegadores....... es que nada esta en su sitio, ni cerca.
No creo que sea cuestion de hacks, sino hacerlo mas mejor.
Yo tambien siempre lo he mirado primero en IE, una vez hecho en demas navegadores.
meddle
siento discrepar y no tener tiempo para enrollarme: he mirado poco pero creo que tu problema son los padding mezclados con los float. Como te han dicho eso se debe al distinto modelo de caja que usan IE/Moz.
CarlosJ
a la pregunta de donde se pueden ver como trata un navegador u otro el css.
http://www.quirksmode.org
helenp
Esto no se debe de hacer.........
Pero ya que lo tengo.
En firebird, como se puede editar,
he borrado algunas cosas por ejemplo left-margin: auto etc, y he añadido height al superior.
te sobran reglas por todos lados, debes estudiarlo.
Esto se ve bien en mozilla, al editarlo se ve en seguida.
.fondo {
background-color: #0067b0;
}
#superior {
margin-top: 2px;
margin-bottom: 5px;
background-color: #FFFFFF;
width: 940px;
height: 100px;
}
#logo {
float: left;
padding: 5px;
margin: 5px 5px 0px 0px;
}
#contacto {
float: right;
text-align:right;
margin: 5px 5px 0px 0px;
}
#principal {
margin-top: 5px;
margin-bottom: 5px;
border: 1px solid #ccc;
width: 940px;
height: 330px;
background-image:url(../imagenes/fondo.jpg);
background-repeat: no-repeat;
}
#filosofia {
list-style: lower-alpha;
float: left;
width: 200px;
height: 220px;
padding: 10px;
margin: 55px 20px 20px 10px;
padding: 10px;
background-color:#CCCCCC;
text-align: justify;
line-height: 12px;
}
#clientes {
float: left;
width: 200px;
height: 220px;
padding: 10px;
margin: 55px 20px 20px 10px;
padding: 10px;
background-color:#CCCCCC;
}
#formulario {
float: right;
width: 210px;
height: 220px;
padding: 10px;
margin: 55px 10px 20px 20px;
padding: 10px;
background-color:#CCCCCC;
}
#pie {
margin-top: 5px;
margin-bottom: 5px;
background-color: #FFFFFF;
width: 940px;
}
#iframe {
float: left;
padding: 5px;
margin: 2px 2px 0px 0px;
background-color: #FFFFFF;
}
#banner {
float: right;
text-align:right;
margin: 2px 2px 0px 0px;
padding: 5px;
background-color: #FFFFFF;
}
jescortes
Ahora mismo estaba "investigando" con que habia dicho meddle, y veo que entre otras cosas, habia hecho un super mix a la hora de ajustar pixels ji ji ji
Muchas gracias helenp!! Veo mis fallos de novato total (como hecho de menos mis queridas tablas :) ).
Voy trabajando en ellos, os mantengo informados de los avances ;)
AAAsiass a todos!!
dirarck
Otra mente liberada! :P