[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 !!!