Foros del Web » Creando para Internet » CSS »

Tabla y compatibilidad con navegador

Estas en el tema de Tabla y compatibilidad con navegador en el foro de CSS en Foros del Web. Buenas, Tengo un probelma con la compatibilidad de navegadores, la verdad, que tampoco se si la manera en que lo he hecho es la correcta, ...
  #1 (permalink)  
Antiguo 30/05/2009, 05:32
Avatar de OsSk4R  
Fecha de Ingreso: octubre-2006
Ubicación: $this->home
Mensajes: 824
Antigüedad: 11 años, 1 mes
Puntos: 74
Tabla y compatibilidad con navegador

Buenas,

Tengo un probelma con la compatibilidad de navegadores, la verdad, que tampoco se si la manera en que lo he hecho es la correcta, pues me estoy iniciando en esto de css :)

Bueno, comento...

Tengo una tabla, y luego en esa misma tabla adjunto una imagen y un titulo, de tal manera que queda asi (con mozilla):


Como se ve todo esta perfecto, no hay ningun problema, pero si lo miramos con IE, o Chrome:



A los bordes no me refiero...
Me refiero a que si lo apreciaís bien el icono de reportar y el titulo, se va un poco hacia la derecha y la verdad que queda un poco... (excepto en mozilla )

Aqui el código css:
Código css:
Ver original
  1. table.principal {
  2. width:50%;
  3. background-color: #F7FBFF;
  4. font-family: Verdana;
  5. left:500px;
  6. text-align:center;
  7. font-size: 11px;
  8. color: #666;
  9. border: 1px solid #cfdbe3;
  10. -moz-border-radius: 0px 10px 10px 10px;
  11. }
  12. div.titulo{
  13. width:100px;
  14. height:auto;
  15. margin-top:-15px;
  16. left: 365px;
  17. position:absolute;
  18. font-size:12px;
  19. font-family:Verdana;
  20. background-color:#ffffff;
  21. border: 1px solid #cfdbe3;
  22. -moz-border-radius: 10px 10px 0px 0px;
  23. }
  24. div.reporte{
  25. width:20px;
  26. height:20px;
  27. margin-top:0px;
  28. left: 344px;
  29. position:absolute;
  30. background-color:#ffffff;
  31. border: 1px solid #cfdbe3;
  32. -moz-border-radius: 5px 0px 0px 5px;
  33. }

Y el html:
Código html:
Ver original
  1. <br><br>
  2. <div class="titulo">Titulo</div>
  3. <div class="reporte"><img src="images/iconos/aviso6.png"></div>
  4. <table align="center" class="principal">
  5.     <tr>
  6.         <td>
  7. Aqui iria el texto: kjahsdjabndjk hadhas idhasduas gisudhasbid iusdhausighd oidasbd ygfuwebflcovn kjhf uh fjipfnljk hdfigahbgvs ufuia jhuigw<br>
  8. aisgdasihgvbd asohduahdjakeb qipjfjewb iohdfjkqb uibq jjocfknmqk hduasgdh qbedokwswqh jkhcyiqeg prougbzdkfeuh pug
  9. </td>
  10.     </tr>

Como veís, la manera que hago para juntar esa imagen a la tabla es mediante left, poco a poco la he ido trayendo hasta que se ha ajuntado a la misma.

No se si se hace asi o no, pero como ya digo, me estoy iniciando

Un gran saludo y muchas gracias
  #2 (permalink)  
Antiguo 30/05/2009, 10:11
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Tabla y compatibilidad con navegador

Ya que te esas iniciando te aconsejo que en vez de una table uses un <div>, que te evitará problemas y no será tan tedioso. Además te aconsejaría que formatearas lso estilos, con border y margin a 0 y a ver que tal va.
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 30/05/2009, 19:33
Avatar de WillxD  
Fecha de Ingreso: febrero-2009
Ubicación: Lima =D!
Mensajes: 82
Antigüedad: 8 años, 9 meses
Puntos: 3
Respuesta: Tabla y compatibilidad con navegador

Como dice hades87 es recomendable que dejes de usar las tablas y uses <div>.

La siguiente propiedad "-moz-border-radius" (que es la que le da ese efecto de esquinas redondeadas) solo se visualizan en mozilla.

Código:
-moz-border-radius: 10px 10px 0px 0px;
  #4 (permalink)  
Antiguo 04/07/2009, 15:17
Avatar de fmorenop  
Fecha de Ingreso: noviembre-2008
Ubicación: Toledo
Mensajes: 125
Antigüedad: 9 años, 1 mes
Puntos: 16
Sonrisa Respuesta: Tabla y compatibilidad con navegador

Hola, en respuesta a lo que preguntas:

Tu problema es que lo que intentas hacer se hace sólo con una tabla o con unos divs pero la mezcla te obliga a hacer ajustes 'a ojo' y te puedes encontrar con esas pequeñas variaciones.

- Si usas tablas usa una con las celdas necesarias para la maquetación (2 filas por 2 columnas alineando el contenido como te parezca).

- Si usas divs el posicionamiento es libre con lo que, como mucho, este tipo de anomalías no se apreciarán al afectar al conjunto, no sólo a un elemento.

En cualquier caso es estraño que hayas comenzado a maquetar los elementos con divs y, al llegar al texto, tengas una tabla de 1x1. Ese ha sido el problema.

Un saludo.

Pack

P.D.: ¿qué se usa para comer sopa, sentarse y dormir?
  #5 (permalink)  
Antiguo 04/07/2009, 16:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Tabla y compatibilidad con navegador

Hola, DeFFeR.

Creo que hecho así es más parecido en ambos navegadores, más compatible, elegante y sobre todo, mucho más semántico:
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding: 0;}
body {font-family: Verdana;font-size: 11px;}
div.bloque {margin: 30px;}
h2 {width:100px;
font-size:12px;
font-family:Verdana;
background-color:#ffffff;
border: 1px solid #cfdbe3;
border-bottom: none;
-moz-border-radius: 10px 10px 0px 0px;
}
img.icono {float: left;
width:20px;
height:20px;
margin-top:0px;
background-color:#ffffff;
border: 1px solid #cfdbe3;
-moz-border-radius: 5px 0px 0px 5px;
}
p.texto {width:50%;
margin-left: 20px;
background-color: #F7FBFF;
text-align:center;
color: #666;
border: 1px solid #cfdbe3;
-moz-border-radius: 0px 10px 10px 10px;
}
</style>
</head>
<body>
<div class="bloque">
<h2>Titulo</h2>
<img src="images/iconos/aviso6.png" class="icono">
<p class="texto">
Aqui iria el texto: kjahsdjabndjk hadhas idhasduas gisudhasbid iusdhausighd oidasbd ygfuwebflcovn kjhf uh fjipfnljk hdfigahbgvs ufuia jhuigw<br>
aisgdasihgvbd asohduahdjakeb qipjfjewb iohdfjkqb uibq jjocfknmqk hduasgdh qbedokwswqh jkhcyiqeg prougbzdkfeuh pug
</p>
</div>
</body>
</html>
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:02.