No puedo ponerle bordes a las siguientes imágenes.

alvarols · #1 (**permalink**) 08/09/2010, 15:15

Tengo un problema, y es que al tratar de ponerle borde a una imagen, pareciera que solo cierra una parte de la imagen y no toda, aquí les muestro un pantallazo de lo que me refiero:

El código que estoy utilizando es este. Ojalá me puedan ayudar a resolver el problema:

Código HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
	body{font-family:Arial, Helvetica, sans-serif; font-size:36px; font-weight:bold; color:#666;}
	#cuerpo{
		 width:960px;
		 padding: 150px 0 0 0;
		 margin:0 auto;
	}
	#metrogdl{width:210px; height: 210px; float:left; margin:20px; }
	#metrogdl a{width:210px; height: 210px; border:#999 1px solid; padding:10px;-moz-border-radius: 7px; -webkit-border-radius: 7px; }
	#metrogdl a:hover{box-shadow: -10px 10px 10px #CCC; -moz-box-shadow:-10px 10px 10px #CCC; -webkit-box-shadow:-10px 10px 10px #CCC; border:#999 2px solid; }
	#rescatemos{width:200px; height: 200px; float:left; margin:20px;}
	#rescatemos a{width:210px; height: 210px; border:#999 1px solid; padding:10px;-moz-border-radius: 7px; -webkit-border-radius: 7px; }
	#rescatemos a:hover{box-shadow: -10px 10px 10px #CCC; -moz-box-shadow:-10px 10px 10px #CCC; -webkit-box-shadow:-10px 10px 10px #CCC; border:#999 2px solid;}
	#ciudadarbol{width:200px; height: 200px; float:left; margin:20px;}
	#ciudadarbol a{width:210px; height: 210px; border:#999 1px solid; padding:10px;-moz-border-radius: 7px; -webkit-border-radius: 7px; }
	#ciudadarbol a:hover{box-shadow: -10px 10px 10px #CCC; -moz-box-shadow:-10px 10px 10px #CCC; -webkit-box-shadow:-10px 10px 10px #CCC; border:#999 2px solid;}
	img{border:none;}
	
</style>
</head>

<body>
<div id="cuerpo">
Elige el sitio al que deseas entrar<br />
    <div id="metrogdl">
        <a href="http://www.metrogdl.org"><img src="metrogdl.jpg" /></a>
    </div>
    <div id="rescatemos">
    	<a href="http://www.metrogdl.org/?page_id=519"><img src="rescatemos.jpg" /></a>
	</div>
    <div id="ciudadarbol">
    	<a href="http://www.redarbol.blogspot.com"><img src="redarbol.jpg" /></a>
    </div>
</div>
</body>

alvarols · #2 (**permalink**) 08/09/2010, 15:33

Ya lo pude solucionar. Simplemente le puse el img despues del a, así

Código HTML:

#metrogdl{width:210px; height:210px; float:left; margin:20px; }
	#metrogdl a img{width:210px; height:210px; border:#999 1px solid; padding:10px;-moz-border-radius: 7px; -webkit-border-radius: 7px; }
	#metrogdl a:hover img{box-shadow: -10px 10px 10px #CCC; -moz-box-shadow:-10px 10px 10px #CCC; -webkit-box-shadow:-10px 10px 10px #CCC; border:#999 2px solid; }
	#rescatemos{width:210px; height:210px; float:left; margin:20px;}
	#rescatemos a img{width:210px; height:210px; border:#999 1px solid; padding:10px;-moz-border-radius: 7px; -webkit-border-radius: 7px; }
	#rescatemos a:hover img{box-shadow: -10px 10px 10px #CCC; -moz-box-shadow:-10px 10px 10px #CCC; -webkit-box-shadow:-10px 10px 10px #CCC; border:#999 2px solid;}
	#ciudadarbol{width:210px; height:210px; float:left; margin:20px;}
	#ciudadarbol a img{width:210px; height:210px; border:#999 1px solid; padding:10px;-moz-border-radius: 7px; -webkit-border-radius: 7px; }
	#ciudadarbol a:hover img{box-shadow: -10px 10px 10px #CCC; -moz-box-shadow:-10px 10px 10px #CCC; -webkit-box-shadow:-10px 10px 10px #CCC; border:#999 2px solid;}
	img{border:none;}