Compatibilidad de navegadores

marta1010 · #1 (**permalink**) 27/02/2012, 13:14

Soy Marta, nueva en el foro y tengo una duda sobre la compatibilidad de navegadores. He hecho una web: [URL="http://www.xtec.cat/centres/a8060137/webcfa/index.html"]http://www.xtec.cat/centres/a8060137/webcfa/index.html[/URL] y en IE y Firefox se visualiza bien, pero en Chrome y en Safari no. He buscado información de cómo solucionar el tema pero no he encontrado nada. También he buscado hacks y los he probrado pero no han sirvido. El problema está en la lista del menú del primer elemento de ésta, el punto aparece en la derecha en Chrome y Safari.

A ver si alguien me puede ayudar para que en los 4 navegadores se vea muy similar la web. Dejo parte del código de css aquí.

Gracias!

* {
margin: 0;
padding: 0;
}

body {
background-color:#fff;
margin:0 auto;
padding:0;
}

a {
color:#036;
text-decoration:none;
font-weight:700;
}

a:hover {
color:#000;
text-decoration:none;
}

a img {
border:0;
}

ul,ol,dl {
font-family: "Verdana",Tahoma,Arial,sans-serif;
font-size:1em;
margin-right: 5px;
letter-spacing:0em;
}

ul ul,ol ol, li, li {
font-family: "Verdana",Tahoma,Arial,sans-serif;
font-size:.90em;
margin-left:30px;
letter-spacing:0em;
list-style-image:url(../images/menu_arrow.gif);
}

table {
font-family: "Verdana",Tahoma,Arial,sans-serif;
border:5px;
color:#000;
width:650px;
margin:1px 0 0px 0px;
padding:0px 0px 0px 0px;
font-size:.90em;
letter-spacing:0em;
}

caption {
font-family: "Verdana",Tahoma,Arial,sans-serif;
color:#000;
width:480px;
margin:12px 0 8px 0px;
padding:1px 2px 2px 3px;
font-size:1.25em;
text-align:center;
letter-spacing:0em;
}
thead {
border:1px;
color:#000;
width:500px;
margin:1px 0 8px 0px;
padding:1px 2px 2px 3px;
font-family: "Verdana",Tahoma,Arial,sans-serif;
font-size:1em;
letter-spacing:0em;
}

td {
border:solid 1pt;
width:30px;
border-color:#000;
font-family: "Verdana",Tahoma,Arial,sans-serif;
text-align:center;
letter-spacing:0em;
}
th{
border:solid 1pt;
width:30px;
color:#000;
font-family: "Verdana",Tahoma,Arial,sans-serif;
text-align:center;
letter-spacing:0em;
}

form {
font-family:"Verdana", Geneva, sans-serif;
font-size:1em;
color:#000;
}

h1,h2,h3,h4,h5,h6 { margin:0 0 20px;font-family: Arial, Tahoma, "Verdana", Helvetica; color:#349191;line-height:normal; }

p {font-family: Arial, Tahoma, "Verdana", Helvetica; font-size:.95em; margin-top:18px; margin-left:5px; margin-right:65px; line-height:1.7em; text-align:justify;}

h1 { font-size:2em; color:#000; line-height:1.6em; margin-top:30px;}
h2 { font-size:1.6em; color:#006;}
h3 { font-size:1.3em; color:#003;font-family: Arial, Tahoma, "Verdana", Helvetica;}
h4 { font-size:14px;}
h5 { font-size:12px;}
h6 { font-size:11px;}

/*** CAPAS ***/

#wrapper {background-color:#fff; margin: 0 auto; width:1004px;}

#wrapper2 {background: url("../images/wrapper.jpg") no-repeat scroll center top transparent; margin: 0 auto; font-family: Arial, Tahoma, "Verdana", Helvetica; width:100%;}
#wrapper3 { background-color:#000; width:100%; padding:0 5px 5px 0; }

#img {
bottom: 0;
height: 190px;
/* position: absolute;*/
/* right: 0;*/
width: 340px;
margin-top:10px;
margin-right:10px;
float: right;
}

#cabecera {
background: url("../images/wrapper.jpg") no-repeat scroll center top transparent; margin: 0 auto;
-moz-box-shadow:0px 0px 10px 5px #000;
-webkit-box-shadow: 0px 0px 10px 5px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C 0C0C0,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0 C0C0,direction=125,strength=5);
font-family: Arial, Tahoma, "Verdana", Helvetica;
width:100%; /*px;*/
height:auto;
margin: 0 auto;
float:right;
}

#cabecera2 {
font-family: "Verdana",Tahoma,Arial,sans-serif;
width:140%; /*px;*/
height:140px;
margin-left:-650px;
text-align:left;
float:left;
}
#menu {
background: url("../images/gris.jpg") repeat-y scroll center top transparent; font-family: "Verdana",Tahoma,Arial,sans-serif;
font-size: .90em;
float:left;
line-height:1.7em;
margin-top: 0px;
margin-left:0px;
padding-left:0px;
padding-top:5px;
width:30%; /*195*/
color:#000;
}

