clase que añade borde inferior

[rameau1982]

hola,
quiero hacer un css que tenga, por un lado un estilo de ul - li concreto. Por otro lado una clase que añade bordes inferiores. Es para un menú lateral. Lo que yo he pensado no funciona, porque? alguna sugerencia?
Gracias

Código:

#lateral{
	font : 18pt bold Garamond, Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif; 
	color : #00008B;
	float: right;
	width: 240px;
	border-left : 1px solid #696969;
	-moz-border-radius: 10px;
	border-top : 1px solid #696969;
	border-bottom: 1px solid #696969;
	
	
	}
#lateral a {
	font : 12pt Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif;
	color : #00008B;
	width: 200px;
	height: 20px;
          voice-family: "\"}\"";
          voice-family: inherit;
        text-decoration: none;
	img-decoration: none;
        }

#lateral a:link, #lateral a:visited {
        display: inline;
        }

#lateral a:hover, #lateral a:current {
	
    	}
#menu_lateral{
	list-style-image: none; list-style-type: none;
	margin: 0px;
	padding: 0px;
   	}
#menu_lateral li{

	text-align: right;
	padding: 0px 10px 0px 0px;

   	}
.lista{
	border-bottom: 1px solid #696969;
	}

y el html:

Código:

<div id="lateral">
	<ul id="menu_lateral">
	<li class="lista">BARCELONA</li>
  	<li><a href="mobile-world-congress-barcelona.html">MOBILE WORLD CONGRESS</a></li>
	<li><a href="bread-butter-barcelona.html">BREAD & BUTTER</a></li>
	<li>CANNES</li>
	<li><a href="mipim-cannes.html">MIPIM</a></li>
	<li><a href="festival-de-cannes.html">FESTIVAL DE CANNES</a></li>
	<li><a href="cannes-lion.html">CANNES LION</a></li>
	<li><a href="mipcom-cannes.html">MIPCOM</a></li>
	<li><a href="miptv-cannes.html">MIPTV</a></li>
	<li><a href="midem-cannes.html">MIDEM</a></li>
	<li><a href="mapic-cannes.html">MAPIC</a></li>
	</ul>
  </div>

[emiliodeg]

esto se debe a la identificacion o algo asi es el preso de las definiciones
cada etiqueta vale 1
cada clase vale 10
cada id vale 100
y cada style (definido en linea) vale 1000

#menu_lateral li{ // valor 101

.lista{ // vale solamente 10 por ende queda mas abajo y lo pisa el anterior

solucion

cambiar .lista por #menu_lateral .lista

saldos

[Mikmoro]

Iniciado por rameau1982

hola,
quiero hacer un css que tenga, por un lado un estilo de ul - li concreto. Por otro lado una clase que añade bordes inferiores. Es para un menú lateral. Lo que yo he pensado no funciona, porque? alguna sugerencia?

Mmmm... no entiendo qué es lo que no funciona: yo veo un menú en el que el elemento que tiene la clase lista (Barcelona) tiene un borde inferior y el resto no.

¿Qué es exactamente lo que quieres hacer y lo que no te funciona?

[rameau1982]

aparentemente todo tiene que funcionar, pero en la práctica no funciona.
He probado en poner:

#menu_lateral .lista{
border-bottom: 1px solid #696969;
}

y nada... todo igual

el id #lateral es una capa que se situa a la derecha a modo de menú de navegación.
Después hay otra capa #menu_lateral que define el ul - li sin imágenes ni tipo. También hay una clase .lista que añade un borde inferior en donde se use.

La idea es hacer un menú lateral con bordes redondos, separando los elementos de la lista del menú por una barra inferior excepto el último que ya tiene el borde del menú (con su borde redondeado).

Alguna sugerencia?

gracias

[Mikmoro]

Iniciado por rameau1982

La idea es hacer un menú lateral con bordes redondos, separando los elementos de la lista del menú por una barra inferior excepto el último que ya tiene el borde del menú (con su borde redondeado).

Pues chico, sigo sin entender. Con este selector:

border-left : 1px solid #696969;
-moz-border-radius: 10px;
border-top : 1px solid #696969;
border-bottom: 1px solid #696969;margin-right: 10px;

Le dices que tenga tres bordes (left, top y bottom), y es lo que se ve.

El -moz-border-radius sólo funcionará en firefox, porque es una propiedad exclusiva que no funciona en otros navegadores, y es lo que se ve en firefox, los bordes redondeados.

Haces que tengan borde inferior los elementos que tengan la clase "lista", y sólo hay uno:

<li class="lista">BARCELONA</li>

y es en el que se ve un borde inferior. Es decir, que está haciendo todo lo que le pides.

¿Estás hablando de explorer por casualidad?

[rameau1982]

lo estoy viendo con firefox.
El html que he puesto es un ejemplo. Imagina que todos los <li> llevan la clase lista menos el último (porque ya tiene el borde inferior de toda la capa).

Parece que tiene que funcionar pero no...

[rameau1982]

vale, me vais a matar.... he estado guardando el archivo en otro sitio.... por eso no se actualizaba nunca.....

Muchas gracias a todos, duda resuelta!!!!