Menu con listas

[elpese80]

Hola! es la primera vez escribo en este foro. Gracias de antemano por la ayuda que me puedan prestar.

Tengo un menu basado en una lista con el siguiente codigo:

<td class="menu">
<ul class="menuList">
<li><strong><a href="/bla/">bla bla bla</a></strong></li>
<li>
<ul class="submenuList">
<li><a href="/lelele">lelele</a></li>
<li><a href="lilili">lilili</a></li>
</ul>
</li>
</ul>
</td>


El css que lo controla es:


.menu ul{
list-style-type:none;
margin:0px;
padding:0px;

}

.menuList li{
list-style-type:none;
margin:0px;
padding:0px;
}

.menuList li a, .menuList1 li a:focus{
display: block;
background-color: #AD2624;
border: 1px solid #FFFFFF;
margin: 0px;
text-decoration: none;
color: #FFFFFF;
font-family: Verdana,Arial,Helvetica;
font-size: 10px;
padding: 3px;
}

ul.menuList li ul.submenuList{
margin:0px;
padding:0px;
list-style-type:none;
}

.menuList li a:hover {
background-color: #F2E4E4;
border: 1px solid #AD2624;
color:#AD2624;
}


.submenuList li a, .submenuList1 li a:focus {
display: block;
background-color: #E6E6E6;
border: 1px solid #FFFFFF;
margin: 0;
text-decoration: none;
color: #AD2624;
font-family: Verdana,Arial,Helvetica;
font-size: 10px;
padding: 3px;

}


Lo que quiero es que me salga un menu con cuadrados uno debajo de otro. En Firefox funciona perfectamente pero en internet explorer me deja un margen entre bla bla bla y lelele como si hubiera un <br>.

Alguien sabe donde puede estar el fallo??
Gracias

[zerokilled]

el aparente espacio se debe a los bordes de un pixel.

[chotuno]

<td class="menu">
<ul class="menuList">
<li><strong><a href="/bla/">bla bla bla</a></strong></li>
<li style="display:inline;">
<ul class="submenuList">
<li><a href="/lelele">lelele</a></li>
<li><a href="lilili">lilili</a></li>
</ul>
</li>
</ul>
</td>

Esto soluciona tu problema.

El block aplicado a ese li hace que en ie7 guarde un espacio (como si fuese un <br />).

[kseso?]

¿Tienes un doctype declarado y usas algún tipo de reset + css?

No se puede entrar en muchos detalles porque falta código css (si la lista interior es un desplegable)

Chotuno: quiere que se muestren en vertical ("uno debajo de otro") según creí entender yo. Y si estamos en un foro de css utilizando css, queda incongruente sembrar estilos entre las etiquetas del body.

Un saludo

[chotuno]

Iniciado por kseso?

Chotuno: quiere que se muestren en vertical ("uno debajo de otro") según creí entender yo. Y si estamos en un foro de css utilizando css, queda incongruente sembrar estilos entre las etiquetas del body.

En vertical quedan.
Y lo de el estilo en medio del html ya se que es incorrecto pero es la posible solución que encontré, depende ya de él sustituirlo por una clase o buscar una alternativa.

Saludos.

[kseso?]

Iniciado por chotuno

<li style="display:inline;">

Iniciado por chotuno

En vertical quedan.

¿Seguro?
A no ser que algún ancestro tenga definido el width y que su tamaño las obligue a bajar a la línea siguiente es algo improbable que el valor "inline" por sí mismo consiga un apilamiento en la vertical. Al menos hasta donde yo recuerdo.

Un saludo

[chotuno]

Tienes razón pero a veces más vale no buscar la lógica xD si funciona funciona..
Sólo puedo decir que lo probe y lo vi bien, tal cual lo he puesto (añadiendo el resto del código pertiente claro está - <table> etc.)

[kseso?]

Iniciado por chotuno

Tienes razón pero a veces más vale no buscar la lógica xD si funciona funciona..

Sinceramente, ni entiendo ni comprendo semejante planteamiento. Además de encontrarlo de todo punto reprobable.
Pero eso explica muchas de las preguntas y actitudes de estos foros (y las reacciones a ciertas respuestas).

Pero nada, si tu estás a gusto con esa filosofía, a mi me es indiferente por completo.

Un saludo

[elpese80]

Veo que se ha originado una especie de debate. Agradezco a todos vuestras respuesta, ya solucione parte del codigo pero ahora resulta que el menu me funciona perfectamente en IE7, Firefox, Opera, Safari y Chrome, el unico donde no me funciona es en IE6. No tengo ni idea de el porque.

Mi intención es que se vea cada botón uno debajo del otro, sin margenes ni viñetas ni nada, simplemente como sucesiòn.

alguien sabe porque en IE6 no se ve bien?, me sale un espacio debajo de cada li dentro de submenuList.

alguna idea? hay algo en mi codigo incompatible con IE6???

gracias.

Aqui dejo el codigo:

CSS............................................... ...................

.menu ul{
list-style-type:none;
margin:0px;
padding:0px;
}

.menuList li a, .menuList1 li a:focus{
display: block;
background-color: #AD2624;
border: 1px solid #FFFFFF;
margin: 0px;
text-decoration: none;
color: #FFFFFF;
font-family: Verdana,Arial,Helvetica;
font-size: 10px;
padding: 3px;
}

.menuList li a:hover {
background-color: #F2E4E4;
border: 1px solid #AD2624;
color:#AD2624;
text-decoration: none;
}


.submenuList li a, .submenuList1 li a:focus {
display: block;
background-color: #E6E6E6;
border: 1px solid #FFFFFF;
margin: 0;
text-decoration: none;
color: #AD2624;
font-family: Verdana,Arial,Helvetica;
font-size: 10px;
padding: 3px;

}


html.............................................. ...................
<td class="menu">
<ul class="menuList">
<li><strong><a href="/blablabla">blablabla</a></strong>
<ul class="submenuList">
<li><a href="lalala">lalala/a></li>
<li><a href="lelele">lelele</a></li>
<li><a href="lilili">lilili</a></li>
</ul>
</li>
</ul>
</td>

[elpese80]

SOLUCIONADO:

En el css he puesto:



/* IE6 Only */

*html .menuList li{
display:inline;
}

y funciona perfectamente. Muchisimas gracias a todos por vuestra atención.