Bug en google Chrome y Safari

Anglima · #1 (**permalink**) 06/06/2009, 09:57

Saludos a todos!

Vereis, tengo un formulario cuyas partes están diseñadas con css y usando ul y li,no tablas.

Están dispuestas mediante dos columnas con sus respectivos div y a su vez,dentro de otro div que da forma al formulario.

Tanto en IE como en Firefox se ven bien las columnas,con los puntos del li en su sitio, pero en el caso del navegador de Google, pone todos los puntos en la parte izquierda, y deja sin puntos los de la derecha.

Os ha pasado a alguien más este bug?

Lo llamo bug porque no es un defecto del código,en los otros dos navegadores va perfectamente,solo afecta a los "puntos" del li.

Edito para añadir que lo acabo de probar con Safari 4 y también pasa lo mismo.

Sopa · #2 (**permalink**) 06/06/2009, 18:35

Es probable este error siempre uno programa o diseña para un browser y algún problema se presente, te recomiendo verificar las etiquetas que estén todas bien nominadas y cerradas, por otro lado desinstalar crome pasar el ccleaner e instalar nueva version.
saludos, me cuentas.

Anglima · #3 (**permalink**) 08/06/2009, 04:58

Todas las etiquetas están correctamente situadas y cerradas,de hecho,todo sale en su sitio,excepto el puntito.

Los navegadores en los que he detectado el fallo son de nueva instalación e incluso el Chrome comprobado desde dos ordenadores diferentes.

Anglima · #4 (**permalink**) 11/06/2009, 05:55

Vuelvo a subir este hilo para intentar explicar mejor lo que digo con un poco de código:

este es el código html de la página:

Cita:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bug de ul</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div id="centro" />
<br />
<div id="form" />
<ul><li> Punto primero </li>
<li> Punto segundo </li>
<li> Punto tercero </li></ul>
<div id="formde" />
<ul><li> Punto cuarto </li>
<li> Punto quinto </li>
<li> Punto sexto </li></ul>
</body>
</html>

Este,su css:

Cita:

body {
background-color: #FFF;
width:300px;
height:200px;
margin-left:auto;
margin-right:auto;
}

#centro {
width:100%;
height:100%;
border: 5px solid #000000;
background-color: #C63;
text-align:center;
}

#form{ /*Columna Izquierda del formulario */
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align:left;
}

#formde{ /*Columna derecha del formulario */
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align: right;
margin-right:8px;
}

Con este código salen perfectamente visibles dos columnas,a distinta altura,en la que los puntos de la lista salen todos a la izquierda.

Modificamos el css para que queden las dos columnas aproximadamente a la misma altura,vereis como los puntos casi se solapan,pero siguen a la izquierda:

Cita:

#form{ /*Columna Izquierda del formulario */
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align:left;
margin-top:80px;
}

#formde{ /*Columna derecha del formulario */
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align: right;
margin-right:8px;
margin-top:-70px;
}

Que os parece?

P.D.Editado para eliminar el doctype por el tema de los 30 mensajes.

kseso? · #5 (**permalink**) 11/06/2009, 07:58

Lo primero que veo es un error reiterado en tu código:

Cita:

div id="centro" />
<br />
<div id="form" />
<ul><li> Punto primero </li>
<li> Punto segundo </li>
<li> Punto tercero </li></ul>
<div id="formde" />
<ul><li> Punto cuarto </li>
<li> Punto quinto </li>
<li> Punto sexto </li></ul>

Código html:

Ver original<div id="centro">
<br />
    <div id="form">
      <ul>
        <li> Punto primero </li>
        <li> Punto segundo </li>
        <li> Punto tercero </li>
      </ul>
    </div><!-- cierre de "form" -->
    <div id="formde">
      <ul>
        <li> Punto cuarto </li>
        <li> Punto quinto </li>
        <li> Punto sexto </li>
       </ul>
    </div><!--cierre de "formde" -->
</div><!-- cierre de "centro" -->

Arregla eso a ver qué tal

Anglima · #6 (**permalink**) 11/06/2009, 08:35

El resultado es el mismo.De hecho,este código lo he creado para explicar el bug,el original donde lo descubrí,esta tal y como planteas tu,con las etiquetas div cerradas al final.

