Firefox Darstellung

Böhlen

Ich mache für unsere Firma einen Facebookauftritt und möchte dies mit einer kleinen HTML-Seite lösen.
Nun stellt mir Firefox meine Seite nicht korrekt dar.

Der Layer "menu" wird mir im IE korrekt ganz unten angezeigt, jedoch im Firefox irgendwo in der Mitte der Seite.
Kann mir jemand weiterhelfen?

HTML für die Facebook FBML-Seite (viel unnützes zeugs denke ich mal):

HTML

<style>






h2, h3      { 
        text-align: left;
        color: #424242;
        font-size: 16px;
        margin-bottom: 0.4em;
        }


h4        {
        text-align: left;
        color: #424242;
        font-size: 13px;
        margin-bottom: 0.4em;
        font-weight:normal;
        }


h5        {
        font-decoration:underline;
        font-style:normal;
        font-size:10px
        color: #424242;
        }




h6        {
        font-style:normal;
        font-size:5px
        color: #424242;
        font-weight:normal;
        }




fliesstext    {
        text-align: left;
        color: #424242;
        font-size: 12px;
        margin-bottom: 0.4em;
        }




#nav1        {
        border: 1px; 
        solid #ccc;
        background:#fff;
        }




img         {
        border:none;
        }


.spacer        {
        width:500px;
        height:10px;
        }


.spacerteaser    {
        width:158px;
        height:25px;
        }








.header     {
        margin: 0px;
        font-family: 'Century Gothic','Bitstream Vera Sans',Verdana,Helvetica,sans-serif;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-size: 13px;
        line-height: 140%;
        font-size-adjust: none;
        font-stretch: normal;
        color: #444444;
        }






.content    { 
        margin: 0px;
        padding: 10px;
        font-family: 'Century Gothic','Bitstream Vera Sans',Verdana,Helvetica,sans-serif;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-size: 13px;
        line-height: 140%;
        font-size-adjust: none;
        font-stretch: normal; color: #444444;
        }




.welcome     {
        width:500px;    
        height:70px;
        margin-left:10px;
        margin-bottom:10px;
        text-align:left;
        float:left;
        font-family: 'Century Gothic','Bitstream Vera Sans',Verdana,Helvetica,sans-serif;    
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-size: 15px;
        line-height: 140%;
        font-size-adjust: none;
        font-stretch: normal;
        color: #444444;
        }




.news         {
        width:500px;    
        height:176px;
        background-color:#f8f8f8;
        margin-left:10px;
        margin-bottom:10px;
        text-align:left;
        float:left;
        font-family: 'Century Gothic','Bitstream Vera Sans',Verdana,Helvetica,sans-serif;    
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-size: 13px;
        line-height: 140%;
        font-size-adjust: none;
        font-stretch: normal;
        color: #444444;
        border-style:solid;
        border-width:1px;
        border-color:#b4b4b4;
        }




.newsimage     {
        width:248px;    
        height:176px;
        float:left;
        }




.newscontent    {
        width:232px;
        height:156px;
        float:right;
        margin-top:10px;
        margin-right:10px;
        }






.teaserleft     {
        width:30.3%;
        height:300px;
        background-color:#f8f8f8;
        margin-left:10px;
        text-align:left;
        float:left;
        font-family: 'Century Gothic','Bitstream Vera Sans',Verdana,Helvetica,sans-serif;
        font-variant: normal;
        font-weight: bold;
        font-size: 15px;
        line-height: 120%;
        font-size-adjust: none;
        font-stretch: normal;
        color: #444444;
        border-style:solid;
        border-width:1px;
        border-color:#b4b4b4;
        }




.teasercenter     {
        width:30.3%;
        height:300px;
        background-color:#f8f8f8;
        margin-left:10px;
        text-align:left;
        float:left;
        font-family: 'Century Gothic','Bitstream Vera Sans',Verdana,Helvetica,sans-serif;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        font-size: 15px;
        line-height: 120%;
        font-size-adjust: none;
        font-stretch: normal;
        color: #444444;
        border-style:solid;
        border-width:1px;
        border-color:#b4b4b4;
        }




.teaserright     {
        width:30.3%;
        height:300px;
        background-color:#f8f8f8;
        text-align:left;
        margin-right:10px;
        float:right;
        font-family: 'Century Gothic','Bitstream Vera Sans',Verdana,Helvetica,sans-serif;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        font-size: 15px;
        line-height: 120%;
        font-size-adjust: none;
        font-stretch: normal;
        color: #444444;
        border-style:solid;
        border-width:1px;
        border-color:#b4b4b4;
        }




.teasertitel    {
        width:158px;
        height:40px
        vertical-align:middle;
        margin-top:2px;
        margin-left:10px;
        text-align:left;
        font-family: 'Century Gothic','Bitstream Vera Sans',Verdana,Helvetica,sans-serif;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        font-size: 15px;
        line-height: 120%
        }




