La solucion ha sido un convinado de vuestras ideas y alguna supresión en las
mias, igual no es la mas perfecta del Mundo!, pero funciona.
He creado una capa nueva para contener la lista y a partir de ahi
#botons{
width : 100%;
background-color: #7F1730; }
#llistes1 {
background-color: #FFFF99;}
#llistes2 {
background-color: #66CCFF;}
#llistes3 {
background-color: #FFFFCC;}
ul li{
list-style-type:none;
}
li.img1 {
padding-bottom:0;
margin-bottom:0;
background:url(imatges.gif) 4px 4px no-repeat;
color: #000000;
font-weight: normal;
border-bottom: 1px solid #999999;
line-height: 1.7em;
width: 90%;
padding-left: 8%;
}
li.img2 {
padding-bottom:0;
margin-bottom:0;
color: #FFFFFF;
font-weight: bold;
line-height: 1.8em;
width: 100%;
}
Ahora con el padding-left: 8%;, consigo separar el texto de la imagen como
quiero, y se ve igual con los dos navegadores.
Gracies!
El día 10/07/07, MHU <[EMAIL PROTECTED]> escribió:
>
> Bueno por lo que yo se el problema es que firefox al aplicar un marcador
> de
> tipo imagen deja un espacio por defecto entre la imagen y el texto, cosa
> que
> ie no hace. Por tanto para solucionar el problema con el ie se podría
> hacer
> lo siguinte:
>
> Como supongo que estas listas son un menú y por tanto cada elemento deberá
> ser un link se podría añadir la etiqueta <a></a> a cada elemento y añadir
> dos entradas en el css
>
> ul li a.menu_ie {
> text-decoration:none;
> padding-left:10px /*por ejemplo*/
> }
>
> ul li a.menu_firefox {
> text-decoration:none;
> padding-left:0px;
> }
>
> la razón de tener dos estilos es que en ie la separación entre el marcador
> (imagen) y el texto sería de 10px, pero el inconveniente es que en firefox
> estos 10px se sumarían a la distancia por defecto, lo que provocaría una
> separación excesiva. La solución pasa por aplicar un poco de javascript y
> cargar un estilo diferente para explorer y firefox.
>
> El javascript se cargaría con el onload del bodyu de la página y podría
> ser
> tal como sigue:
>
> <script>
> function iniciar() {
> var elementos_menu = document.getElementsByName("menu");
> if (navigator.appName == "Microsoft Internet Explorer"){
> for (i=0;i<elementos_menu.length;i++){
> elementos_menu[i].className = "menu_ie";
> }
> }
> else {
> for (i=0;i<elementos_menu.length;i++){
> elementos_menu[i].className = "menu_firefox";
> }
> }
> }
> </script>
>
> El html de ls lista debería ser similar a:
>
> <ul>
> <li class="img2">Nivel 1 :
> <div id="llistes1">
> <ul>
> <li class="img1"><a href="" name="menu"
> class="menu_ie">Item</a></li>
> <li class="img1"><a href="" name="menu"
> class="menu_ie">Item</a></li>
> <li class="img1"><a href="" name="menu"
> class="menu_ie">Item</a></li>
> <li class="img1"><a href="" name="menu"
> class="menu_ie">Item</a></li>
> <li class="img1"><a href="" name="menu"
> class="menu_ie">Item</a></li>
> </ul>
> </div> <!-- end div#llistes1 -->
> </li>
>
> Espero haberte servido de ayuda
>
> Un saludo,
>
> Miguel
>
>
>
>
>
>
>
>
> -----Mensaje original-----
> De: [EMAIL PROTECTED] [mailto:
> [EMAIL PROTECTED]
> En nombre de manila lila
> Enviado el: lunes, 09 de julio de 2007 14:43
> Para: Ovillo, la lista de CSS en castellano
> Asunto: Re: [Ovillo] lista
>
> Hola gracias por responder, esto es lo que pongo en el css
>
> ul li{
> list-style-type:none;
> list-style-position: inside;
> margin: 0;
> padding: 0;
> }
>
> li.img1 {
> list-style-image: url(imatges/au.gif);
> font-weight: normal;
> background-position: 2px2%;
> margin: 0;
> padding: 0;
> border-bottom: 1px solid #999999;
> line-height: 1.5em;
>
> }
> li.img2 {
> list-style-image: url(imatges/vert.gif);
> color: #FFFFFF;
> font-weight: bold;
> background-color: #7F1730;
> margin: 0;
> padding: 0;
> line-height: 1.5em;
> list-style: 3px;
>
> }
>
> Se trata de listas anidadas, en las que que he creado unas clases para
> poner
> una imagen distinta en cada nivel, aunque creo que para la separacion
> entre
> la imagen del marcador y el item esto no tiene nada que ver.
>
> <<<<Hasta pronto
>
>
> El día 9/07/07, MHU <[EMAIL PROTECTED]> escribió:
> >
> >
> > Podrías adjuntar el css que aplicas en tu lista. Ya que sin aplicar
> ningún
> > css tanto firefox como ie dejan un espacio entre el caracter y el texto
> > del
> > element de la lista.
> >
> > Un saludo,
> >
> >
> >
> >
> >
> >
> > -----Mensaje original-----
> > De: [EMAIL PROTECTED] [mailto:
> > [EMAIL PROTECTED]
> > En nombre de manila lila
> > Enviado el: sábado, 07 de julio de 2007 7:11
> > Para: [email protected]
> > Asunto: [Ovillo] lista
> >
> > Señores:
> >
> > Después de darle vueltas y mas vueltas...por fin me he decido a
> preguntar,
> > ...
> >
> > La cosa es que tengo una lista, el problema esta entre la distancia de
> > las
> > imagenes de los marcadores y los items correspondientes, en FireFox
> > perfecto, pero en uds. ya saben quien, se pegan, como puedo esponjar esa
> > distancia? algún hack? ...que no encuentro.
> >
> > FireFox
> > # ítem
> > Ese otro
> > #ítem
> >
> > Mil gracias por estar ahí
> > Manila
> > _______________________________________________
> > Lista de distribución Ovillo
> > Para escribir a la lista, envia un correo a [email protected]
> > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> > http://lists.ovillo.org/mailman/listinfo/ovillo
> >
> > _______________________________________________
> > Lista de distribución Ovillo
> > Para escribir a la lista, envia un correo a [email protected]
> > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> > http://lists.ovillo.org/mailman/listinfo/ovillo
> >
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a [email protected]
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a [email protected]
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
