Conseguir que la web se vea igual en todos los navegadores

[jaume]

Foley muy bueno el tuto. Solo una pregunta. Veo bien com fire y ie mi página en los ordenadores que la miro -dos en mi casa y uno en el trabajo-. Pero resulta que en otros ordenadores o sale el encabzado muy grande, absolutamente desencajado con el texto de debajo las fotos fuera de lugar, i/o el texto desconfigurado o que se yo cuantas cosas. Se debe esto a que debería aplicar tu solución a mi página? O es que la configuración de panatalla de los otros ordenadores es diferente, o que?

Te paso mi página a ver como la ves: www.histoviatges.com

Gracias por la respuesta

[jmanuel]

Hola,
tengo mi web casi terminada y francamennte, viéndola en el explorer 8, que es el que uso, he quedado bastante satisfecho, sobretodo despues de la vara que os he dado. Acabo de verla en el M. firefox, Opera y Crome y me he asustado. En el que peor se ve es en el M. Firefox, el princio del body totalmente fuera de la página, desplazado a la derecha. Tiene alguna solución rápida?

Pensar que tengo que empezar de nuevo a realizar todas las modificaciones que indicas me da escalofrios.
Un saludo a todos y gracias por la ayuda

[jaume]

A ver, he intentado seguir tus instrucciones y he hecho lo siguiente:

1.- Modificaciones en la carpeta general, junto al index.html. He copiado el archivo reset en el bloc de notas y le he dado la extensión .css

2.- En la plantilla de todas las hojas le he puesto el código que indicas -adjunto imatge1 de donde las he colocado.

3.- He subido las modificaciones al servidsor, y no cambia nada. Sobre todo los encabezados se desplazan y descuadran. ¿Que puede pasar?

He visto que en el dream hay un apartado -imatge3-, que habla de modificaciones para todos los ie. ¿debería colocar los códigos en este lugar? Y en este caso, ¿que codigos? y exactamente, ¿donde?

Gracias por la atención

salu2

[jaume]

Perdona, no creo que se vea bien la imagen1. La reenvio en jpg

gracias

[jaume]

Foley, has visto la pregunta?


gracias

salu2

[María José Ribas]

Hola a todos, yo también estoy un poco "despesperada"!! Mi web www.activacionespiraldorada.es se ve perfecta en IE pero en los demás navegadores no aparece ni el fondo de la cabecera, de la linea de navegación, ni del menu. Además la linea de navegación sale en vertical en lugar de horizontal, tampoco aparecen los márgenes delimitando cabecera, navegación y menú. He seguido todos los pasos que indicais para crear una hoja de estilo para IE y otra para los restantes navegadores. Hasta aquí perfecto, con los cambios me funciona igualmente en IE pero ahora no tengo ni idea de que cámbios tengo que realizar en la hoja de estilo para que funcione en los demás navegadores. ¿Podéis ayudarme? Gracias!

[jmanuel]

Hola Foley,

Mi página web se ve bien en IE explorer, firefox , chrome y opera pero el menú desplegable no me funciona en opera pero sí en los otros navegadores, me podrias ayudar?
mi web:
http://appartorreviejaalicante.atwebpages.com/
Un saludo y gracias

[juanmanuel]

Hola a tod@s!
Yo también estoy teniendo problemas, la web que estoy creando se me ve bien en IE, pero en los demás se ve el pie de página desordenado y cada vez que lo intento arreglar, la fastidio por otro lado, así que no se como solucionarlo, si me pudierais ayudar os lo agradecería. Mi web es esta: http://www.20thcentury.comocreartuweb.es/plantilla.html
Gracias.

[jaume]

Bueno, en el foro hay algunas soluciones, pero no he encontrado ninguna que se adapte del todo y a todos los ordenadores. Vale la pena rastrear el foro. En él hay soluciones (hay que poner un determinado tren de códigos en la cabecera). A base de hacer pruebas, he conseguido que se vean correctamente en mozilla y explorer y en unos ordenadores, en los que antes, o se veía bien en mozilla pero no en fire, o al revés. Pero hay otros ordenadores en los que no acaba de funcionar. Pienso que es debido a la configuración de pantalla de cada uno de ellos. No se, talvez no sea así, pero es a la conclusión que he llegado. Con los otros navegadores no lo he probado. En fin, hace falta darse una vuelta por el foro y, con paciencia, lograreis que funcione. Yo no llego a más... Suerte

[Rebe_Lunitari]

Hola, deje un mensaje como poniais en el foro general, pero aun no recibi ninguna sugerencia. Aqui os dejo la direccion del post. Gracias

http://www.comocreartuweb.com/consul...n-los-demas...

[mgg]