#menu li a {
font-family: "Verdana",Tahoma,Arial,sans-serif;
font-size: 1em;
font-weight:700;
padding:5px;
color:#006;
}

#menu ul li a:hover {
font-family: "Verdana",Tahoma,Arial,sans-serif;
font-size: 1em;
font-weight:700;
padding:5px;
color:#00F;
}

#contmen {margin-top:-1080px;}
#conthist {margin-top:-2156px;}
#contmenense {margin-top:-780px;}
#contprema {margin-top:-815px;}
#contcalesc {margin-top:-850px;}
#contaccess {margin-top:-2360px;}
#contasso {margin-top:-80px;}
#contsor {margin-top:-1250px;}
#contactiv {margin-top:-570px;}
#contgaleria {margin-top:-2515px;}
#contfotosasso {margin-top:-680px;}

#contenido {
background: url("../images/gris.jpg") repeat-y scroll center top transparent; font-family: "Verdana",Tahoma,Arial,sans-serif;
font-family: "Verdana",Tahoma,Arial,sans-serif;
float:right;
line-height:1.3em;
margin-left: 5px;
text-align:left;
width:70%;
margin-top: 0px;
}

#cont {float:left; width:100%; -moz-box-shadow:0px 0px 10px 7px #000;
-webkit-box-shadow: 0px 0px 10px 7px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C 0C0C0,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0 C0C0,direction=125,strength=5);
font-family: "Verdana",Tahoma,Arial,sans-serif;
background: url("../images/gris.jpg") repeat-y scroll center top transparent; font-family: "Verdana",Tahoma,Arial,sans-serif;
}
#cont_central {
float:none;
margin-left:15px;
margin-top:-730px;
text-align:left;
}

#contenido2 {
font-family: "Verdana",Tahoma,Arial,sans-serif;
float:right;
line-height:1.3em;
margin:1px;
margin-right:30px;
padding:0;
text-align:left;
width:20%;
margin-top: -210px;
}

#contenidogaleria1 {
font-family: "Verdana",Tahoma,Arial,sans-serif;
float:right;
line-height:1.3em;
padding:0;
text-align:left;
width:100%;
margin-top: -1000px;
}

/*** Footer ***/
#footer {
font-family:"Verdana",Tahoma,Arial,sans-serif;
clear:both;
margin-left:-60;
padding-left:-85px;
width:100%;
font-size:1.005em;
}

#footer p {
font-family:"Verdana",Tahoma,Arial,sans-serif;
font-size:0.8em;
margin:0;
padding:0;
width:100%;
text-align:center;
line-height:1.6em;
}

#footer a {
color:#036;
}

