Muy buenas a todos. He creado mi web usando el curso de cctw y ya la tengo lista. Podéis visitarla en www.rubalingenieros.com. El caso es que se ve diferente dependiendo si se usa Internet Explorer o Mozilla Firefox. Como podréis observar los que podáis verla con los dos navegadores, los enlaces de la fila de arriba salen todos apelotonados y el tipo de letra calibri que definí sólamente lo acepta el ie, y no el firefox. Además, algunas letras se superponen a la imagen del globo terráqueo que he colocado en el index. Echadle un vistazo y proponed alguna solución por favor, mi negocio depende de ello :mrgreen:
Problemas de compatibilidad con Firefox
lo he vuelto a visitar y al parecer el tipo de letra si que se respeta. lo que no me sale es la curvainferior que se daba en el curso cctw y que yo coloqué en mi web abajo del cuadro de texto. a ver si alguien me echa un cable y que no sea al cuello :mrgreen:
pues si, se ve distinto, y en el navegador de google (chrome) también se ve mal.
si te sirve de consuelo, os pasa a todos :lol:
es normal cuando se usan las capas para todo el esqueleto de la web. Como le dije ayer a otro usuario mi consejo es que uséis más tablas y menos capas. ¿por qué? porque las tablas se ven igual en todos los navegadores, o casi igual.
para tu caso concreto:
- el problema de la barra inferior es que en la hoja de estilos, después del alto de la capa falta el punto y coma.
- el problema del menu que se ven todos los enlaces pegados es porque en la hoja de estilos no has dicho que tenga que haber margenes... explorer los pone y firefox no. Para evitarlo debes especificar:
Lo primero:
- creo que falta el </div> de cierre de la capa global, me da que no afecta mucho pero mejor si lo cierras.
con eso ya queda casi todo arreglado, excepto el texto que monta sobre la imagen. eso es sencillo, el problema está en que le has dado un ancho fijo de 130 pixels a esa capa, y en realidad la imagen que hay dentro es de 250 pixels. Quita el ancho de 130, no hace falta que pongas 250, simplemente quítalo y arreglado.
------------------------------------------
De todas formas, al margen de esas correcciones yo en tu lugar probaría a hacer la misma web con tablas, es un buen ejercicio que te permitirá aprender lo bueno de los dos sistemas, para poder combinar lo mejor de ambos.
un saludo!
si te sirve de consuelo, os pasa a todos :lol:
es normal cuando se usan las capas para todo el esqueleto de la web. Como le dije ayer a otro usuario mi consejo es que uséis más tablas y menos capas. ¿por qué? porque las tablas se ven igual en todos los navegadores, o casi igual.
para tu caso concreto:
- el problema de la barra inferior es que en la hoja de estilos, después del alto de la capa falta el punto y coma.
- el problema del menu que se ven todos los enlaces pegados es porque en la hoja de estilos no has dicho que tenga que haber margenes... explorer los pone y firefox no. Para evitarlo debes especificar:
Lo primero:
<ul id="loquesea">y en la hoja de estilos:
#loquesea {
list-style:none;
}
#loquesea li {
font-size:9px;
width:120px;
height:20px;
float:left;
}
#loquesea li a {
display:block;
text-decoration:none;
text-align:center;
font-family:"MS Sans Serif";
font-size:9px;
color:#333333;
}
#loquesea li a:hover {
color:#000000;
}- creo que falta el </div> de cierre de la capa global, me da que no afecta mucho pero mejor si lo cierras.
con eso ya queda casi todo arreglado, excepto el texto que monta sobre la imagen. eso es sencillo, el problema está en que le has dado un ancho fijo de 130 pixels a esa capa, y en realidad la imagen que hay dentro es de 250 pixels. Quita el ancho de 130, no hace falta que pongas 250, simplemente quítalo y arreglado.
------------------------------------------
De todas formas, al margen de esas correcciones yo en tu lugar probaría a hacer la misma web con tablas, es un buen ejercicio que te permitirá aprender lo bueno de los dos sistemas, para poder combinar lo mejor de ambos.
un saludo!
he arreglado algunas cosas, pero el asunto de los enlaces juntos no funciona como dices. no se que le pasará. he subido el archivo con tus instrucciones pero sigue saliendo igual. échale un vistazo a ver si le ves algo por favor, me harías un gran favor porque necesito arreglar esto ya
muchas gracias de antemano
muchas gracias de antemano
he quitado la capa navegación (no sirve en principio para nada) y he cambiado un par de cosas en el CSS, la más importante el ancho de 160 de cada li. Y luego para que quedase mas simétrico puse el texto de cada enlace centrado, ha quedado así:
#pestanas {
list-style:none;
}
#pestanas li {
font-size:16px;
height:20px;
float:left;
width:160px;
}
#pestanas li a {
display:block;
text-decoration:none;
text-align:center;
font-family:"Calibri";
font-size:16px;
color:#330000;
}
#pestanas li a:hover {
color:orange;
}