Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/08/2018, 13:11
Avatar de CrepitantE
CrepitantE
 
Fecha de Ingreso: octubre-2006
Ubicación: Colombia
Mensajes: 421
Antigüedad: 12 años, 7 meses
Puntos: 7
Alguien sabe porqué pasa esto?

Tengo el siguiente código:

HTML:


Código:
   <ul id="footer1">
     <li id="logofacebook1"><a href="#">FACEBOOK</a></li>
	 <li id="logotwitter1"><a href="#">TWITTER</a></li>
	 
   </ul>
CSS:

Código:
#logofacebook1 a {
	text-decoration: none;
	background-image: url('facebook.png');
	background-repeat: no-repeat;
	font-family: Tahoma;	
	color: #DDD;
	padding-left: 30px;
	padding-right: 10px;
	padding-bottom: 5px; 
	padding-top: 5px;
	margin-left: 10px;

	font-weight: bold;
	vertical-align: middle;
	position: relative;
	float: left;
	border: 1px solid red;

}

#logotwitter1 a {
	text-decoration: none;
	background-image: url('facebook.png');
	background-repeat: no-repeat;
	font-family: Tahoma;	
	color: #DDD;
	padding-left: 30px;
	padding-right: 10px;
	padding-bottom: 5px; 
	padding-top: 5px;
	margin-left: 10px;

	font-weight: bold;
	vertical-align: middle;
	position: relative;
	float: left;
	border: 1px solid red;

}


Y me sale la opción Facebook y Twitter como si fuese una escalera. (Le puse el borde a modo esquemático).

------------------------------------------------------------


Solamente cambiando los ID (#) por classes (.) se soluciona. Admito que soy un poco obsesivo-compulsivo y me incomoda usar clases, quiero trabajar con los ID. Alguien sabe porqué pasa esto y si hay manera de trabajar con los ID?

Les agradezco por sus respuestas.
__________________
-