como maquetar para que sea bien una web en el explorer y en el mozilla?

[rufus]

por ejemplo en una web ke estoy haciendo unas fotos que tienen estos valores:

Código:

<div id="img1"><a href="imagenes/img/1.jpg"rel="lightbox"><img src="imagenes/img/1.jpg"  title="lightbox" width="80" height="80"></a></div>
<div id="img2"><a href="imagenes/img/2.jpg" rel="lightbox"><img src="imagenes/img/2.jpg"  width="80" height="80"></a></div>
<div id="img3"><a href="imagenes/img/3.jpg"rel="lightbox"><img src="imagenes/img/3.jpg" rel="lightbox" width="80" height="80" /></a></div>
<div id="img4"><a href="imagenes/img/4.jpg"rel="lightbox"><img src="imagenes/img/4.jpg" rel="lightbox" width="80" height="80" /></a></div>
<div id="img5"><a href="imagenes/img/5.jpg"rel="lightbox"><img src="imagenes/img/5.jpg" rel="lightbox" width="80" height="80" /></a></div>
<div id="img6"><a href="imagenes/img/6.jpg"rel="lightbox"><img src="imagenes/img/6.jpg" rel="lightbox" width="80" height="80" /></a></div>
<div id="img7"><a href="imagenes/img/7.jpg"rel="lightbox"><img src="imagenes/img/7.jpg" rel="lightbox" width="80" height="80" /></a></div>
<div id="img8"><a href="imagenes/img/8.jpg"rel="lightbox"><img src="imagenes/img/8.jpg" rel="lightbox" width="80" height="80" /></a></div>

css:

Código:

/*css de los cuadros donde van las imagenes ke seran ejecutadas por el lightbox*/

#img1{width:80px; height:80px;float:left; margin-left:40px; margin-top:20px;}
#img2{width:80px; height:80px;float:left;margin-top:20px;}
#img3{width:80px; height:80px;float:left;margin-top:20px;}
#img4{width:80px; height:80px;float:left;margin-top:20px;}
#img5{width:80px; height:80px;float:left;margin-top:20px;}
#img6{width:80px; height:80px;float:left;margin-top:20px;}
#img7{width:80px; height:80px;float:left;margin-top:20px;}
#img8{width:80px; height:80px;float:left; margin-left:40px;margin-top:20px;}

en el mozilla se me ve una manera toda esta galeria de fotos mas a la izquierda de la celda ke las contiene pero en el internet explorer 7 se me ven como unos 15 px mas a la derecha!!!

como tengo que modificar el codigo para que se me vean lo mas parecido posible en ambos navegadores?

otra pregunta a la hora de maquetar texto e imagenes que tengo que tener en cuenta a la hora de utilizar medidas como pixeles o uso "em" o que tengo que usar que entiendan bien los dos navegadores???

[XLogus]

hola
Bueno habria que ver el css de la celda que las contiene, aunque siempre es recomendable resetear el css primero, eso ayuda a hacer paginas crossbrowser

No entiendo xq le diste un ID a cada imagen y luego les aplicaste CSS, con ponerles una clase y una sola linea de css no era suficiente?

[kseso?]

Más sencillo:

Código css:

#contiene_img {/*lo que necesites*/}
a img {{width:80px; height:80px;float:left;margin-top:20px;}
.izquierda {margin-left:40px;}
.derecha { margin-left:40px;}
 

Código html:

<div id="contiene_img">
<a href="http://www.forosdelweb.com/f91/como-maquetar-para-que-sea-bien-web-explorer-mozilla-727246/imagenes/img/...."><img class="izquierda" src="http://www.forosdelweb.com/f91/como-maquetar-para-que-sea-bien-web-explorer-mozilla-727246/imagenes.... /></a>
<a href="imagenes/img/...."><img src="http://www.forosdelweb.com/f91/como-maquetar-para-que-sea-bien-web-explorer-mozilla-727246/imagenes.../></a>
......
<a href="imagenes/img/...."><img class="derecha" src="http://www.forosdelweb.com/f91/como-maquetar-para-que-sea-bien-web-explorer-mozilla-727246/imagenes.... /></a>
</div>
 

El texto mejor siempre en unidades relativas (em, %...) y otros elementos depende de sus particularidades o de lo que pretendas lograr.

Un saludo

[danneg]

yo te recomiendo usar los condicionales css

<--[if IE]>

aqui tu codigo

<[endif]-->

y tambien te recomiendo identificar las fotos con id o class, es mas eficinte y rapido, usa los atributos margin, padding, display, float, position, width, height

ojala y te ayude

[PhpNinja]

Creo que siempre es mejor hacer las paginas usando un explorer para ir comprobando el resultado del CSS....

PERO ....

si lo haces con firefox o con otro, te recomiendo hacer todo el CSS para el navegador que uses. Luego con explorer compruebas la pagina, y todo lo que se tenga que adaptar lo anades en el CSS con un # delante, algo que hara que la declaracion solo sea leida por IE y no por firefox y otros. Es un poco engorroso, porque tienes cosas declaradas 2 veces de distintas formas, pero funciona. Ten en cuenta tambien que CSS va de arriba a abajo, con lo que las declaraciones para IE (precedidas por #) deberian ir al final, porque si despues de una de ellas aparece una sin # , digamos que sobre escribira la anterior declaracion que si llevaba # para ser leida por IE, dado que IE tambien leera las que no lleven #.