So wie dies.. im IE aussieht, soll es im FF aussehen! Wie?

    Ich hab mir folgendes html-dokument erstellt und leider nicht bedacht, dass es im FF anders aussieht als im IE. Nun kenn ich mich leider nicht sooo gut aus und brauche eure Hilfe. Schaut euch bitte folgendes im IE an und helft mir es so zu verändern, dass es im FF genauso aussieht.
    Ich hoffe, dass ihr mir helfen könnt.
    _______________________________________

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title></title>
    </head>
    <style type="text/css">
    a:link { font-weight:bold; color:#ff0000; text-decoration:none; }
    a:visited { font-weight:bold; color:#ff0000; text-decoration:none; }
    a:focus { font-weight:bold; color:#ff9900; text-decoration:none; }
    a:hover { font-weight:bold; color:#ff9900; text-decoration:none; }
    a:active { font-weight:bold; color:#ff0000; text-decoration:none; }

    body{
    background-color: #800000;
    color: #000000;
    text-align: center;
    font-family: verdana;
    scrollbar-arrow-color: #ff9900;
    scrollbar-3dlight-color: #800000;
    scrollbar-highlight-color: #FF0000;
    scrollbar-face-color: #800000;
    scrollbar-shadow-color: #FF0000;
    scrollbar-darkshadow-color: #800000;
    scrollbar-track-color: #800000;
    }
    #headnav{
    background-color: #cc0000;
    width: 200px;
    height: 80px;
    border: 2px solid #FF0000;
    float: left;
    padding-top: 16px;
    color: #ff9900;
    font-size: 17px;
    }
    #header{
    background-color: #cc0000;
    height: 80px;
    border: 2px solid #FF0000;
    float: none;
    padding-top: 10px;
    color: #ff9900;
    font-size: 42px;
    }
    #nav{
    background-color: #cc0000;
    width: 200px;
    border: 2px solid #FF0000;
    float: left;
    margin-top: 3px;
    padding: 3px;
    }
    #main{
    background-color: #800000;
    border: 2px solid #FF0000;
    margin-left: 3px;
    margin-top: 3px;
    margin-right: -10px;
    padding: 3px;
    float: left;
    }
    #headmain{
    background-color: #cc0000;
    height: 50px;
    border: 2px solid #FF0000;
    padding-top: 8px;
    margin-bottom: 3px;
    float: none;
    color: #FF0000;
    font-size: 23px;
    }
    #mainmain{
    background-color: #cc0000;
    border: 2px solid #FF0000;
    padding: 5px;
    padding-bottom: 16px;
    padding-top: 16px;
    float: none;
    }
    #footer{
    background-color: #800000;
    border: 2px solid #FF0000;
    margin-top: 3px;
    padding: 3px;
    float: right;
    }
    </style>
    <body>
    <div id="headnav">
    Überschrift

    Nr.1

    </div>
    <div id="header">
    <a name="anfang">Überschrift Nr.2</a>

    </div>
    <div id="nav">
    [url='']Link 01[/url]

    [url='']Link 02[/url]

    [url='']Link 03[/url]

    </div>
    <div id="main">

    <div id="headmain">
    Überschrift Nr.3

    </div>
    <div id="mainmain">
    Text

    </div>
    </div>
    <div id="footer">
    Seitenanfang

    </div>
    </body>
    </html>

    a) des style machste mal in den head, zwischen body und head steht eigentlich nix
    b) zu viele köche verderben den brei.. du hast ne ganz schöne div-suppe....evtl mit spans lösen wenns nur n kurzer text is
    c) ie und ff interpretieren padding ganz anders. der eine nimmt es zu width dazu, der andere zieht es ab. ne allgemeine lösung gibts leider noch nicht...