Lo primero es aclarar un punto.

NO! Tu diseño no se ve mal en Firefox. Tu diseño se ve bien en Firefox. Fuiste tú quien lo diseñó e implementó así de mal.

Existen los estándares ¿los conoces?. Digamos que son normas que todos debiesen seguir para que ciertas cosas se vean igual en distintas partes. Un estándar podrían ser las medidas y formatos de los CDs... imagínate que en cada país los CDs tuvieran distinto tamaño... o peor, distinta forma!!!... no sevirían para mucho. Pues algo análogo sucede con los estándares web (podes visitar www.w3c.org para muchos más detalles).

Y aquí está el problema. No, el problema no son los estándares en si, el problema es que existen quienes no siguen esos estándares... ¿adivinaste quién?... si... nuestro querido amiguito Microsoft Internet Explorer. Para ser justos, las versiones menores a la 7 tienen serios problemas con los estándares.

Desde mi punto de vista (y así es como trabajo), lo mejor es seguir los siguientes pasos:

1) Diseñar pensando en firefox. Previsualizar en firefox. Una vez todo listo para firefox, seguimos con los demás.

2) Miremos en otro navegador decente como Safari, y quizás corrijamos un par de pixeles por acá y otro par de pixeles por allá para que el diseño quede prácticamente igual en ambos.

3) Mirar cómo se ve el diseño en Microsoft Internet Explorer 7, que si bien sigue siendo bastante bestia, ya se ha domesticado bastante, y en lineas generales (un 99% diría yo) se comporta igual que firefox. Si es necesario, aplicamos una corrección a los estilos con una hija solo para la versión 7.

4) Acá hay que respirar hondo, prender un cigarro,  preparar el mate y miramos como se ve el diseño en microsoft internet explorer 6. Luego de la impresión, la depresión y todo lo demás, aplicamos una hoja de estilos para corregir todo esto.

5) Listo!!!!!... ya tenemos una web que se ve bien, o al menos consistente en practicamente todos los navegadores.

Pero ¿cómo hacemos esas hojas de estilo para coregir

Acá viene el truco. Como se hacen estas correcciones: Simplemente en el head del documento ponemos

<link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />

<!--[if IE 7]>

<link href="estilo_ie7.css" rel="stylesheet" type="text/css" media="screen" />

<![endif]-->

<!--[if lt IE 7]>

<link href="estilo_ie.css" rel="stylesheet" type="text/css" media="screen" />

<![endif]-->

Entonces, en estilo.css tenemos los estilos para fireox, safari y todos los browsers decentes.

Luego estilo_ie7.css se usa solo si es necesario para corregir algo en la versión 7 (por experiencia, los problemas que me da es la posición de botones al lado de elementos de formulario, por lo que esta hoja tiene posiciones relativas para corregir eso).

Y finalmente estilo_ie.css que tiene tooodos los estilos necesarios para corregir el bodrio de explorer 6 e inferiores (usualmente lleno de margin, padding, width, text-indent y similares).

Y eso es todo. Es bastante simple. Es cosa de probar una vez, con todos los browsers abiertos, e ir actualizando para ver cómo se reflejan los cambios en un browser y no en otro según corresponda.

Datos útiles

Muchas veriones de explorer: Para los amiguitos con windows, basta con tener instalado explorer 7 y luego descargar desde http://tredosoft.com/Multiple_IE un programa llamado "Multiple IE" que permite instalar sin problemas todas las versiones antiguas de explorer. Ideal para probar. Yo lo uso y no he tenido problemas.