.teaserbild    {
        width:100px;
        height:93px;
        margin-left:0px;
        margin-top:15px;
        }




.teasertext    {
        width:154px;
        height:180px;
        margin-left:5px;
        margin-top:10px;
        text-align:left;
        font-family: 'Century Gothic','Bitstream Vera Sans',Verdana,Helvetica,sans-serif;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-size: 13px;
        line-height: 120%;
        font-size-adjust: none;
        font-stretch: normal;
        color: #444444;
        }




.menu    {
        width:98%;
        height:165px;
        margin-left:5px;
        margin-top:10px;
        text-align:left;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-size: 10px;
        line-height: 120%;
        font-size-adjust: none;
        font-stretch: normal;
        color: #444444;
        border-top-style:solid;
        border-top-width:1px;
        border-top-color:#797979;
        border-right-style:solid;
        border-right-width:1px;
        border-right-color:#797979;
        border-left-style:solid;
        border-left-width:1px;
        border-left-color:#797979;
        background-color:#f8f8f8;
        }




.menuleft     {
        width:22%;
        height:199px;
        margin-left:10px;
        text-align:left;
        float:left;
        font-variant: normal;
        font-size: 11px;
        line-height: 140%;
        line-height: 120%;
        font-size-adjust: none;
        font-stretch: normal;
        color: #444444;
        }




.menucenter     {
        width:22%;
        height:199px;
        text-align:left;
        float:left;
        font-size: 11px;
        line-height:120%;
        font-size-adjust: none;
        font-stretch: normal;
        color: #444444;
        margin-left:20px;
        }




.menucenter2     {
        width:22%;
        height:199px;
        text-align:left;
        float:left;
        font-size: 11px;
        line-height: 120%;
        font-size-adjust: none;
        font-stretch: normal;
        color: #444444;
        margin-left:35px;
        }




.menuright     {
        width:19%;
        height:199px;
        text-align:left;
        margin-right:0px;
        float:right;
        font-size: 11px;
        line-height: 120%;
        font-size-adjust: none;
        font-stretch: normal;
        color: #444444;
        }    


    


</style>


<!----------------------------------------------------------------------------------------------------------------->




<div class="header">
<img src="http://www.loeb.ch/fileadmin/media/Facebook/header-520px_01.jpg" />
</div>






<!----------------------------------------------------------------------


<div class="content">
<img src="http://www.loeb.ch/fileadmin/media/Facebook/banner-500px.jpg" />


</div>
------------------------------------------->




<!----------------------------------------------------------------------------------------------------------------->






<div class="welcome">
<b>Wilkommen auf dem Facebook-Profil von Loeb</b><br>
<h4>Hier findest du neuste Modetrends, spannende Events und exklusive Wettbewerbe.</h4>
</div>


<!----------------------------------------------------------------------------------------------------------------->




<div class="news">


    <div class="newsimage">
    <img src="http://www.loeb.ch/fileadmin/media/Facebook/kornhausfestival-fb_01.jpg" />
    </div>


    <div class="newscontent">
    <b>Kornhausfestival 2011</b><br>Am Samstag 26. März 2011 findet in Bern das Kornhausfestival statt. Auch dieses Jahr werden im Kornhaus internationale Top-DJ's für eine super Stimmung sorgen.<br><br><a href="http://www.loeb.ch/" target="_blank">Weiterlesen</a>
    </div>



</div>


<!----------------------------------------------------------------------------------------------------------------->




<div class="spacer"></div>


<!----------------------------------------------------------------------------------------------------------------->




<div class="teaserleft">


    <div class="teasertitel">Modetrends</div>

    <div class="teaserbild">
    <img src="http://www.loeb.ch/fileadmin/media/Facebook/mode.jpg" />
    </div>


    <div class="teasertext">Fliesstexte müssen flüssig sein, damit der Text auch fliessen kann. Fliesstexte müssen flüssig sein, damit der Text auch     


    fliessen kann.<br><br>
    <a href="http://www.facebook.com/pages/Franz-Test/149824158415861?sk=app_4949752878#!/pages/Franz-Test/149824158415861?sk=wall">mehr</a>
    </div>






</div>


<!----------------------------------------------------------------------------------------------------------------->






<div class="teasercenter">


    <div class="teasertitel">Schaufenster</div>


    <div class="teaserbild">
    <img src="http://www.loeb.ch/fileadmin/media/Facebook/schaufenster.jpg" />
    </div>


    <div class="teasertext">Fliesstexte müssen flüssig sein, damit der Text auch fliessen kann. Fliesstexte müssen flüssig sein, damit der Text auch     


    fliessen kann.<br><br>
    <a href="http://www.facebook.com/pages/Franz-Test/149824158415861?v=app_6009294086">mehr</a>
    </div>


