[CSS] Problemas con UL, LI y otros

[jotamachuca]

Hola

Tengo un problema que me tiene shato

El asunto es que quiero hacer un menú dentro de un layer con <ul> y <li>... de manera de que con la Hoja de estilo, definir el color y la imagen del lado izquierdo..

El cuento es que en Firefox el texto comienza de la mitad de la capa, siedno que en IExplorer anda bien... o sea para que se entienda.. en IExplorer se ve así

Código:

Menú
  + Inicio
  + Imagenes
  + Contacto
  + Otros

Pero en el Firefox

Código:

Menú
      + Inicio
      + Imagenes
      + Contacto
      + Otros

Les muestro el codigo

Código:

   <div id="menu_principal">
      <h1>Principal</h1>
         <ul>
            <LI><a href="" > Inf. General</a></LI>
            <li><a href="">Investigaci&oacute;n</a></li>
            <li><a href="">Extensi&oacute;n</a></li>
            <li><a href="">Servicios</a></li>
         </ul>
      <br>
   </div>

y la hoja de estilo

Código:

#menu_principal
{
   width:135;
   float:left;
   padding: 5px 0px 5px 5px ;
}

#menu_principal h1
{
   font: normal bold 12px Georgia;
   color: #663300;
   text-align:center;
}
#menu_principal ul
{
   margin: 5px 0px 5px 10px;
   border-bottom: 1px dashed #DADADA;
   padding-bottom: 6px;
   
}
#menu_principal li
{
   background: url(icono_link.gif) no-repeat 0px 4px;
   color: #687E60;
   text-decoration: none;
   padding: 0px 0px 0px 0px;
   display: block;
}
#menu_principal a
{
  margin-left:15px;
}

Alguna ayuda, ya que acabo de empezar con el CSS, antes a pura tabla

Gracias !!!

[juanchilo]

Prueba poniendo los estilos del UL y el Li de esta manera:

Código HTML:

ul
{
  /* margin: 0px 0px 5px 0px;*/
   border-bottom: 1px dashed #DADADA;
   padding-bottom: 6px;
   padding-left:10px;
   margin-left:10px;
}

li
{
   background: url(icono_link.gif) no-repeat 0px 4px;
   color: #687E60;
   text-decoration: none;
   padding: 0px 0px 0px 0px;
  /*display: block;*/
}

Fijate que anule el margin del Ul y le aplique padding-left , y margin-left con los mismos valores.
Tambien te anule el display:block; esto para que se vean los discos en mozilla.

Prueba como queda ahora!

saludos

[jotamachuca]

Gracias por la ayuda , pero no paso mucho.. o sea se corrio en firefox a la izquierda, pero lo que se movio es mínimo.. en Firefox sigue viendose mal, pero en IExplorer sigue viendose bien...

[jotamachuca]

Hola

Para que se note la pana,. puse unas imagenes

El firefox


El Iexplorer


Saludos

[RoQ]

prueba quitandole el margin-left al elemento a

[jotamachuca]

Sin el margin-left al elemento a obtenemos lo siguiente
firefox


iexplorer


Mas sugerencias ???

[Snake nS]

Una pregunta, para que sirve <ul>¿

Saludos.

[jotamachuca]

UL es un tag HTML para hacer listas, y el LI es para un elemento dentro de la listas

La idea es que uso el UL y el LI porque tengo una lista de direcciones, y lo correcto (IMHO) es que se use una lista para enumerar estos ...

Ahora el drama es por que diantres se ve distinto en firefox y iexplorer, siendo que he probado otras páginas que pululan por la red (de donde (complete con uno de estos : robé, copié, pedí prestado) el ejemplo) y se ven exactamente iguales enm ambos browser...

un ejemplo

http://www.buayacorp.com/

Saludos

[RoQ]

te queda de esa manera porque usas una imagen de background para el icono de la lista, las listas pueden usa images que tu tengas a modo de icono sin usar el bg, te recomiendo que leas acerca de los estilos paa listas
http://www.ignside.net/man/css/listas.php

[KnowDemon]

Tu problema puede radicar en la distinta forma en que IE y Firefox generan el margen de los elementos de lista. Mientras uno da un "padding" en el ul, el otro usa margenes de los li (si no me equivoco)

Prueba definiendo el padding y margin de los ul y los li en su totalidad. Es decir, no solo definas el "margen izquierdo" o el "padding derecho". Defínelos todos (arriba, abajo, izquierda y derecha). Es muy probable que los valores no definidos sean diferentes en ambos navegadores.

También es probable que si el ejemplo lo copiaste igual de algún otro lado donde funcionaba bien, es que tus listas hereden reglas de estilo que en el ejemplo original no estan o visceversa.

[braulito]

Prueba con éste código:

Código:

        #menu_principal ul {
		list-style-type: none;
		padding: auto 15px; /* Juega con esto */
	}
	
	#menu_principal li {
		list-style-image: url('icono_link.gif');
	}

Algunos consejos:

• Si estás usando XHTML y CSS, tienes que escribir todas las etiquetas en minúscula y cerrar todas las etiquetas (por ahi vi un <LI> y un <br>, debería ser <li> y <br />).
• En #menuprincipal defines width:135 pero no le das las unidades, siempre tienes que darle unidades, en este caso estás usando píxeles y sería width:135px;
• Para poner una imagen en las listas no es necesario darle background: blabla, sino usar la propiedad list-style-image: url('tuimagen').
• Si en buayacorp.com lo hice con background, el background está en el link y no en la lista, es para hacer el efecto de movimiento cuando pasas el mouse.