/** CLASES PARA LISTAS (UL, OL, LI) **/
ul, { font-family:"Verdana",Tahoma,Arial,sans-serif; list-style-type:none; color:#000; margin-left:50px; padding-left:40px; }

/* LISTAS DESORDENADAS */
.cfa { margin-top:20px; }

.ass { margin-top:15px; margin-left:310px; }
.horass {margin-left:310px;}
.pass {margin-left:300px; }

.dir {
margin-left:30px;
line-height:1.6em;
font-size:.90em; /*11pt*/
list-style-image:url(../images/menu_arrow.gif);
font-family:"Verdana",Tahoma,Arial,sans-serif;
color:#000;
}

.conserg {
margin-left:30px;
line-height:1.6em;
font-size:.90em; /*11pt*/
list-style-image:url(../images/menu_arrow.gif);
font-family:"Verdana",Tahoma,Arial,sans-serif;
color:#000;
}

.equip {
margin-left:30px;
line-height:1.6em;
font-size:.90em; /*11pt*/
list-style-image:url(../images/menu_arrow.gif);
font-family:"Verdana",Tahoma,Arial,sans-serif;
color:#000;
}

.assoc {
margin-left:340px;
line-height:1.6em;
font-size:.90em; /*11pt*/
list-style-image:url(../images/menu_arrow.gif);
font-family:"Verdana",Tahoma,Arial,sans-serif;
color:#000;
}

.assocactiv {
margin-left:30px;
line-height:1.6em;
font-size:.90em; /*11pt*/
list-style-image:url(../images/menu_arrow.gif);
font-family:"Verdana",Tahoma,Arial,sans-serif;
color:#000;
}

.album {
margin-left:60px;
line-height:1.6em;
font-size:.90em; /*11pt*/
list-style-image:url(../images/menu_arrow.gif);
font-family:"Verdana",Tahoma,Arial,sans-serif;
color:#000;
}

.album2 {
margin-left:390px;
line-height:1.6em;
font-size:.80em; /*11pt*/
list-style-image:url(../images/menu_arrow.gif);
font-family:"Verdana",Tahoma,Arial,sans-serif;
color:#000;
}

.matricula {
margin-left:30px;
line-height:1.5em;
font-size:.90em; /*11pt*/
list-style-image:url(../images/menu_arrow.gif);
font-family:"Verdana",Tahoma,Arial,sans-serif;
color:#000;
}

/*** Various classes ***/

.ptitol {font-family: Arial, Tahoma, "Verdana", Helvetica; font-size:2.5em; margin-left:50px; line-height:1.3em; color:#FFF; margin-top:20px;}
.parraf {margin-right:380px;}

.top-menu {
background: url("../images/box_h3.png") no-repeat scroll center top transparent;
float: left;
height: 35px;
overflow: hidden;
padding: 0 10px;
margin-left:-5px;
margin-top:0px;
padding-right:-5px;
width: 200px;
font-size:1.125em;
font-weight:bold;
}

.maincol_w_left{background: url("../images/gris.jpg") repeat-y scroll center top transparent; font-family: Arial, Tahoma, "Verdana", Helvetica;}

.bloc1 { background-color:#FF9; }
.bloc2 { background-color:#FC9; }
.bloc3 { background-color:#FC3; }
.bloc4 { background-color:#F96; }

.actualVertical a{
list-style-image:url(../images/menu_arrow.gif);
font-size:.85em;
margin-left:0px;
border-bottom:#000 solid;
color:#000;
}

.actualVertical a:hover{
list-style-image:url(../images/menu_arrow.gif);
font-size:.85em;
margin-left:0px;
border-bottom:#000 solid;
color:#00F;
}

kseso? · #2 (**permalink**) 27/02/2012, 13:52

Eso le está ocurriendo porque hace algo nada recomendable, como es flotar un párrafo:

Código HTML:

Ver original<p class="top-menu">El Centre</p>

Lo utiliza como título de cada grupo de enlaces.
Borre de los estilos de .top-menu el flotado

marta1010 · #3 (**permalink**) 28/02/2012, 06:19

Hola,

Gracias por su ayuda. Pero esa línea de código no me refiero, sino que es la siguiente que es una lista... pego el trozo de código...
...
<p class="top-menu">El Centre</p> --> (el título del menú)
<ul>
<li class="actualVertical"><a href="index.html" accesskey="1">El Centre</a></li>
...
</ul>
...

El punto de la lista, del elemento li (el centre) queda desplazado a la derecha, y debería estar a la izquierda como el resto de los elementos li. Esto ocurre en el Chrome y Safari, en IE y Firefox no, el punto aparece en la parte derecha.

Gracias,
Marta

kseso? · #4 (**permalink**) 28/02/2012, 07:33

¿Puede ser que yo no comprendiese su problema?
Porque con lo sugerido por mi yo veo ésto:

¿Dice que lo probó y no le funciona o símplemente ni se molestó en ver qué ocurre si hace lo sugerido?

Si es lo primero me engaño el inspector de Chrome (equivalente al firebug) y por lo tanto me disculpo por hacerle perder su tiempo proponiendo una solucción equivocada.

Si es lo segundo y lo que quiere hacer es lo mostrado en la captura me falta al respeto al decir que algo no funciona sin haberse molestado en probarlo antes de responder.

A la espera de su respuesta para salir de dudas.

marta1010 · #5 (**permalink**) 28/02/2012, 09:54

Pues sí, sí tenía razón usted, ahí estaba el problema, en el float del .top-menu, lo he eliminado y se acabó el problema. Ahora se visualiza perfectamente en los 5 navegadores (ie, firefox, chrome, safari y opera).

He buscado información del tema, preguntando a gente de mi alrededor que también sabe, y he probado a cambiar cosas de los elementos ul y li (listas) pero no se me ha ocurrido cambiar el float de la clase .top-menu, ya que no pensaba que pudiese estar ahí la solución.

Disculpe las molestias ocasionadas. Una vez más, gracias!
Marta