</div>


<!----------------------------------------------------------------------------------------------------------------->




<div class="teaserright">


    <div class="teasertitel">Events</div>


    <div class="teaserbild">
    <img src="http://www.loeb.ch/fileadmin/media/Facebook/events.jpg" />
    </div>


    <div class="teasertext">Fliesstexte müssen flüssig sein, damit der Text auch fliessen kann. Fliesstexte müssen flüssig sein, damit der Text auch     


    fliessen kann.<br><br>
    <a href="http://www.facebook.com/pages/Franz-Test/149824158415861?v=app_7146470109">mehr</a>
    </div>


</div>


<!----------------------------------------------------------------------------------------------------------------->


<div class="spacer"></div>


<!----------------------------------------------------------------------------------------------------------------->




<div class="menu">




    <div class="menuleft">
        <br><b><u>Über Loeb</u></b><br>
        <a href="http://www.loeb.ch/metanavigation/loeb-ag/geschichte.html">Geschichte</a><br>
        <a href="http://www.loeb.ch/metanavigation/loeb-ag/engagements.html?L=//contact.php">Engagement</a><br>
        <a href="http://www.loeb.ch/metanavigation/loeb-ag/futura-aus-liebe-zur-umwelt.html">Futura</a><br>


        <div class="spacermenu"></div>

        <br><b><u>LoebCard</u></b><br>
        <a href="http://www.loeb.ch/metanavigation/loebcard/loebcard-information.html">Informationen</a><br>
        <a href="http://www.loeb.ch/metanavigation/loebcard/privilegien-partner/papiliorama.html?L=//contact.php&S=S//contact.php">Priviliegien Partner</a><br>
        <a href="http://www.loeb.ch/metanavigation/loebcard/loebcard-antrag.html">LoebCard Antrag</a><br>


    
</div>






    <div class="menucenter">


        <br><b><u>Loebschaufenster</u></b><br>
        <a href="http://www.loeb.ch/metanavigation/loeb-schaufenster/schaufenster-2011.html">Schaufenster 2011</a><br>
        <a href="http://www.loeb.ch/metanavigation/loeb-schaufenster/schaufenster-2010.html?L=S=....html/e107%20%20/contact.php/contact.php">Schaufenster 2010</a><br>
        <a href="http://www.loeb.ch/metanavigation/loeb-schaufenster/schaufenster-2009.html?L=//contact.php&S=S/by">Schaufenster 2009</a><br>
        <a href="http://www.loeb.ch/metanavigation/loeb-schaufenster/schaufenster-2008.html?L=//contact.php&S=S/by">Schaufenster 2008</a><br>


        <div class="spacermenu"></div>


        <br><b><u>Stellen</u></b><br>
        <a href="http://www.loeb.ch/metanavigation/loeb-ag/stellen/offene-stellen.html?L=//contact.php&S=S//contact.php">Offene Stellen</a><br>
        <a href="http://www.loeb.ch/metanavigation/loeb-ag/stellen/grundbildung.html?L=//contact.php&S=S//contact.php">Grundbildung</a><br>
        <a href="http://www.loeb.ch/metanavigation/loeb-ag/stellen/bewerbung.html?L=.html.html.html.html&S=S/contact.php">Bewerbung</a><br>    

    </div>


    <div class="menucenter2">


        <br><b><u>Newsletter</u></b><br>
        <a href="http://www.loeb.ch/metanavigation/newsletter.html?L=.html.html.html.html&S=S/contact.php">Abonnieren</a><br>


        <div class="spacermenu"></div>

        <br><b><u>Standorte</u></b><br>
        <a href="http://www.loeb.ch/metanavigation/loeb-ag/standorte/bern.html?L=//contact.php">Bern</a><br>
        <a href="http://www.loeb.ch/metanavigation/loeb-ag/standorte/biel.html">Biel</a><br>
        <a href="http://www.loeb.ch/metanavigation/loeb-ag/standorte/schoenbuehl.html">Schönbühl</a><br>
        <a href="http://www.loeb.ch/metanavigation/loeb-ag/standorte/thun.html">Thun</a><br>    
    </div>








    <div class="menuright">
        <br><b><u>Kontakt</u></b><br>
        <a href="mailto:***@***.**">***@***.**"</a> <br>
        <a href="http://www.loeb.ch">www.loeb.ch</a>
    </div>


</div>

Alles anzeigen

synaptic

also was du "falsch" gemacht hast:
du hast von anfang an für den ie optimiert.
du hast hier nirgendwo nen anständigen doctype, der nötig ist, um das boxmodell anständig darstellen zu können und du hast keine separaten stylesheets, mit denen du styles für die einzelnen browser festlegst

Tags