Tabla y compatibilidad con navegador

OsSk4R · #1 (**permalink**) 30/05/2009, 04:32

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 originaltable.principal {
width:50%;
background-color: #F7FBFF;
font-family: Verdana;
left:500px;
text-align:center;
font-size: 11px;
color: #666;
border: 1px solid #cfdbe3;
-moz-border-radius: 0px 10px 10px 10px;
}
div.titulo{
width:100px;
height:auto;
margin-top:-15px;
left: 365px; 
position:absolute;
font-size:12px;
font-family:Verdana;
background-color:#ffffff;
border: 1px solid #cfdbe3;
-moz-border-radius: 10px 10px 0px 0px;
}
div.reporte{
width:20px;
height:20px;
margin-top:0px;
left: 344px; 
position:absolute;
background-color:#ffffff;
border: 1px solid #cfdbe3;
-moz-border-radius: 5px 0px 0px 5px; 
}

Y el html:

Código html:

Ver original<br><br>
<div class="titulo">Titulo</div>
<div class="reporte"><img src="images/iconos/aviso6.png"></div>
<table align="center" class="principal">
    <tr>
        <td>
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
</td>
    </tr>
</table>

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

hades87 · #2 (**permalink**) 30/05/2009, 09:11

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.

WillxD · #3 (**permalink**) 30/05/2009, 18:33

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;

fmorenop · #4 (**permalink**) 04/07/2009, 14:17

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?

Mikmoro · #5 (**permalink**) 04/07/2009, 15:45

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>