Hola, soy nueva en el foro y os doy las gracias de antemano por vuestra ayuda.
Tengo un problema. Mi página no se ve completamente en IE6 y en IE7 el menú desplegable sale por debajo del resto de la página. Os mando el css y le echais un vistazo por favor, seguramente esté haciendo algo mal pero no sé muy bien el qué.
@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, center, u, b, i {
margin : 0;
padding : 0;
font-style : normal;
font-family : "Century Gothic";
vertical-align : baseline;
font-size : 14px;
position : relative;
left : auto;
top : auto;
}
body {
line-height : 1;
}
html>body {
line-height : 1;
}
/*:focus {
outline : 0;*/
input:focus {
width: 5em;
background-color: #93f;/*#6374AB;*/
}

ol, ul {
list-style : none;
}
/* IE6 Only */
html >table {
border-collapse : collapse;
/*border-spacing : 0; */
font-family : "Century Gothic";
margin: 0 auto;
text-align: left;
position:static;

}
table {
border-collapse : collapse;
/*border-spacing : 0; */
font-family : "Century Gothic";
margin: 0 auto;
text-align: left;
position:static;

}
blockquote:before, blockquote:after, q:before, q:after {
content : "";
}
blockquote, q {
quotes : "" "";
}
input, textarea {
margin : 0;
padding : 0;
}
hr {
margin : 0;
padding : 0;
border : 0;
color : #fff;
background-color : #fff;
height : 2px;
}
* {
margin : 0;
padding : 0;
}
.titulo {
font-family : century gothic;
font-size : xx-large;
color : #fc0;
margin : 19px 0 0 20px;
float : left;
font-weight : bold;
display: inline; /* <---Solution for bug IE6 */
}
.contacto {
font-family : century gothic;
font-size : 14px;
color : black;
margin : 14px 15px 0 10px;
float : right;
text-decoration : none;
letter-spacing : -1px;
}
h1 {
font-family : century gothic;
color : #fc0;
text-align : center;
font-size : small;
}
h2 {
font-family : century gothic;
color : #fc0;
text-align : center;
font-size : xx-large;
}
h3 {
font-family : century gothic;
color : #909;
margin : 15px 15px 0 15px;
text-align : left;
font-size : medium;
}
/*!!!!!!!!!!! MyCSSMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/

.qmmc .qmdividery {
float : left;
width : 0;
}
.qmmc .qmtitle {
display : block;
cursor : default;
white-space : nowrap;
position : relative ;
z-index : 1;
z-index : auto;
}
.qmclear {
font-size : 1px;
height : 0px;
width : 0;
clear : left;
line-height : 0;
display : block;
float : none !important;
position: static;
word-wrap: break-word;
}

.qmmc {
position : relative;
z-index : 10;
z-index : auto;
}

.qmmc a, .qmmc li {
float : left;
display : block;
white-space : nowrap;
position : relative;
z-index : 1;
z-index : auto;

}

.qmmc div a, .qmmc ul a, .qmmc ul li {
float : none;
}

.qmsh div a {
float : left;
}

.qmmc div {
visibility : hidden;
position : absolute;
}

.qmmc li {
z-index : auto;
}

.qmmc ul {
left : -10000px;
position : absolute;
z-index : 10;
}

.qmmc, .qmmc ul {
list-style : none;
padding : 0;
margin : 0;
}

.qmmc li a {
float : none;
}

.qmmc li:hover > ul {
left : auto;
}

#qm0 ul {
top : 100%;
}

#qm0 ul li:hover > ul {
top : 0;
left : 100%;
}

/*"""""""" (MAIN) Container""""""""*/
#qm0 {
background-color : #c085f0;
}
/*"""""""" (MAIN) Items""""""""*/
#qm0 a {
padding : 5px 32px 5px 12px;
margin : 0 4px;
color : #fcce3f;
font-family : century gothic;
font-size : 16px;
text-decoration : none;
}
/*"""""""" (MAIN) Hover State""""""""*/
#qm0 a:hover {
text-decoration : underline;
}
/*"""""""" (MAIN) Active State""""""""*/

