HTML - Problema de margen o borde con imagen en una celda con fondo.. :S

 
Vista:
Imágen de perfil de Medir

Problema de margen o borde con imagen en una celda con fondo.. :S

Publicado por Medir (4 intervenciones) el 03/04/2015 22:12:08
Hola Gente! Llevo unas horas intentando solucionar el problema y no hay manera, a ver si alguien detecta el problema...

Esta es la web

Esta es la tabla que se repite por cada piso que se sube a la web:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<div align="center"><a name="##LOC##"></a>
  <table width="90%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="1%" bgcolor="#FFFFFF"><img src="images/esquinasuperiorizqTABLA.jpg" width="22" height="22" /></td>
      <td colspan="8" bgcolor="#FFFFFF" height="1%"><letra1 style="color: #332F29">##REF##</letra1></td>
      <td width="1%" bgcolor="#FFFFFF"><img src="images/esquinasuperiorderTABLA.jpg" width="22" height="22"/></td>
    </tr>
    <tr>
      <td rowspan="11" bgcolor="#FFFFFF" width="1%">&nbsp;</td>
      <td colspan="8" bgcolor="#FFFFFF"><div align="center">##LINK##<img src="##FOT##" width="80%"></div></td>
      <td rowspan="11" bgcolor="#FFFFFF" width="1%">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="8" bgcolor="#FFFFFF" style="text-align: center; font-size: x-small;">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="8" bgcolor="#332F29"><font color="#FFF"><strong>##LOC## </strong>(##BAR##) </font> <font color="#FFF">##CP##</font></td>
    </tr>
    <tr>
      <td colspan="8" bgcolor="#FFFFFF" height="5">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="8" bgcolor="#FFFFFF"><letra1 style="color: #332F29">##DES##</letra1></td>
    </tr>
    <tr>
      <td colspan="8" bgcolor="#FFFFFF" height="5">&nbsp;</td>
    </tr>
    <tr>
      <td height="1%" bgcolor="#332F29"><div align="left"><img src="images/esquinasuperiorizq.jpg" width="22" height="22"/></div></td>
      <td bgcolor="#332F29"><div align="right"><img src="images/esquinasuperiorder.jpg" width="22" height="22"/></div></td>
      <td bgcolor="#332F29"><div align="left"><img src="images/esquinasuperiorizq.jpg" width="22" height="22" /></div></td>
      <td bgcolor="#332F29"></td>
      <td bgcolor="#332F29"><div align="right"><img src="images/esquinasuperiorder.jpg" width="22" height="22"/></div></td>
      <td bgcolor="#332F29" height="1%"><div align="left"><img src="images/esquinasuperiorizq.jpg" width="22" height="22"/></div></td>
      <td bgcolor="#332F29"></td>
      <td bgcolor="#332F29"><div align="right"><img src="images/esquinasuperiorder.jpg" width="22" height="22"/></div></td>
    </tr>
    <tr>
      <td width="30%" colspan="2" bgcolor="#332F29"><div align="center"><a href="/formulario/0000009cf50003205/index.php?varGET=##REF##" target="_blank" style="font-size: small">CONTACTAR</a></div></td>
      <td width="30%" colspan="3" bgcolor="#332F29"><div align="center"><a href="##TIPO##.htm#INDICE" style="font-size: small">SUBIR</a></div></td>
      <td width="30%" colspan="3" bgcolor="#332F29"><div align="center"><a href="http://maps.google.es/maps?hl=es&q=##REF##%20##LOC##%20##CP##&aql=&oq=&gs_rfai=&um=1&ie=UTF-8&sa=N&tab=wl"  target="_blank" style="font-size: small">MAPA</a></div></td>
    </tr>
    <tr>
      <td height="1%" bgcolor="#332F29"><div align="left"><img src="images/esquinainferiorizq.jpg" width="22" height="22"/></div></td>
      <td height="1%" bgcolor="#332F29"><div align="right"><img src="images/esquinainferiorder.jpg" width="22" height="22"/></div></td>
      <td bgcolor="#332F29"><div align="left"><img src="images/esquinainferiorizq.jpg" width="22" height="22"/></div></td>
      <td bgcolor="#332F29"></td>
      <td bgcolor="#332F29"><div align="right"><img src="images/esquinainferiorder.jpg" width="22" height="22" /></div></td>
      <td height="1%" bgcolor="#332F29"><div align="left"><img src="images/esquinainferiorizq.jpg" width="22" height="22" /></div></td>
      <td height="1%" bgcolor="#332F29"></td>
      <td height="1%" bgcolor="#332F29"><div align="right"><img src="images/esquinainferiorder.jpg" width="22" height="22"/></div></td>
    </tr>
    <tr>
      <td colspan="8" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="8" bgcolor="#FFFFFF"><font style="font-size: large; text-align: center;">##PRE##</font></td>
    </tr>
    <tr>
      <td width="1%"><img src="images/esquinainferiorizqTABLA.jpg" width="22" height="22""/></td>
      <td colspan="8" bgcolor="#FFFFFF" height="1%"></td>
      <td width="1%"><img src="images/esquinainferiorderTABLA.jpg" width="22" height="22" /></td>
    </tr>
  </table>
</div>
<p align="center">&nbsp;</p>

Tengo una imagen con efecto redondeado a cada esquina de la tabla, y tambien a cada esquina de los botones contactar, subir y mapa, y en las partes inferiores siempre se ve el fondo, como si la celda fuera mas alargada que la propia imagen..

A primera vista alguien ve cual es el problema? Gracias..
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
-1
Responder
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Problema de margen o borde con imagen en una celda con fondo.. :S

Publicado por xve (1543 intervenciones) el 04/04/2015 09:10:01
Hola Medir, he revisado tu código, y la verdad es que hay una manera mucho mas sencilla de hacer esos botones con cantos redondeos sin tener que utilizar tablas... el problema que tienes son las tablas, y dependiendo del navegador, puede ser que también se visualice mal.

Con CSS, puedes utilizar de manera sencilla los cantos redondos para los botones... haber que te parece este código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
<head>
    <style>
    .boton {
        display:inline-block;
        background-color:#332F29;
        color:#fff;
        padding:22px 0px;
        width:30%;
        text-align:center;
        border-radius: 30px;
        -moz-border-radius: 30px;
        -webkit-border-radius: 30px;
    }
    </style>
</head>
 
<body>
 
<span class="boton">contactar</span>
<span class="boton">subir</span>
<span class="boton">mapa</span>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
3
Comentar
Imágen de perfil de zerock

Problema de margen o borde con imagen en una celda con fondo.. :S

Publicado por zerock (4 intervenciones) el 06/04/2015 21:53:27
muuuuuuuuuuuuuuuuuuchas gracias!!!!! todo un crack
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar