Las listas se me mueven!

[samy4ever]

SOLUCIONADO !! Ver 2o post, era una tontería.

Hola!

Me pasa algo raro !



Como veis en la imagen, Dep comercial y Dep tècnic NO estan alineados (Incluso ventas y tecnic estan mal, el último algo más a la izquierda...wtf!).

Sin embargo, el código es así:

Código:

<div id="orga" class="orga">	<!-- Capa organigrama -->
	<h3>Jerarquía de control de la empresa</h3>
	<ul>
		<li> Director general
			<ul>
				<li>Dep. comercial</li>
				<li>Dep. tècnic</li>
				<li>Dep. ventes</li>
			</ul>
		</li>
		<li> Soci 
			<ul>
				<li>Dep. comercial</li>
				<li>Dep. tècnic</li>
				<li>Dep. ventes</li>
			</ul>
		</li>
	</ul>			
	</div>

No le encuentro ningún sentido. Debería ser igual, no?? Y "soci" debería estar a la misma altura que Director General, y también se mueve.

Os pongo el código CSS:

Código:

#orga li{
	list-style-type: square; 
	float: none; 
	position: relative;
	background-color: transparent; 
	border-style: none;
}

#orga li ul{
	float: none; 
	position: relative;
	background-color: transparent; 
	border-style: none;
	margin-left: 2em;
	display:list-item
}
#orga li li{
	list-style-position: inline;
	margin-left: 2em; 
	position: relative;
	background-color: transparent; 
	display:list-item
}

Aunque éste código está machacando al estilo de listas definido préviamente, que no sé si hará falta pero por si acaso...

Código:

#panelControl li {
	float: left;
	position: relative;
	width: 10em;
	text-align: center;
	cursor: default;
	background-color: white;
	border: 1px solid #7d6340;
	border-width: 1px 0;
}

#panelControl ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#panelControl li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;

	font-weight: normal;
	border-right: solid 1px #7d6340;
}


#panelControl li li {
	display: block;
	background-color: white;
	border: 0;
}

#panelControl li:hover ul, li.over ul {
	display: block;
}

A ver si alguien me sabe decir porque se descuadra todo, no sé qué mirar ya :(!