sombras en la tabla que se deforman

[visona]

tengo estos divs que me crean una sombra, lo que quiero hacer es darle sombra a una tabla, lo que pasa es que en unas paginas me sale bien y en otras pues de pena. ejemplo 1
Aqui me sale bien

Código PHP:

 <div id="tablas" class="blur"> 
<div id="tablas1" class="shadow"> 
<div id="tablas2" class="sombra"> 
 
 <table width="550" border="0"> 
  <tr> 
    <td> 
          <table width="550" border="0" class="tex_normal"> 
            <tr> 
              <td width="43">&nbsp;</td> 
              <td width="18">&nbsp;</td> 
              <td width="230" class="tex_14_rojo">Nombre</td> 
              <td width="67" class="tex_14_rojo">Cantidad</td> 
              <td width="89"><span class="tex_14_rojo">Precio</span></td> 
              <td width="132">&nbsp;</td> 
            </tr> 
          </table> 
           
          <?php do { ?> 
          <table width="550" border="0" class="tex_normal"> 
            <tr> 
              <td width="46" align="center"><a href="../detalle.php?detalle=<?php echo $row_articulos['id_producto']; ?>"><img src="<?php echo $row_articulos['imagen']; ?>" alt="" width="32" height="32" border="0" /></a></td> 
              <td width="18">&nbsp;</td> 
              <td width="227"><?php echo $row_articulos['nombre']; ?></td> 
              <td width="65" align="center" valign="middle"><?php echo $row_articulos['cantidad']; ?></td> 
              <td width="10">&nbsp;</td> 
              <td width="76"><?php echo $row_articulos['pvd']; ?> €</td> 
              <td width="137"><label> 
                <input type="submit" name="button" id="button" value="Eliminar" /> 
                <input name="id" type="hidden" id="id" value="<?php echo $row_articulos['id_apuntados']; ?>" /> 
                <input name="cantidad" type="hidden" id="cantidad" value="0" /> 
                <input name="eliminar" type="hidden" id="eliminar" value="si" /> 
              </label></td> 
            </tr> 
          </table> 
          
          <?php } while ($row_articulos = mysql_fetch_assoc($articulos)); ?>          </td> 
          </tr> 
          </table> 
</div></div></div>  

Aqui me sale el ancho mas grande que la tabla.

Código PHP:

   <div id="tablas" class="blur"> 
<div id="tablas1" class="shadow"> 
<div id="tablas2" class="sombra"> 
 
          <table width="550" border="0" cellspacing="0"> 
            <tr> 
              <td width="10" bgcolor="#FFFFCC">&nbsp;</td> 
              <td bgcolor="#FFFFCC">&nbsp;</td> 
              <td bgcolor="#FFFFCC">&nbsp;</td> 
              <td bgcolor="#FFFFCC">&nbsp;</td> 
              <td>&nbsp;</td> 
            </tr> 
            <tr> 
              <td width="10" bgcolor="#FFFFCC">&nbsp;</td> 
              <td width="90" align="right" bgcolor="#FFFFCC"><div align="right">Nombre</div></td> 
              <td width="8" bgcolor="#FFFFCC">&nbsp;</td> 
            <td width="437" bgcolor="#FFFFCC"><label> 
                <input type="text" name="Nombre" id="Nombre" /> 
              </label></td> 
              <td width="407">&nbsp;</td> 
            </tr> 
            <tr> 
              <td width="10" bgcolor="#FFFFCC">&nbsp;</td> 
              <td bgcolor="#FFFFCC"><div align="right">Categoría</div></td> 
              <td bgcolor="#FFFFCC">&nbsp;</td> 
            <td bgcolor="#FFFFCC"><label> 
                <select name="categoria" id="categoria"> 
                  <?php 
do {   
?> 
                  <option value="<?php echo $row_categoria['id_categoria']?>"<?php if (!(strcmp($row_categoria['id_categoria'], $row_categoria['id_categoria']))) {echo "selected=\"selected\"";} ?>><?php echo $row_categoria['categoria']?></option> 
                  <?php 
} while ($row_categoria = mysql_fetch_assoc($categoria)); 
  $rows = mysql_num_rows($categoria); 
  if($rows > 0) { 
      mysql_data_seek($categoria, 0); 
      $row_categoria = mysql_fetch_assoc($categoria); 
  } 
?> 
            </select> 
              </label></td> 
              <td>&nbsp;</td> 
            </tr> 
            <tr> 
              <td width="10" bgcolor="#FFFFCC">&nbsp;</td> 
              <td bgcolor="#FFFFCC"><div align="right">Descripción</div></td> 
              <td bgcolor="#FFFFCC">&nbsp;</td> 
            <td bgcolor="#FFFFCC"><label> 
                <textarea name="descripcion" id="descripcion" cols="45" rows="5"></textarea> 
              </label></td> 
              <td>&nbsp;</td> 
            </tr> 
            <tr> 
              <td width="10" bgcolor="#FFFFCC">&nbsp;</td> 
              <td bgcolor="#FFFFCC"><div align="right">Imagen</div></td> 
              <td bgcolor="#FFFFCC">&nbsp;</td> 
            <td bgcolor="#FFFFCC"><label> 
                <input type="file" name="imagen" id="imagen" /> 
              </label></td> 
              <td>&nbsp;</td> 
            </tr> 
            <tr> 
              <td width="10" align="right" bgcolor="#FFFFCC">&nbsp;</td> 
              <td align="right" bgcolor="#FFFFCC">PDF</td> 
              <td bgcolor="#FFFFCC">&nbsp;</td> 
              <td bgcolor="#FFFFCC"><input type="file" name="pdf" id="pdf" /></td> 
              <td>&nbsp;</td> 
            </tr> 
            <tr> 
              <td width="10" bgcolor="#FFFFCC">&nbsp;</td> 
              <td bgcolor="#FFFFCC">&nbsp;</td> 
              <td bgcolor="#FFFFCC">&nbsp;</td> 
              <td bgcolor="#FFFFCC"></td> 
              <td>&nbsp;</td> 
            </tr> 
            <tr> 
              <td width="10" bgcolor="#FFFFCC">&nbsp;</td> 
              <td bgcolor="#FFFFCC"><input name="val_vendedor" type="hidden" id="val_vendedor" value="NO" /> 
              <input name="usu" type="hidden" id="usu" value="<?php echo $row_usuario['usuario']; ?>" /></td> 
              <td bgcolor="#FFFFCC">&nbsp;</td> 
              <td bgcolor="#FFFFCC"><input name="button" type="submit" class="boton" id="button" value="¡Lo propongo!" /></td> 
              <td>&nbsp;</td> 
            </tr> 
            <tr> 
              <td width="10" bgcolor="#FFFFCC">&nbsp;</td> 
              <td bgcolor="#FFFFCC"><div align="right"></div></td> 
              <td bgcolor="#FFFFCC">&nbsp;</td> 
            <td bgcolor="#FFFFCC"><label></label></td> 
              <td>&nbsp;</td> 
            </tr> 
          </table> 
</div></div></div>  

Y aqui en IE cuando paso el raton por los divs me desaparecen las imagenes, pero solo las imagenes.

Código PHP:

 <div id="tablas" class="blur"> 
<div id="tablas1" class="shadow"> 
<div id="tablas2" class="sombra"> 
   
        <?php if ($totalRows_comprados > 0) { // Show if recordset not empty ?> 
<p> <span class="Estilo1">Articulos seleccionados:  </span> 
              <?php do { ?>    
              
        
                <?PHP  $i=0; 
 
while ($row_comprados = mysql_fetch_assoc($comprados)){ 
 
$campos[$i][0] = '<td width="138"><div align="center"><a href="detalle.php?detalle='. $row_comprados['id_producto'].'" class="Ntooltip"><img src="'.$row_comprados["imagen"].'" alt="" width="50" height="35" border="0"> 
<span> <h6>'.$row_comprados['nombre'].' 
<br />--------------<br />'.$row_comprados['descripcion'].'</h6></span></a></div></td>'; 
$campos[$i][1] = "<td align=center><h6>Precio: {$row_comprados['pvd']} €</h6></td>" ; 
$campos[$i][2] = "<td align=center><h6>ID: {$row_comprados['id_producto']} €</h6></td>" ; 
 
$i++; 
 
} 
 
 
echo "<table >"; 
 
for($k=0;$k<3;$k++){ 
 
echo "<tr>"; 
 
for($j=0;$j<$i;$j++){ 
 
echo $campos[$j][$k]; 
 
} 
 
echo "</tr>"; 
 
} 
 
echo "</table>"; ?> 
                 
                <?php } while ($row_comprados = mysql_fetch_assoc($comprados)); ?> 
                  </p> 
        <table width="550" border="0" align="center" class="tex_12_rojo"> 
          <tr> 
            <td width="157">&nbsp;<a href="<?php printf("%s?pageNum_comprados=%d%s", $currentPage, max(0, $pageNum_comprados - 1), $queryString_comprados); ?>">Anterior</a> <a href="<?php printf("%s?pageNum_comprados=%d%s", $currentPage, min($totalPages_comprados, $pageNum_comprados + 1), $queryString_comprados); ?>"></a></td> 
            <td width="255">&nbsp;</td> 
            <td width="104"><div align="right"><a href="<?php printf("%s?pageNum_comprados=%d%s", $currentPage, min($totalPages_comprados, $pageNum_comprados + 1), $queryString_comprados); ?>" class="tex_12_rojo"></a><a href="<?php printf("%s?pageNum_comprados=%d%s", $currentPage, min($totalPages_comprados, $pageNum_comprados + 1), $queryString_comprados); ?>" class="tex_12_rojo">Siguiente</a></div></td> 
            <td width="16">&nbsp;</td> 
          </tr> 
                  </table> 
         
        <?php } // Show if recordset not empty ?> 
        </div></div></div>  

¿Alguien me puede dar una solucion o decirme alguna manera de hacer una tabla con sombras que funcione en condiciones?
Un saludo

[kseso?]

¿si este sigue siendo el foro de css, dónde está el css?

[gVenom]

Iniciado por kseso?

¿si este sigue siendo el foro de css, dónde está el css?

me encanta el sarcasmo de algunos, y yo crei que solo era yo

[visona]

Si es que lo quereis todo.... jejejeje

.blur{
color: inherit;
margin-left: 4px;
margin-top: 4px;
}

.shadow,
.sombra{
position: relative;
bottom: 2px;
right: 2px;
}

.shadow{
background-color: #666; /*shadow color*/
color: inherit;
}

.sombra{
background-color: #fff; /*background color of content*/
color: #000; /*text color of content*/
border: 1px solid #000; /*border color*/
padding: .5em 2ex;
}

[kseso?]

Pues con ese css no veo cómo ni con qué.
Tienes dos opciones para crear una sombra a una caja:
---> o con una imagen .png
---> o con box-shadow
Cada una con sus ventajas y desventajas.

Un saludo

[visona]

ya he solucionado el del que me sale mas ancho que la tabla, el problema esta en el div que esta por encima, pero no se por que en IE cuando paso el raton, me desaparece la imagen. Alguna ayuditaaaaa de por que me hace esto y en firefox y el chrome no me lo hace?

[txusweb]

position relative lo arregla todos los parpadeos estraños y desapariciones en ie