El borde de la imagen no se ajusta a la imagen

Hola sabios de foro!

Pues tengo un problema extraño, hice dos imágenes que son enlaces <a></a> y les puse borde, el problema es que uno de los bordes es más grande que la imagen y se ve un hueco entre la imagen y dicho borde. Horrible!

Lo raro es que hice lo mismo en varias páginas de la web, con distintas imágenes y los bordes quedan perfectos en todas menos en tres.

Les dejo el link a las páginas que se ven mal, los documentos html y mi hoja de estilos, ojalá alguien sepa qué estoy haciendo bien en todas y mal en estas tres :cry:


LINKS:
http://www.anapascoe.com/sirena.html

http://www.anapascoe.com/capilla.html

http://www.anapascoe.com/periodico.html

DOCS HTML:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Pintura</title>
<link rel="stylesheet" href="pintura.css" type="text/css" media="all">

</head>
<body>
<div id="global">

<div id="cabecera"><div id="im">[contenido no disponible]</div></div>

<div id="navegacion"><div id="imagprin"><ul>
  • [contenido no disponible]<span>ANTERIOR</span>
  • [contenido no disponible]<span>INICIO</span>
  • [contenido no disponible]<span>SIGUIENTE</span></div></div>

    <div id="contenido"><div id="menu"><ul><h4>ENGLISH</h4>
  • INICIO
  • PINTURA
  • DIARIO DE LA ARTISTA
  • CONTACTO
  • LINKS</div>
    <div id="inicial">

    </p><p class="centrado">LA SIRENA</p></div>



    </p>

    Los grafitis son un espectáculo en medio de la ciudad, juegan con la perspectiva y con los ambientes. Un joven se
    detiene unos minutos a plena calle y súbitamente se halla sumergido en un mundo marino donde una hermosa sirena parece estar a
    punto de tocarlo. El espíritu mitológico que era la perdición de los marineros, actualmente vive en nuestras fantasías diurnas
    que la reconocen, la recrean y a veces hasta experimentan el temor de su belleza.</p>
    <p class="centrado">[contenido no disponible]</p><p class="centrado">2008</p><p class="centrado">Óleo sobre tela</p><p class="centrado">129 x 56cm</p>
    <p class="derecha"><div id="imagfinnueve"><ul>
  • [contenido no disponible]<span>ANTERIOR</span>
  • <a class=tooltip href="cobre.html">[contenido no disponible]<span>SIGUIENTE</span></div></p>
    <p class="centrado">Sección de Pintura</p>
    </div>
    <div id="fin"><div id="finuno"><ul>


  • </p>
    <h5>DIARIO</h5><h4></h4><h5>Inicio de página</h5>
  • Visitantes
  • <div>

    <a href="http://www.histats.com/es/" target="_blank" title="contador web" ><script type="text/javascript" language="javascript">
    var s_sid = 674668;var st_dominio = 4;
    var cimg = 24;var cwi =200;var che =50;
    </script></a>
    <script type="text/javascript" language="javascript" src="http://s11.histats.com/js9.js"></script>
    <noscript><a href="http://www.histats.com/es/" target="_blank">
    [contenido no disponible]</a>
    </noscript>
    </div>
    </div><div id="findos"><h3>[contenido no disponible]<span>La marioneta de Savan Macha</span></h3><h2>Obra Nueva</h2>

    </p></div></div>

    </div>
    </body>
    </html>





    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Pintura</title>
    <link rel="stylesheet" href="pintura.css" type="text/css" media="all">

    </head>
    <body>
    <div id="global">

    <div id="cabecera"><div id="im">[contenido no disponible]</div></div>

    <div id="navegacion"><div id="imagprin"><ul>
  • [contenido no disponible]<span>ANTERIOR</span>
  • [contenido no disponible]<span>INICIO</span>
  • [contenido no disponible]<span>SIGUIENTE</span></div></div>

    <div id="contenido"><div id="menu"><ul><h4>ENGLISH</h4>
  • INICIO
  • PINTURA
  • DIARIO DE LA ARTISTA
  • CONTACTO
  • LINKS</div>
    <div id="inicial">

    </p><p class="centrado">La Capilla de Hielo o <u>La puerta de los escultores</u></p></div>



    </p>

    Este gabinete representa un lugar extraordinario en medio del invierno. El paisaje en las puertas del gabinete muestra
    "La capilla de hielo" oculta entre los árboles oscuros. Uno de los lienzos interiores, el panel derecho, se llama "Ashanti
    besando a la Valquiria" y describe a una adolescente besando una escultura de hielo que decora los muros helados de la
    capilla. En los otros paneles sin terminar, podremos ver a los escultores trabajando con sus personajes de hielo.</p>
    <p class="centrado">[contenido no disponible]</p><p class="centrado">2008</p><p class="centrado">Óleo sobre tela</p><p class="centrado">120 x 160cm</p>
    <p class="derecha"><div id="imagfinocho"><ul>
  • [contenido no disponible]<span>ANTERIOR</span>
  • <a class=tooltip href="periodico.html">[contenido no disponible]<span>SIGUIENTE</span></div></p><p class="centrado">Sección de Pintura</p>
    </div>
    <div id="fin"><div id="finuno"><ul>


  • </p>
    <h5>DIARIO</h5><h4></h4><h5>Inicio de página</h5>
  • Visitantes
  • <div>

    <a href="http://www.histats.com/es/" target="_blank" title="contador web" ><script type="text/javascript" language="javascript">
    var s_sid = 674668;var st_dominio = 4;
    var cimg = 24;var cwi =200;var che =50;
    </script></a>
    <script type="text/javascript" language="javascript" src="http://s11.histats.com/js9.js"></script>
    <noscript><a href="http://www.histats.com/es/" target="_blank">
    [contenido no disponible]</a>
    </noscript>
    </div>
    </div><div id="findos"><h3>[contenido no disponible]<span>La marioneta de Savan Macha</span></h3><h2>Obra Nueva</h2>

    </p></div></div>

    </div>
    </body>
    </html>






    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Pintura</title>
    <link rel="stylesheet" href="pintura.css" type="text/css" media="all">

    </head>
    <body>
    <div id="global">

    <div id="cabecera"><div id="im">[contenido no disponible]</div></div>

    <div id="navegacion"><div id="imagprin"><ul>
  • [contenido no disponible]<span>ANTERIOR</span>
  • [contenido no disponible]<span>INICIO</span>
  • [contenido no disponible]<span>SIGUIENTE</span></div></div>

    <div id="contenido"><div id="menu"><ul><h4>ENGLISH</h4>
  • INICIO
  • PINTURA
  • DIARIO DE LA ARTISTA
  • CONTACTO
  • LINKS</div>
    <div id="inicial">

    </p><p class="centrado">DEMONIO EN EL TEATRO LEYENDO EL PERIÓDICO</p></div>



    </p>

    El otoño dorado esparce sus colores por el piso del teatro, hace navegar barquitos de papel sobre ríos de flores,
    descansa, se sienta a leer un periódico lleno de eventos peculiares y espera que sus compañeros salgan de escena.</p>


    [contenido no disponible]</p><p class="centrado">2007</p><p class="centrado">Óleo sobre tela</p><p class="centrado">60 x 80cm</p>
    <p class="derecha"><div id="imagfinnueve"><ul>
  • [contenido no disponible]<span>ANTERIOR</span>
  • <a class=tooltip href="corona.html">[contenido no disponible]<span>SIGUIENTE</span></div></p>
    <p class="centrado">Sección de Pintura</p>
    </div>
    <div id="fin"><div id="finuno"><ul>


  • </p>
    <h5>DIARIO</h5><h4></h4><h5>Inicio de página</h5>
  • Visitantes
  • <div>

    <a href="http://www.histats.com/es/" target="_blank" title="contador web" ><script type="text/javascript" language="javascript">
    var s_sid = 674668;var st_dominio = 4;
    var cimg = 24;var cwi =200;var che =50;
    </script></a>
    <script type="text/javascript" language="javascript" src="http://s11.histats.com/js9.js"></script>
    <noscript><a href="http://www.histats.com/es/" target="_blank">
    [contenido no disponible]</a>
    </noscript>
    </div>
    </div><div id="findos"><h3>[contenido no disponible]<span>La marioneta de Savan Macha</span></h3><h2>Obra Nueva</h2>

    </p></div></div>

    </div>
    </body>
    </html>




    HOJA DE ESTILOS

    * {margin:0px ; padding:0px ; border: 0px}
    p {color:#1C1C1C ; text-align: justify ; font-size:1.3em; font-weight: bold}
    h1 {font-size: 1.3em; color: #8B4513 ; font-weight: bold; text-align: center ; margin-top: 20px }
    h2 {font-size: 1.1em; color: #8B4513 ; text-decoration: none ; font-weight: bold; text-align: center ; margin-top: 10px ; margin-left: 105px}
    h3 { text-decoration: none ; text-align: center ; margin-top: 10px ; margin-left: 108px}
    h4 {font-size: 1.2em; color: #8B4513 ; text-decoration: none ; text-align: center ; font-weight: bold ; margin-top: 18px ; margin-bottom: 21px}
    h5 {font-size: 1em; color: #8B4513 ; text-decoration: none ; text-align: center ; margin-top: 18px ; margin-bottom: 15px}
    body {background-color: #BDB76B ; text-align: center ; background-image: url(objetos/pdibody.JPG)}
    #global {width:800px ; margin: 4px auto ; background-color: #CDC673 }
    #cabecera {background-repeat: no-repeat ; width:800px ; height: 250px ; overflow : hidden ; margin: 0px 0px 0px 0px ; background-image: url(objetos/cabecera.JPG)}
    #im { text-align: left ; padding: 60px 40px 0px 100px}
    #navegacion {font-size: 1.1em ; height: 140px }
    #navegacion li {float: left ; margin: 10px 35px 0px 30px }
    #navegacion ul { margin-left: 180px }
    #navegacion p {padding: 0px 0px 0px 0px}
    #contenido {background-image: url(objetos/pcuatrocon.JPG); background-color: #CDC673 ; margin: 0px 0px 0px 0px }
    #contenido p {padding: 25px 25px 2px 50px ; text-indent:15px}
    #derecha p {padding: 20px 20px 0px 0px}
    #inicial p {padding: 50px 20px 0px 50px}
    #final p {padding: 25px 20px 60px 50px}
    #imagprin {background-image: url(objetos/ptresnav.JPG); background-color: #CDC673 ; height: 140px ; width: 800px }
    #imagprin li {float: left ; list-style:none }
    #menu {background-image: url(objetos/pcincomen.JPG); background-color: #BDB76B; width: 150px ; float:left; text-align:center ; margin:3px 30px 3px 3px }
    #menu li { list-style:none ; margin: 25px 15px 25px 12px}
    #ficha {width: 190px ; float:left; text-align:center ; margin:3px 30px 3px 3px }
    #ficha li { list-style:none ; margin: 25px 15px 25px 12px}
    #imagfin { height: 154px ; width: 750px ; padding: 20px 0px 0px 0px}
    #imagfin li {float: left ; list-style:none ; margin: 20px 10px 10px 10px }
    #imagfin ul { margin-left: 50px }
    #imagfindos {height: 164px ; width: 750px }
    #imagfindos li {float: left ; list-style:none ; margin: 0px 20px 10px 10px }
    #imagfindos ul { margin-left: 60px }
    #imagfintres { height: 154px ; width: 750px ; padding: 20px 0px 0px 0px}
    #imagfintres li {float: left ; list-style:none ; margin: 20px 10px 10px 20px }
    #imagfintres ul { margin-left: 30px }
    #imagfincuatro { height: 154px ; width: 750px ; padding: 20px 0px 0px 0px}
    #imagfincuatro li {float: left ; list-style:none ; margin: 20px 10px 10px 10px }
    #imagfincuatro ul { margin-left: 30px }
    #imagfincinco { height: 154px ; width: 750px ; padding: 20px 0px 0px 0px}
    #imagfincinco li {float: left ; list-style:none ; margin: 20px 20px 10px 30px }
    #imagfincinco ul { margin-left: 50px }
    #imagfinseis { height: 154px ; width: 750px ; padding: 20px 0px 0px 0px}
    #imagfinseis li {float: right ; list-style:none ; margin: 20px 60px 10px 10px }
    #imagfinseis ul { margin-left: 70px }
    #imagfinsiete { height: 154px ; width: 750px ; padding: 20px 0px 0px 0px}
    #imagfinsiete li {float: left ; list-style:none ; margin: 20px 60px 10px 10px }
    #imagfinsiete ul { margin-left:330px }
    #imagfinocho { height: 154px ; width: 750px ; padding: 20px 0px 0px 0px}
    #imagfinocho li {float: left ; list-style:none ; margin: 20px 60px 10px 10px }
    #imagfinocho ul { margin-left:250px }
    #imagfinnueve { height: 154px ; width: 750px ; padding: 20px 0px 0px 0px}
    #imagfinnueve li {float: left ; list-style:none ; margin: 20px 60px 10px 10px }
    #imagfinnueve ul { margin-left:150px }
    #pie {background-image: url(objetos/pfinsiete.JPG); background-color: #CDC673 ; font-size: 1.1em ; color:#8B4513}
    #pie p {padding: 10px}
    #fin {background-image: url(objetos/final.JPG); height: 350px ; padding: 72px 0px 30px 0px}
    #finuno { font-size: 1.1em ; color:#8B4513 ; float: left ; width: 395px ; height: 195px }
    #finuno li {list-style: none ; font-weight: bold}
    #findos { font-size: 1.1em ; color:#8B4513 ; float: left ; width: auto }
    .centrado {text-align:center; font-weight: bold }
    .derecha {text-align:right}
    .izquierda {text-align:left}
    a { color:#1C1C1C ; font-size:1.2em ; font-weight: bold ; text-decoration:none ; display: block }
    a:link {}
    a:visited {font-size:1.3em ; color: #8B4513 }
    a:hover {color:#8B6914 ; text-decoration:underline ; background-color:#CDC673}
    a:active {}
    a.enlaceuno {color:#A0522D ; font-size:1.2em ; text-decoration:none ; display: block ; weight: bold}
    a.enlaceuno:link {}
    a.enlaceuno:visited {color: #698B22 }
    a.enlaceuno:hover {color:#F5F5DC ; text-decoration:underline ; background-color:#8B864E}
    a.enlaceuno:active {}
    a.tooltip { position: relative; text-decoration: none !important; color:#8B6914 !important; font-weight:bold !important ;
    font-size: 1.2em !important; border: #8B6914 2px solid}
    a.tooltip:hover {z-index:999; background-color:#EEDC82 }
    a.tooltip span {display: none }
    a.tooltip:hover span {display: block; position: absolute; bottom:8em; right:1em ; padding:5px;
    background-image: url(objetos/tooldos.jpg)!important; background-color: #FFEC8B ; color: #8B3A3A; border: #8B6914 2px solid}
    a.tooltipdos { position: relative; text-decoration: none !important; font-weight:bold !important ;
    font-size: 1.2em !important; border: #8B6914 2px solid}
    a.tooltipdos:hover {z-index:999; background-color:#EEDC82 }
    a.tooltipdos span {display: none }
    a.tooltipdos:hover span {display: block; position: absolute; top:5em; right:1em ; width:auto; padding:5px;
    background-image: url(objetos/tooldos.jpg)!important; background-color: #8FBC8F ; color: #8B3A3A; border: #8B6914 2px solid}
    a.tooltiptres { position: relative; text-decoration: none !important; color:#FFEC8B !important; font-weight:bold !important ;
    font-size: 1.2em !important; border: #8B6914 2px solid}
    a.tooltiptres:hover {z-index:999; background-color:#EEDC82 }
    a.tooltiptres span {display: none }
    a.tooltiptres:hover span {display: block; position: absolute; bottom: 8em; right:0.1em; width:150; padding:5px;
    background-image: url(objetos/tooldos.jpg)!important; background-color: #8FBC8F ; color: #8B3A3A; border: #8B6914 2px solid}
    a.tooltipcuatro { position: relative; text-decoration: none !important; color:#FFEC8B !important; font-weight:bold !important ;
    font-size: 1.2em !important; border: #8B6914 2px solid}
    a.tooltipcuatro:hover {z-index:999; background-color:#EEDC82 }
    a.tooltipcuatro span {display: none }
    a.tooltipcuatro:hover span {display: block; position: absolute; bottom:1em; right:5em ; padding:5px;
    background-image: url(objetos/tooldos.jpg)!important; background-color: #FFEC8B ; color: #8B3A3A; border: #8B6914 2px solid}
  • Hola.


    Entre en tu pagina, pero tarda una eternidad en cargar. Te sugiero que soluciones ese problema antes de seguir adelante.






    Saludos.
    Hola!

    Tarda mucho en cargar? Yo no lo noto, puedo preguntar ¿qué navegador tienes?

    Yo trabajo con dos compus, una tiene explorer y la otra safari.

    ¿Cómo cuánto se tarda? es decir, ¿no abría? Quizá tuvo un problema del servidor. ¿Lo que no abría eran las imágenes?


    Saludos pitufo,

    saludos a los demás del foro también, y si alguien sabe qué hago mal en los bordes, ayuda!!!!!!!!
    Hola,

    es verdad, las páginas tardan un montón en cargar y estoy segura que es por las imágenes. Yo uso el ie 7.

    Por la temática de tu página, las imágenes son muy importantes y te sugiero que hagas lo posible para reducirles el peso. Aquí te dejo unas instrucciones pero, ojo, son para trabajar en photoshop, aunque por ser instrucciones básicas funcionan en varios editores de texto, un momento porfa...

    http://www.comocreartuweb.com/phpBB2/ftopic16626.html

    Ojalá que te sirva. Si el problema con los bordes persiste, te sugiero que los termines de hacer con tu editor de texto, casi no pesarán nada. Pero, espera otras respuestas a ver si dan con los códigos y dime qué tal te ha ido. saludos, :wink:
    ATRÉVETE A VIVIR SIN VIOLENCIA
    :o :o Muchas gracias por los consejos sobre las imágenes, ya reduje todas las que uso de fondo (son un buen!), a ver qué les parece? Ojalá se tarde menos así.

    Fue un muy buen tip, gracias, fue tan bueno que voy a llorar! :cry: :wink:

    Este foro es la neta.

    Los bordes... bueno, no puedo poner la imagen con un borde dibujado porque, de todas formas obedece a un tooltip, de todas formas se va a ver el borde predeterminado, lo raro es que no se ajuste automáticamente. Debería hacerlo, como en todas las demás.

    Que pasen un bonito día y una vez más gracias por lo de las imágenes, una pregunta, los cuadros, osea, las pinturas, no quise reducirlas, ¿se tardan mucho en bajar también? :?:
    se nota que bajaron de peso las imágenes de fondo!!!!!! ahora sí cargan rápido pero, las pinturas siguen demorando y bastante.

    A las pinturas también puedes reducirles el peso y para no perder la nitidez, tienes que ponerle una calidad alta y un buen número de calidad, digamos de 70 u 80 para arriba, como mejor lo veas. Ya tú vas jugando con los números y la nitidez. Esto lo haces en el ps, cuando etás en la pantalla "guardar para web y dispositivos", allí, en el panel derecho se ubican las opciones.

    Prueba y verás. bueno, me alegra que te haya sido de utilidad. Un buen día para ti también. Nos leemos!!! :wink:

    p.d.: gato barbieri, dave valentin, pat metheny, diana krall...