La web no se ve bien con mozilla

Hola!! He hecho una web con el curso paso a paso de ustedes (es genial!!) y cuando la previsualizo con internet explorer se ve bien pero cuando la previsualizo con mozilla....es un caos...todos se descuadra. He mirado varios post donde han puesto soluciones a esto pero lo intenté y no hubo ningún cambio así que lo dejé como estaba. Algo habré hecho mal o no entendí bien los pasos que hay que hacer para solucionarlo...pero espero que podais ayudarme y que lo pueda entender para arreglar ese problema.

No he subido mi web todavia pero aqui les pongo los códigos que tengo.

El html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>C.D.A. Cacharrito Sport</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera"><div id="logotipo">[contenido no disponible]</div>
<div id="navegacion"><ul>
  • Portada
  • El Club
  • Noticias
  • Calendario
  • Galería de Fotos
  • Foro
  • Contacto
  • Enlaces</div>

    <div id="contenido">



    <h1>Bienvenidos a </h1>
    <table>
    <td>[contenido no disponible]</td>
    <td>

    La peña Cacharrito Sport está inmerso en la construcción de esta página web, Raquel Díaz ha elaborado un gran entramado de códigos que están dando este producto.</p>


    Aquí vemos a miembros del club con el ocho veces campeón de rallyes de España.</p></td>
    </table>
    <table>
    <td>[contenido no disponible]</td>
    <td>

    La peña Cacharrito Sport está inmerso en la construcción de esta página web, Raquel Díaz ha elaborado un gran entramado de códigos que están dando este producto.</p>


    Aquí vemos a miembros del club con el ocho veces campeón de rallyes de España.</p></td>
    </table>
    <table>
    <td>[contenido no disponible]</td>
    <td>

    La peña Cacharrito Sport está inmerso en la construcción de esta página web, Raquel Díaz ha elaborado un gran entramado de códigos que están dando este producto.</p>


    Aquí vemos a miembros del club con el ocho veces campeón de rallyes de España.</p></td>
    </table>
    </div>

    <div id="pie"><div id="pieuno"><ul>
  • Foro
  • Contacto</div><div id="piedos">pie dos</div><div id="pietres"><ul>
  • Mapa de la Web</div></div>

    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

  • y aquí la hoja de estilo:
    * {text-indent:0px ; margin:0px ; padding:0px ; border: 0px}
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center ; margin:10px 0px 10px 0px}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center ; margin:10px 0px 10px 0px}
    h3 {text-align: left ; margin:3px 10px 3px 50px}
    table {width:100% ; text-align: center}
    th {height:50px}
    .tra {background-color: orange}
    .trb {background-color: lavender}
    .trc {background-color: LemonChiffon}
    .celda {text-align: center}
    .enlace {text-align: center}
    .menufotos {background-color: #9AC0CD}
    .menufotos a {color: black ; text-decoration: none; display: block}
    .menufotos a:link {}
    .menufotos a:visited {}
    .menufotos a:hover {color: black ; text-decoration:underline; background-color: LightBlue}
    .menufotos a:active {}
    body {background-color: #696969 ; background-image: url(objetos/srts-precantabria-ojeda.jpg) ; background-repeat:no-repeat ; background-position: top center ; height:100% ; text-align: center}
    #global {width:1000px ; margin: 4px auto}
    #curva-superior {background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:1000px ; height: 12px ; overflow : hidden}
    #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
    #logotipo {width:900px ; float:left}
    #navegacion {background-color: black ; border: black 1px solid ; width:1000px ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 5px 15px 10px 5px ; font-size: 20px}
    #navegacion ul { margin-left: 100px}
    #navegacion a {color: white ; text-decoration: none; display: block}
    #navegacion a:link {}
    #navegacion a:visited {}
    #navegacion a:hover {color: black ; text-decoration:underline ; background-color: LightBlue}
    #navegacion a:active {}
    #contenido {background-color: LightBlue ; border-left: black 1px solid ; border-right: black 1px solid ; width:1000px ; height:1000px}
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px ; font-size: 20px}
    #contenido li {text-align: left ; margin:3px 10px 3px 40px}
    #menu {width: 150px ; float:left; text-align:left ; margin-right: 10px ; margin:3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom:5px}
    #menu li {list-style:none; margin: 4px 8px 4px 6px}
    #menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ; background-image: url(objetos/menu-curva-superior.gif)}
    #pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid ; width:1000px ; height: 65px}
    #pie li {list-style: none ; font-size: 12px}
    #pieuno {float:left ; width:150px}
    #piedos {float:left ; width:698px}
    #pietres {float:left ; width:150px}
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:1000px ; height: 12px ; overflow: hidden}
    a {color: brown ; text-decoration: none; display: block}
    a:link {}
    a:visited {}
    a:hover {color: red ; text-decoration:underline; background-color: silver}
    a:active {}
    #pie a {color: blue; text-decoration:none ; display: block}
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:black ; text-decoration:underline ; background-color: white}
    #pie a:active {color:black}
    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {background-color: white}
    #logotipo a:active {}

    Lo siento por hacer que lean todo esto.

    Espero que haya alguna solución. Gracias por todo!!
    Hola de nuevo! Hice todo eso que dijistes pero es que nose que datos poner en estilos.css y en estilos-ie.css. Lo mismo? Puse lo mismo en los 2 y no hubo cambios, y cuando cambiaba alguna cosa tambien se veía mal en el internet explorer.

    Un saludo
    Tienes que jugar con las anchuras, márgenes y paddings de los diferentes divs.

    Imagínate que tienes una web a dos columnas encerrada en un div de 800px:

    Una columna de 200 px y otra columna de 600px. Si en ie se ve bien, perfecto pero si en mozilla ves que la columna de 600px se va hacia abajo, lo que tienes que hacer es probar a sacarle algo de ancho, digamos dejarla en 595px o menos hasta que se coloque bien.

    Ie y mozilla no interpretan igual los códigos. Ie los interpreta a su manera, por eso se recomienda hacer la web para mozilla firefox y luego cuando la termines arreglas el internet explorer pero bueno, tu caso es al revés, viene siendo lo mismo...

    Saludos