body #qm0 .qmactive, body #qm0 .qmactive:hover {
background-color : #9d49d9;
color : #fcce3f;
text-decoration : underline;
}
/*"""""""" (SUB) Container""""""""*/
#qm0 div, #qm0 ul {
padding : 8px;
margin : -1px 0 0;
border-width : 1px;
border-style : none;
}
/*"""""""" (SUB) Items""""""""*/
#qm0 div a, #qm0 ul a {
padding : 2px 40px 2px 5px;
margin : 0;
background-color : #93f;
color : #fcce3f;
border-width : 0;
border-style : none;
border-color : #000000;
}
/*"""""""" (SUB) Hover State""""""""*/
#qm0 div a:hover, #qm0 ul a:hover {
color : #264060;
text-decoration : none;
}
/*"""""""" (SUB) Active State""""""""*/
html>body #qm0 div .qmactive, body #qm0 div .qmactive:hover {
color : #264060;
text-decoration : none;
}
/*"""""""" Individual Horizontal Dividers""""""""*/
#qm0 .qmdividerx {
border-top-width : 1px;
margin : 5px 0;
border-style : dashed;
border-color : #264060;
}
/*"""""""" Individual Vertical Dividers""""""""*/
#qm0 .qmdividery {
border-left-width : 2px;
height : 16px;
margin : 6px 0 0;
border-color : #264060;
}
hr {
width : 100%;
}
body {
margin : 5px;
padding : 0;
overflow : auto;
background : #fff;
color : #000;
font-family : "Century Gothic";
font-size : 14px;
}

html>body
{
margin : 5px;
padding : 0;
overflow : auto;
background : #fff;
color : #000;
font-family : "Century Gothic";
font-size : 14px;
}
#s3slider {
width : 430px; /* important to be same as image width */
height : 310px; /* important to be same as image height */
position : relative; /* important */
overflow : hidden; /* important */
}
#s3sliderContent {
width : 430px; /* important to be same as image width or wider */
position : absolute; /* important */
top : 0; /* important */
margin-left : 0; /* important */
}
.s3sliderImage {
float : left; /* important */
position : relative; /* important */
display : none; /* important */
}
.s3sliderImage span {
position : absolute;
left : 0;
font : 10px/15px Arial, Helvetica, sans-serif;
padding : 10px 13px;
width : 430px;
background-color : #666;
color : #99f;
display : none;
top : 0;
}
/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
.clear {
clear : both;
}
#principal {
margin : 0 auto;
}
.contenedorfoto {
float : left;
margin : 5px;
padding : 5px;
display: inline; /* <---Solution for bug IE6 */
}
.textoPie {
font-family:century gothic;
font-size : 10px;
color : #000;
margin : 0 0 0 10px;
}
.page-break {
page-break-before : always;
}
input[type="submit"], label, select, .pointer {
cursor : pointer;
}

Una vez más gracias a todos.

[nelo]

Si bien ultimamente he conseguido obviar la mayoria de defectos en cuanto a coloracion de las fotos con las que trabajo, sobre todo en las pinceladas en los fondos negros que no veía como defectos en firefox de Lynux trabajando con el Gimp, hasta que me comentaron los que lo veian en windows y supongo que en Explorer, que se notaban mucho las pinceladas y otros defectos....Soy un lego en la materia y no se si se debe al cambio de sistema (Lynux a Windows) o de navegador Firefox a Explorer....Y ahora la pregunta ¿existe algo que iguale por ejemplo los acabados del gimp y del fotoshop o la vision entre navegadores o entre sistemas?
Se agradecera una contestación para tontos.......

WWW.NELOCACTUS.ORG

[nelo]

Y siguiendo con el tema.....Si se trata del navegador.....Si el firefox se instala en Windows se verá igual que el firefox en Lynux o Mac

[nie_tania]

La verdad es que es la primera web que hago.
Iba mirando con Google Chrome y se veía super bien pero no me fijé mucho en como respondía ante el malvado IE
Hoy que ya esta colgada y casi acabada me he fijado en los links cuando abro la web en Internet explorer; se mueven, desaparecen y hacen cosas muy sospechosas..!
No se a que es debido y tampoco como solucionarlo!

La pagina web es www.pekemax.es

Graciaaas!!

[ocbarrio]

aparte de todo lo mencionado por foley (muchas gracias por cierto), hay algunos detalles que puedo comentar.
Lo primero es el orden. La web debe estar con el codigo lo mas limpio posible. Por ejemplo (y me incluyo), los uue no sabemos mucho de html y css, a veces añadimos ordenes que o no sirven para nada (hemos probado una etiqueta y no ha hecho nada en la web, y se nos olvida quitarla), o que se contradicen con otras (añadimos margin:5px donde ya hay otro margin, o añadimos margin-bottom:-5px y al div de debajo margin-top:5px).
La otra es conocer bien las etiquetas (si pones a un div top:-10px, el div se desplaza hacia arriba. Pero si en vez de top pones margin-top:-10px, ocurre lo mismo. La diferencia esta en que con top el div se mueve para arriba, pero mantiene el espacio que deberia ocupar sin la propiedad, y con margin top todo lo que hay por debajo se desplaza con el div)
Yo he tenido problemas por que voy probando etiquetas, y acabo con un estilo para un div con 15 propiedades distintas sin conseguir mi proposito. Al final acabo empezando desde cero con ese pedazo de codigo.
Suerte!