Ayuda con listas

Hola, este es mi primer post, ojala que puedan ayudarme

Estoy intentando diseñar mi primer sitio con CSS y tengo un par de problemillas por ahora.


1º En firefox un grafico se ve desplazado (solucionado: usar bordes css).
2º En Iexplorer la imagen de la lista, la flechita verde, no se ve (solucionado: usar background en vez de imagelist).

Aqui les dejo la pagina: http://www.sosfactory.net/sosblog/
Y Archivo CSS que estoy usando: http://www.sosfactory.net/sosblog/css/estilos.css

Muchas gracias por adelantado
Sergio

Hola.
La principal recomendación que te hago: En css, usa minúsculas.
La segunda: Cuando vayas a usar bloques (como los divs del menu) no es necesario usar imagenes para bordes y color de fondo. Eso lo puedes hacer con el mismo css:

Código :

#tbbox{
border: #color solid 2px;
background-color:#color;
}

Saludos!

Ah!! genial Lunatic, eso me soluciona el primer problema (ademas de muchos dolores de cabeza en el futuro), ahora ya tengo mis bloques de una forma sencillisima , q caña esto de las CSS.

Solo queda el 2º problema.

Gracias

Modifica el CSS:

Código :

#archivelinks ul {  
   list-style:none;
   margin:0;
   padding:0;
   }
#archivelinks li {
   margin:5px;
   padding:0;
   float:left;
   list-style-image: url(../images/flecha.jpg);
   border-bottom: 2px solid #E2E2DA;
   }
#archivelinks li a {
   display:block;
   width:100px;
   padding:4px 0;
   text-decoration:none;
   text-align:left;
   font-size:12px;
   color:#3D3D3D;
   
   }
#archivelinks li a:hover {
   color:#A2C601;
   }

Solo se han eliminado algunos ul o se han modificado de sitio. Prueba a ver si funciona.

Un saludo.

Hola dmvalverde, muchas gracias por tu ayuda

Parece que ese no es el problema, aqui puedes ver el resultado:
http://www.sosfactory.net/sosblog2/

Alguna idea de que esta pasando?

Saludos

Nadie tiene idea de cual podria ser el problema?

Ayudita, please.

Hola, quita ese float:left que esta demás:

Código :

#archivelinks li {   
margin:5px;   
padding:0;   
list-style-image: url(images/flecha.jpg);   
border-bottom: 2px solid #E2E2DA;   
}

Hola Max, gracias por la ayuda, pero parece que eso empeora las cosas, fijate como se veria el menu sin ese float en Firefox:

http://www.sosfactory.net/sosblog/images/cssproblem.jpg

Bueno, a seguir probando

hola....

lo del segundo problema no lo desifro aun, pero seguire pensando lo ke veo es ke el fondo no concuerda con la cabecera....nose si es a gusto el dejar ese margen superior para ke no keden perfectos.....

yo uso opera kisas sea por eso ke lo veo asi no lo se,,,,,

por cierto muy porlija la pagina, ke lastima ke aun no ande....pero ya andara de seguro...suerte

Hola Nakus, muchas gracias, aver si con vuestra ayuda empieza a rodar pronto, por ahora hice bastante progreso

A q te refieres con lo del margen superior? AH! Estoy diseñando para Iexplorer y Firefox... por ahora creo q con eso tengo bastante. Puedes mostrarme un screenshot de Opera?

Con las flechitas a ver si hay suerte.

No duden en comentar cualquier otra cosa que vean equivocada, please.

Saludos

sosfactory escribió:

Estimado, sorry lo vi muy rapido, no es necesario flotar elementos para que salgan alineados uno debajo del otro ya que hacen eso por 'default', probando en mi pc con este codigo se ve bien en FF y explorer 6.0 en win2000

Código :

#archive {
background: url(images/archive.jpg) no-repeat;
width: 146px;
height: 52px;
margin-left: 6px;
margin-top: 7px;
}
#archivelinks ul {     
list-style:none;   
margin:0;   
padding:0;
}
#archivelinks li {   
margin:5px;   
padding:0;   
list-style-image: url(images/flecha.jpg);   
border-bottom: 2px solid #E2E2DA;   
}

Ten cuidado con los margin y padding que pongas, que estos incrementan el tamaño de tu maquetacion, si tienes problemas con exploiter usa las condicionales, date un vistazo a la seccion de tutoriales de css de clab

El problema del por qué no se ven los bullets en IE es que IE no soporta totalmente list-style-image, muchas veces he tenido problemas. Prefiero usar un background-image y algo de padding-left, siempre es una buena alternativa.

Pero ten en mente que la forma idónea y estándar de hacerlo deberia ser usando list-style-image.

Hey Neo, problema resuelto

Use como me dijiste la imagen de fondo con un poco de padding y se ya se ve ok.

Gracias