He probado las dos opciones,cerrando form al principio y luego cerrando formd y centro y directamente cerrando todo al final,pero el resultado,como digo,sigue siendo el mismo.

kseso? · #7 (**permalink**) 11/06/2009, 09:10

Porque estás usando la propiedad text-aling para lo que no es.

Sustituyela por un float a cada uno de los dos "#form".

Código css:

Ver original#form{ /*Columna Izquierda del formulario*/
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
float: left;
}
#formde{ /*Columna derecha del formulario */
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
float: right;
margin-right:8px;
}

Si quieres saber qué ocurre con tus códigos, pon un borde a cada form.
Creo que chrome y safari coloca el bullet al inicio del <li>, y no como ff que lo coloca tomado como referencia el texto contenido en el li.

Un saludo

kseso? · #8 (**permalink**) 11/06/2009, 09:29

Amplio:
Lo que ocurre es que al no definir "list-style-position: inside", cada navegador lo interpreta de forma distinta (si debe ponerlo dentro o fuera de la caja contenedora)
Si a tu código inicial (con text-align) añades:

Cita:

ul {list-style-position: inside;}

verás la diferencia a definirlo así:

Cita:

ul {list-style-position: outside;}

Un saludo

Anglima · #9 (**permalink**) 11/06/2009, 13:39

Despues de realizar lo que me comentas,esto es,sustituir el text-align por float, el único navegador en el que salen las dos columnas es con IE,los demás,lo ponen todo en la misma columna.

Respecto a lo que citas en tu último mensaje,lamento decir que me estás pillando completamente y no sé a que propiedad te refieres.

kseso? · #10 (**permalink**) 11/06/2009, 14:31

Hola Anglima:
Creo que te lié más de loq ue era mi intención. Vamos a ver si consigo explicarme mejor.
Hay una propiedad que indica dónde colocar el "puntito" de las listas, que es "list-style-position" y que admite los valores "inside | outside | inherit".

Te quería decir que ante la ausencia de esa propiedad, cada navegador la interpreta de forma diferente, y por eso ves la diferencia entre FF/IE7 y Chrome/Safari.

En el primer código CSS que publicaste en el mensaje #4 añade:
1º: un borde de 1px a form y formde para que veas hasta donde llega cada caja.
2º: a ese mismo código añade a cada form la propiedad "list-style-position" para que veas sy funcionamiento.

FF/IE7 si no defines la propiedad suponen un valor de inside.
Para Chrome es outside.
Safari no tengo.

Te adjunto una imagen de ese código en Chrome con los tres casos:

Puedes ver más información aquí:

Cita:

outside
La caja del marcador está fuera de la caja de bloque principal. Nota. CSS1 no especificaba la ubicación precisa de la caja de marcador y por razones de compatibilidad, CSS2 se mantiene igualmente ambiguo.

Un saludo

Anglima · #11 (**permalink**) 11/06/2009, 15:19

Ahora si. Puse de nuevo el text-align,porque con float se perdían las dos columnas y como solo era el form del lado derecho el que quedaba mal le añadí el list-style-position:inside y funcionó.

Con safari también funciona.

Lo que yo no sabía,por eso lo tomé como un bug,es que el puntito famoso tenia su propia propiedad css.

El código final quedó así:

Cita:

#centro { /*Ventana principal que contiene todo el formulario */
width:100%;
height:100%;
border: 5px solid #000000;
background-color: #C63;

}

#form{ /*Columna Izquierda del formulario */
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align:left;
margin-top:80px;

}

#formde{ /*Columna derecha del formulario */
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align:right;
margin-right:8px;
margin-top:-70px;
list-style-position:inside;
}

Gracias por tu ayuda kseso?

kseso? · #12 (**permalink**) 11/06/2009, 15:29

De nada Anglina. Por aquí andaremos si surgen más consultas.

Cita:

Lo que yo no sabía,por eso lo tomé como un bug,es que el puntito famoso tenia su propia propiedad css.

Bueno, eso se controla mediante "list-style-type". En el enlace que te puse tienes la información al respecto. Pero si quieres algo más "comprensible" (en el buen sentido, para iniciarse), a mí me resultaron muy útiles hace ahora un año cuando comencé a iniciarme en css esta página:
www.librosweb.es

Un saludo