Compatibilidad con navegadores

[laylu]

Buenas tardes,

Teng o un problema con la visualización de una web en los distintos navegadores que tengo instalados ya que podríamos decir que en cada uno se ve distinta, principalmente por la colocación de los DIVs.

Para colmo, la previsualización de mi web en Firefox 3 y en la preview interna de Aptana para Firefox, se ven distintas !! Almenos el Dreamweaver CS2, que no es tan potente como Aptana (pero no consume nada de RAM, comparativamente ...) se ve igual la previsualización que en el IE6.

Los navegadores son: Firefox 3.0.10, Aptana 1.2.7, Opera 9.64, Chrome 1.0.154.65 e Internet Explorer 6.0.2900.5512.

Qué editor web me recomendáis para trabajar con un mínimo de garantías de que se verá "todo" o que incorpore previsualitzación con más navegadores ?

[dooplanillo]

El problema realmente no viene por el tipo de editor que utilices, sino por las diferencias a la hora de interpretar el codigo que tiene cada navegador. Los elementos tienen unos valores predeterminados en cada navegador, por lo que esto genera una forma diferente de intepretar tus css. Un buena recomendación es que al principio de tu hoja de estilos pongas una serie de reglas para "limpiar y empezar de 0 con todos los navegadores". Seguirás encontrando diferencias, pero muchas menos que antes:

Código:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: normal;
     font-style: normal;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline
}

body {
     line-height: 1
}

:focus {
     outline: 0
}

ol, ul {
     list-style: none
}

table {
     border-collapse: collapse;
     border-spacing: 0
}

blockquote:before, blockquote:after, q:before, q:after {
     content: ""
}

blockquote, q {
     quotes: "" ""
}

input, textarea {
     margin: 0;
     padding: 0
}

hr {
     margin: 0;
     padding: 0;
     border: 0;
     color: #000;
     background-color: #000;
     height: 1px
}

[laylu]

Muchas gracias, me ha ido perfecto. Hasta se han resuelto algunos problema que pensaba afrontar más adelante.

A partir de ahora esta cabecera acompañará cada css que haga.