Ergebnis 1 bis 6 von 6

Thema: Firefox inkompatible Website

  1. #1
    HTML Newbie
    Registriert seit
    01.06.2009
    Ort
    Siegen
    Alter
    40
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Firefox inkompatible Website

    Ich habe unter folgender URL eine Seite zum Test hochgeladen:
    Pizza Treff Siegen
    Im Internet Explorer sieht sie korrekt aus. Im Firefox ist alles durcheinander. Ich wäre für einen Patch, Fix, Lösungsansatz sehr dankbar.

    Ich versuche mal den Quellcode der html und css hier noch einzufügen:

    1. HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="XHTML namespace" lang="de" xml:lang="de">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Pizza Treff Siegen</title>
    <meta name="robots" content="index, follow" />
    <meta name="Description" content="Die beste Pizza der Stadt." />
    <meta name="author" content="Siegener Computer Service" />
    <link href="favicon.ico" rel="shortcut icon" />
    <link href="css/zentrale.css" rel="stylesheet" type="text/css" />
    </head>
    <body id="startseite">
    <div id="oben"></div>
    <div id="container">
    <div id="saeule"><img src="grafiken/saeule.jpg" width="245" height="454" /></div>
    <div id="logo"><img src="grafiken/top2.jpg" width="554" height="200" align="right" /></div>
    <div id="navibereich">
    <ul>
    <li id="navi01"><strong>Startseite</strong></li>
    <li id="navi02"><a href="pizza.html">Pizza</a></li>
    <li id="navi03"><a href="pasta.html">Pasta</a></li>
    <li id="navi04"><a href="salate.html">Salate</a></li>
    <li id="navi05"><a href="imbiss.html">Imbiss</a></li>
    <li id="navi06"><a href="getraenke.html">Getränke</a></li>
    </ul>
    </div>
    <div id="auto"><img src="grafiken/auto.png" width="245" height="130" /></div>
    <div id="karte">
    <p><img src="grafiken/karte-klein.jpg" width="232" height="145" /><br />
    <b>Anfahrt:</b> klicken zum vergr&ouml;&szlig;ern</p>
    </div>
    <div id="fussbereich">
    <ul>
    <li>&copy; <a href="http://www.siegener-computer-service.de">Siegener Computer Service 2009</a></li>
    <li><a href="impressum.html" title="Gesetzliche Pflichtangaben zu dieser Site">Impressum</a></li>
    </ul>
    </div>
    <div id="zeiten">
    <p><b>Montag - Freitag:</b><br />
    12:00 - 14:00 / 17:00 - 23:00
    </p>
    <p><b>Samstag, Sonntag, Feiertag:</b><br />
    17:00 - 23:00
    </p>
    </div>
    </div>
    </body>
    </html>
    2. zentrale.css
    Code:
    /* ================================================== =======
    Zentrales Stylesheet - wird im HEAD der Webseiten aufgerufen 
    Datei: zentrale.css
    Datum: 2009-05-09
    Autor: David Mack
    ================================================== ======== */ 
    /* Reset, Restaurierung und grundlegende Formatierung */ 
    @import url(fundament.css);
    /* Formatierung der Navigation */
    @import url(navi-sliding01.css);
    /* Formatierung für den Bildschirm */
    @import url(bildschirm.css);
    /* Formatierung für den Drucker */
    @import url(druckversion.css);
    /* ======================================
    E N D E zentrale.css
    ====================================== */
    
    3. Bildschirm css
    
    /* ================================================== =======
    Stylesheet zur Formatierung am Bildschirm 
    Datei: bildschirm.css
    Datum: 2009-05-09
    Autor: David Mack 
    ================================================== ======== */
    @media screen { 
    /* ====================================== 
    1. Allgemeine Styles 
    ====================================== */
    body {
    background-color: #353535;
    color: white;
    }
    h1 { padding:0; margin:0; }
    /* Hyperlinks */
    a { text-decoration: none; outline: none;} 
    a:link { color: #d90000; } 
    a:visited { color: #cc6666; }
    a:hover, 
    a:focus { 
    border-bottom: 1px solid #d90000 
    }
    a:active {
    color: white;
    background-color: #d90000;
    }
    
    /* ==================================== 
    2. Styles für die Layoutbereiche 
    ==================================== */
    #oben {
    width: 1px;
    height: 50%;
    float: left;
    margin-bottom: -460px;
    }
    #container {
    position:relative;
    margin: 0 auto;
    height: 920px;
    width: 920px;
    clear: left;
    background-color:#FFFFFF;
    }
    #saeule {
    position:absolute;
    width:245px;
    height:454px;
    z-index:5;
    left: 0px;
    top: 0px;
    background-color: #f6e660;
    }
    #logo {
    position:absolute;
    width:674px;
    height:210px;
    left: 245px;
    top: 0px;
    background-color: #f6e660;
    }
    #logo img{
    padding-right: 15px;
    padding-top: 5px;
    }
    #auto {
    position:absolute;
    width:245px;
    height:130px;
    z-index:8;
    left: 0px;
    top: 708px;
    }
    #zeiten {
    position:absolute;
    width:233px;
    height:86px;
    z-index:11;
    left: 0px;
    top: 454px;
    color: #000;
    padding-left:12px;
    background-color: #f6e660;
    }
    #karte {
    position:absolute;
    width:240px;
    height:167px;
    z-index:10;
    left: 0px;
    top: 541px;
    background-color: #f6e660;
    padding-left: 5px;
    }
    #fussbereich {
    position:absolute;
    width: 200px;
    height: 60px;
    left: 0px;
    top: 844px;
    }
    #fussbereich ul {
    text-align:center; 
    font-size: 80%; 
    font-style: normal; 
    letter-spacing: 2px; 
    padding: 10px; 
    }
    #fussbereich ul li {
    list-style-type: none;
    padding: 0;
    margin: 0;
    color: #F00;
    }
    /* ======================================= 
    E N D E bildschirm.css 
    ======================================= */
    
    4. navi css
    
    /* ================================================== =======
    Stylesheet zur Gestaltung der Navigation 
    Datei: navi-sliding01.css
    Datum: 2008-05-09
    Autor: David Mack
    ================================================== ======== */ 
    @media screen {
    #navibereich {
    position: absolute;
    top: 210px;
    left: 245px;
    width: 654px;
    overflow:hidden; /* containing floats (Alternativ Easy Clearing) */
    color: black;
    background: #f3c600 url(../grafiken/border-bottom.gif) repeat-x left bottom;
    padding: 5px 10px 0px 10px;
    background-color: #f6e660;
    }
    /* Sternchen-Hack für IE6 & Co. */
    * html #navibereich { height:auto;}
    #navibereich ul {
    float: right; 
    width: auto; 
    margin-bottom: 0;
    }
    #navibereich li {
    float:left; 
    width: auto; 
    background: #ffeda0 url(../grafiken/rechts.gif) no-repeat right top; 
    list-style-type: none;
    margin: 0 ;
    margin-right: 0.4em; 
    }
    #navibereich a,
    #navibereich strong {
    display: block; 
    color: black;
    background-color: #ffeda0;
    font-weight: normal; 
    padding: 6px 8px;
    border-bottom: 1px solid #8c8c8c;
    } 
    #navibereich a {
    background: transparent url(../grafiken/links.gif) no-repeat left top; 
    }
    #navibereich a:hover,
    #navibereich a:focus,
    #startseite #navi01 strong, 
    #pizza #navi02 strong,
    #pasta #navi03 strong,
    #salate #navi04 strong,
    #imbiss #navi05 strong,
    #getraenke #navi06 strong
    { 
    background: transparent url(../grafiken/links_aktiv.gif) no-repeat left top; 
    color: black; 
    font-weight: normal; 
    border-bottom-color: white; 
    }
    #navibereich li:hover, 
    #navibereich li:focus, 
    #startseite #navi01,
    #pizza #navi02,
    #pasta #navi03,
    #salate #navi04,
    #imbiss #navi05,
    #getraenke #navi06 {
    background: transparent url(../grafiken/rechts_aktiv.gif) no-repeat top right; 
    color: black; 
    border-bottom-color: white; 
    }
    #navibereich a:active { 
    background: transparent url(../grafiken/links_aktiv.gif) no-repeat left top; 
    color: #d90000;
    text-decoration: underline; 
    } 
    /* Sternchen-Hack, IE < V7 versteht li:hover nicht => einfacher Hover-Effekt */
    * html #navibereich a:hover,
    * html #navibereich a:focus,
    * html #navibereich a:active { 
    background: transparent url(../grafiken/links.gif) no-repeat left top;
    color: #d90000; 
    text-decoration: underline; 
    border-bottom: 1px solid #8c8c8c;
    }
    } /* Ende @media - nicht löschen! */
    /* ======================================
    E N D E navi-sliding.css
    ====================================== */
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von jojo87 (02.06.2009 um 11:25 Uhr) Grund: code-tags ergänzt

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Firefox inkompatible Website

    Verzichte überall auf "position: absolute;" samt top/left-Werten.

    Verwende für den gesamten linken Bereich (Säule/Fuß) einen Div, der links gefloatet ist.

    Verwende einen weiteren Div, wo der gesamte Rest neben dem Linksbereich reinkommt. Dem gib einen margin-left-Wert ensprechend der Breite des linken Bereichs.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    01.06.2009
    Ort
    Siegen
    Alter
    40
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Firefox inkompatible Website

    klang erst plausibel, aber entweder es klappt noch nicht.
    Hier der aktualisierte Code:
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Pizza Treff Siegen</title>
    <meta name="robots" content="index, follow" />
    <meta name="Description" content="Die beste Pizza der Stadt." />
    <meta name="author" content="Siegener Computer Service" />
    <link href="favicon.ico" rel="shortcut icon" />
    <link href="css/zentrale.css" rel="stylesheet" type="text/css" />
    </head>
    <body id="startseite">
    <div id="container">
      <div id="left">
        <p><img src="grafiken/saeule.jpg" width="245" height="454" /></p>
        <p><b>Montag - Freitag:</b><br />
      12:00 - 14:00 / 17:00 - 23:00 </p>
        <p><b>Samstag, Sonntag, Feiertag:</b><br />
          17:00 - 23:00<br />
     <img src="grafiken/karte-klein.jpg" width="232" height="145" /><b>Anfahrt:</b> klicken zum vergr&ouml;&szlig;ern<img src="grafiken/auto.png" width="245" height="130" /></p>
        <ul>
          <li>&copy; <a href="http://www.siegener-computer-service.de">Siegener Computer Service 2009</a></li>
          <li><a href="impressum.html" title="Gesetzliche Pflichtangaben zu dieser Site">Impressum</a></li>
        </ul>
      </div> <!-- Ende left -->
      <div id="right">
       <div id="logo"><img src="grafiken/top2.jpg" width="554" height="200" align="right" /></div>
       <div id="navibereich">
         <ul>
             <li id="navi01"><strong>Startseite</strong></li>
              <li id="navi02"><a href="pizza.html">Pizza</a></li>
              <li id="navi03"><a href="pasta.html">Pasta</a></li>
              <li id="navi04"><a href="salate.html">Salate</a></li>
              <li id="navi05"><a href="imbiss.html">Imbiss</a></li>
              <li id="navi06"><a href="getraenke.html">Getränke</a></li>
         </ul>
     </div>
       </div>
    </div>
    </body>
    </html>
    CSS navi
    Code:
    /*  =========================================================
    Stylesheet zur Gestaltung der Navigation 
    Datei: navi-sliding01.css
    Datum: 2008-05-09
    Autor: David Mack
    ========================================================== */ 
    @media screen {
    #navibereich {
     width: 654px;
     overflow:hidden; /* containing floats (Alternativ Easy Clearing) */
     color: black;
     background: #f3c600 url(../grafiken/border-bottom.gif) repeat-x left bottom;
     padding: 5px 10px 0px 10px;
     background-color: #f6e660;
    }
    /* Sternchen-Hack für IE6 & Co. */
    * html #navibereich { height:auto;}
       #navibereich ul {
          float: right; 
          width: auto; 
          margin-bottom: 0;
       }
       #navibereich li {
          float:left; 
          width: auto; 
          background: #ffeda0 url(../grafiken/rechts.gif) no-repeat right top; 
          list-style-type: none;
          margin: 0 ;
          margin-right: 0.4em; 
       }
       #navibereich a,
       #navibereich strong {
          display: block; 
          color: black;
          background-color: #ffeda0;
          font-weight: normal; 
          padding: 6px 8px;
          border-bottom: 1px solid #8c8c8c;
       }  
       #navibereich a {
          background: transparent url(../grafiken/links.gif) no-repeat left top; 
       }
       #navibereich a:hover,
       #navibereich a:focus,
       #startseite #navi01 strong, 
       #pizza #navi02 strong,
       #pasta #navi03 strong,
       #salate #navi04 strong,
       #imbiss #navi05 strong,
       #getraenke #navi06 strong
       { 
          background: transparent url(../grafiken/links_aktiv.gif) no-repeat left top; 
          color: black; 
          font-weight: normal; 
          border-bottom-color: white; 
       }
       #navibereich li:hover, 
       #navibereich li:focus, 
       #startseite #navi01,
       #pizza #navi02,
       #pasta #navi03,
       #salate #navi04,
       #imbiss #navi05,
       #getraenke #navi06 {
          background: transparent url(../grafiken/rechts_aktiv.gif) no-repeat top right; 
          color: black; 
          border-bottom-color: white; 
       }
       #navibereich a:active { 
          background: transparent url(../grafiken/links_aktiv.gif) no-repeat left top; 
          color: #d90000;
          text-decoration: underline; 
       }  
    /* Sternchen-Hack, IE < V7 versteht li:hover nicht => einfacher Hover-Effekt */
    * html #navibereich a:hover,
    * html #navibereich a:focus,
    * html #navibereich a:active  {  
         background: transparent url(../grafiken/links.gif) no-repeat left top;
         color: #d90000; 
         text-decoration: underline; 
         border-bottom: 1px solid #8c8c8c;
    }
       
       
       
    } /* Ende @media - nicht löschen! */
    /* ======================================
       E N D E navi-sliding.css
       ====================================== */
    CSS Bildschirm
    Code:
    /*  =========================================================
    Stylesheet zur Formatierung am Bildschirm 
    Datei:  bildschirm.css
    Datum:  2009-05-09
    Autor:  David Mack 
    ========================================================== */
    @media screen { 
    /* ====================================== 
       1. Allgemeine Styles 
       ====================================== */
    body {
      background-color: #353535;
      color: white;
    }
    h1 { padding:0; margin:0; }
    /* Hyperlinks */
    a { text-decoration: none; outline: none;} 
    a:link { color: #d90000; } 
    a:visited { color: #cc6666; }
    a:hover, 
    a:focus { 
      border-bottom: 1px solid #d90000 
    }
    a:active {
     color: white;
     background-color: #d90000;
    }
    
    /* ==================================== 
       2. Styles für die  Layoutbereiche 
       ==================================== */
    #container {
     height: 920px;
     width: 920px;
     clear: left;
     background-color:#FFFFFF;
    }
    #left {
     width:245px;
     height:920px;
     float: left;
     background-color: #f6e660;
    }
    #right {
     width:675px;
     height:920px;
     margin-left: 245px;
    }
    #logo {
     width:675px;
     height:210px;
     background-color:#f6e660;;
    }
    #logo img{
     padding-right: 15px;
     padding-top: 5px;
    }
    /* ==================================== 
       3. Sonstige Styles 
       ==================================== */
    /* ======================================= 
       E N D E   bildschirm.css 
       ======================================= */
    Geändert von jojo87 (02.06.2009 um 11:27 Uhr) Grund: code-tags ergänzt

  4. #4
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Firefox inkompatible Website

    Achte auf deine Gesamtbreite bzw. ruf dir das Boxmodell nochmal in Erinnerung!
    #container hat 920px Breite. Das ist also deine Gesamtbreite, in die die beiden gefloateten divs #left und #right reinpassen müssen.
    Aber wenn wir uns die ansehen, fällt auf:

    #left:
    Breite: 245px
    damit Gesamt: 245px.

    #right:
    Breite: 675px
    Abstand links: 245px
    damit Gesamt: 910px.

    #left + #right: 1155px.

    Das ist natürlich viel breiter als die 920px von #container, und somit wird umgebrochen.

    Hier musst du ansetzen.
    Prinzipiell sollte es reichen, wenn du bei #right auf das margin-left verzichtest. Da die Container beide links gefloated sind, ist das überflüssig.
    Und nicht vergessen: wo gefloated wird, muss auch gecleared werden

    Beste Grüße,
    jojo

    PS: Validator-Fehler beheben
    Und nutze das nächste mal bitte die code-tags des Forums, damit dein Quellcode für uns lesbarer wird. Für deine 2 ersten Posts habe ich das korrigiert.
    Geändert von jojo87 (02.06.2009 um 11:38 Uhr)

  5. #5
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Firefox inkompatible Website

    Kleiner Tipp, auch wenn der jz nichts damit zu tun hat:
    verzichte auf @import, da dann im ff die seite rst nac und nach an formatierung erhaelt. Binde besser alle stylesheets mit link ein.
    Zusaetzlivh wuerdeich die komplette seite ueber float zurechtruecken.
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    01.06.2009
    Ort
    Siegen
    Alter
    40
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Firefox inkompatible Website

    Erst einmal danke für die Hilfe.
    Ich denke ich werde den Code etwas verbessern können.
    Der Fehler lag daran, dass ich in der bildschirm.css die schließende Klammer vergessen habe. D.h. es hätte wahrscheinlich jede Lösung funktioniert.

    Trotzdem danke und das nächste mal nutze ich auch die Code Tags.

Ähnliche Themen

  1. Meine Website und meine Probleme mit der Website
    Von Georg Beyer im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 5
    Letzter Beitrag: 11.10.2008, 16:08
  2. Problem mit Website im IE7, in Opera & Firefox okay
    Von secretagent im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 28.03.2008, 18:33
  3. Die optimierte Website, Website-optimierung
    Von ron-mel im Forum Link Tipps
    Antworten: 1
    Letzter Beitrag: 29.06.2007, 16:52
  4. Website Opera/Firefox tauglich machen!!!
    Von Maggi im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 4
    Letzter Beitrag: 01.04.2007, 07:24
  5. Website Firefox angepasst - wie aber in IE anpassen?
    Von cloni im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 29.03.2007, 22:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •