Probleme mit Firefox

  • Hallo,
    ich habe mir gestern eine Homepage gebaut, allerdings sind mit dem Betrachten mit Firefox folgende Probleme aufgetreten:


    Das ist der Quelltext der CSS-Datei zur Steuerung:


    #steuerung {
    float: left;
    width:180px;
    padding: 20px;
    background-color: #EEEEEE;
    border: 1px solid black;height: 21px;
    text-align:left; /* Textausrichtung */
    color:black; /* Schriftfarbe */
    margin-top:0px; /* Abstand oben */
    margin-bottom:0px; /* Abstand unten */
    margin-left:0px; /* Abstand links */
    margin-right:0px; /* Abstand rechts */
    }


    #steuerung ul {
    list-style:none; /* keine Aufzählungspunkte */
    }


    #steuerung li {
    margin-left:5px; /* Außenabstand links */
    width:100px; /* Breite des Links */
    border-top:0px black outset; /* Rahmen oben */
    border-left:5px black outset; /* Rahmen links */
    border-bottom:5px black outset; /* Rahmen unten */
    border-right:0px black outset; /* Rahmen rechts */
    margin-top:0px; /* Außenabstand oben */
    padding-top:8px; /* Innenabstand */
    padding-left:8px;
    padding-bottom:8px;
    padding-right:8px;
    }


    Ich will also links die Steuerung mit gesamt grauen Hintergrund. Bei Betrachten mit Firefox hat aber nur die erste Zeile der Tabelle eine graue Hineterlegung mit Rahmen.


    Weiteres Problem:


    body {
    font: 100.00% Verdana, Arial, Helvetica, sans-serif;
    }


    Mit Firefox wird eine serifenhaltige Schrift angezeigt.
    Das sind nur zwei von mehreren Problemen....Ich wäre froh, wenn mir jemand helfen kann!
    Danke,
    lg Lukas

  • Klingen alle ein wenig seltsam, deine Probleme.
    Wie genau wird denn die Schrift bei dir angezeigt? Ist es Serif (mit wirklichen Serifen) oder Serif Sans?
    Eine Möglichkeit wäre, dass du weder Arial noch Helvetica installiert hast, was aber immer noch nicht erklären würde, warum eine Schriftart mit Serifen dargestellt wird.


    Zu dem ersten Problem:
    Wäre es möglich, dass du den Quelltext aus deiner HTML-Datei postest. Es ist natürlich wichtig, dass id="steuerung" auch im <table>-Tag steht und nicht im <tr>-Tag. Wenn letzteres bei dir der Fall ist, wird natürlich vollkommen berechtigt auch nur die erste Zeile grau hinterlegt dargestellt.



    Wenn du noch andere Probleme hast, dann immer her damit :)

  • das ist der html-quelltext...was mich halt wundert is dass der internet explorer das alles richtig anzeigt...und zu den schrift: es wird Times New Roman angezeigt.


    <body>
    <div id="seite">
    <div id="kopfbereich"></div>


    <div id="steuerung">
    <ul>
    <li><a href="index.htm">Startseite</a></li>


    <li><a href="ueber_uns.htm">Über uns</a></li>


    <li><a href="termine.htm">Termine</a></li>


    <li><a href="bilder.htm">Bilder</a></li>


    <li><a href="kontakt.htm">Kontakt</a></li>


    <li><a href="impressum.htm">Impressum</a></li>


    <li><a href="links.htm">Links</a></li>


    <li><img height="128" alt="" src="SwiningLipps_Advent06_Christ_1.jpg" width="180" /></li>
    </ul>
    </div>


    <div id="inhalt">
    <h1>Die Swinging Lipps</h1>
    <br />


    <p>Wir freuen uns, Sie auf unserer Homepage begrüßen zu dürfen.</p>
    <br />
    Weiterer Text.........
    </div>
    </div>
    </body>



    ich würd ja auch screenshots mal posten...wenn du mir sagen könntest wie das geht:p
    danke schonmal^^

  • Hier liegt dein Fehler:


    #steuerung {
    float: left;
    width:180px;
    padding: 20px;
    background-color: #EEEEEE;
    border: 1px solid black;height: 21px;
    text-align:left; /* Textausrichtung */
    color:black; /* Schriftfarbe */
    margin-top:0px; /* Abstand oben */
    margin-bottom:0px; /* Abstand unten */
    margin-left:0px; /* Abstand links */
    margin-right:0px; /* Abstand rechts */
    }




    Was das Problem mit der Schriftart betrifft, kann ich dir nicht weiterhelfen. Ich hab die Angaben von dir übernommen und es mir im Firefox angeschaut und bei mir wird auch Verdana angezeigt.
    Du könntest höchstens versuchen "sans-serif" wegzulassen, denn wie ich gerade gemerkt hab, hat der FF ein paar Problemchen mit der Schriftart, was dann auch noch von deiner Version von FF abhängen könnte.
    Wenn das nicht klappt, kannst du ja auch noch schauen, ob du was mit Google findest. Ich hab jedefalls auf die Schnelle nix gefunden (nicht viel Zeit :) )

  • super danke! erstes problem gelöst!
    habe aber noch eins...
    und zwar...bisschen schwer zu erklären...also ich habe ja links die steuerung und da gibt es auch den punkt "über uns" und da würd ich gerne, wenn man da drauf klickt, wie ein untermenü kommen lassen, wo man dann auf die einzelnen mitglieder klicken kann. ich habe das jetzt gemacht und im internet explorer ist das alles wunderbar...aber im firefox stimmen die abstände und alles dann nicht mehr und es vermischt sich alles ganz seltsam...
    hier der css-quelltext:


    #steuerung2 {
    float: left;
    width:180px;
    padding: 20px;
    background-color: #EEEEEE;
    border: 0px solid black;
    height: 10px;
    text-align:left; /* Textausrichtung */
    color:black; /* Schriftfarbe */
    margin-top:0px; /* Abstand oben */
    margin-bottom:0px; /* Abstand unten */
    margin-left:0px; /* Abstand links */
    margin-right:0px; /* Abstand rechts */
    }


    #steuerung2 ul {
    list-style:none; /* keine Aufzählungspunkte */
    }


    #steuerung2 li {
    margin-left:3px; /* Außenabstand links */
    width:180px; /* Breite des Links */



    border-top:0px black outset; /* Rahmen oben */
    border-left:0px black outset; /* Rahmen links */
    border-bottom:0px black outset; /* Rahmen unten */
    border-right:0px black outset; /* Rahmen rechts */
    margin-top:0px; /* Außenabstand oben */
    padding-top:2px; /* Innenabstand */
    padding-left:2px;
    padding-bottom:2px;
    padding-right:2px;
    }


    und hier der html-text:


    <body>


    <div id="seite">
    <div id="kopfbereich"></div>


    <div id="steuerung">
    <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li><a href="ueber_uns.htm">&Uuml;ber uns</a>
    <div id="steuerung2"> <ul>
    <li><a href="matthias.htm"><small>Matthias Graf, Klavier</small></a></li>
    <li><a href="sandra.htm"><small>Sandra Lippert, Gesang</small></a></li>
    <li><a href="ricardo.htm"><small>Ricardo Cuna, Bass</small></a></li>
    <li><a href="lukas.htm"><small>Lukas Haag, Saxophon</small></a></li>
    </ul></div></li>
    <li><a href="termine.htm">Termine</a></li>
    <li><a href="bilder.htm">Bilder</a></li>
    <li><a href="kontakt.htm">Kontakt</a></li>
    <li><a href="impressum.htm">Impressum</a></li>
    <li><a href="links.htm">Links</a></li>
    <li><img height="128" src="SwiningLipps_Advent06_Christ_1.jpg" width="180" alt="" /></li>
    </ul>
    </div>


    <div id="inhalt">
    <h1>&Uuml;ber uns</h1> <br />


    <p>Hier erfahren Sie mehr &uuml;ber uns als Musiker und unsere Bandgeschichte.</p>
    <p>Hier folgt dann ein Text zur Bandgeschichte....</p>



    </div>



    </div>




    </body>



    wäre super, wenn du mir da auch nochmal helfen könntest...dann wäre es das auch^^ das ist mein letztes problem...danke;)

  • Aus deinem Quelltext werd ich nicht ganz schlau, ich hab hier aber ein klasse Flyout-Menü von <!-- w --><a class="postlink" href="http://www.cssplay.co.uk">http://www.cssplay.co.uk</a><!-- w -->, das du nur noch einsetzen und etwas bearbeiten musst. Wenn du mehr als nur die Link-Inhalte und Link-Ziele ändern willst, musst du aber sehr vorsichtig sein und am besten immer vorher eine Sicherheitskopie machen, weil besonders der Internet Explorer in Sachen CSS sehr anfällig ist. Tipp: Wenn du Veränderungen an Farben und Layout vornehmen willst ist es ratsam nach jedem Schritt zu überprüfen, ob das Menü noch wie gewünscht dargestellt wird.
    Edit: wenn du es selbst nich hinbekommst, kannst du auch hier posten, wie du es dir vorstellst und ich ändere es für dich ab. Mit CSS-Menüs und dem IE ist man nämlich schnell am Verzweifeln, wenn man sich noch garnich auskennt :)


  • super danke!
    allerdings habe ich jetzt eine frage...
    jetzt hab ich den eingebaut aber das was neben dran stehen soll (also auf gleicher höhe) des wird automatisch runtergesetzt (also auf die höhe unter dem menü)...wie krieg ich das wieder hoch??

  • Code?
    Wenn du Rechts neben dem Menü den Inhalt haben willst, kannst du den in ein Div packen und das Div mit position:absolute ganz präzise neben dem Menü postieren.

  • html-code:



    <body>
    <div id="seite">
    <div id="kopfbereich"></div>


    <div class="menu">
    <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li class="sub"><a href="ueber_uns.htm">Über uns »<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="../index.html">Matthias Graf, Klavier</a></li>
    <li><a href="#nogo">Sandra Lippert, Gesang</a></li>
    <li><a href="#nogo">Ricardo Cuna, Bass</a></li>
    <li><a href="../index.html">Lukas Haag, Saxophon</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="#nogo">Termine</a></li>
    <li><a href="#nogo">Bilder</a></li>
    <li><a href="#nogo">Impressum</a></li>
    <li><a href="#nogo">Links</a></li>
    </ul>
    </div>


    <div id="inhalt">
    <h1>Die Swinging Lipps</h1>
    <br />


    <p>Wir freuen uns, Sie auf unserer Homepage begrüßen zu dürfen.</p>
    <br />
    Weiterer Text.........
    </div>
    </div>
    </body>



    ja den will ich rechts neben dem menü haben...wie muss ich das mit dem position:absolute machen?^^

  • Einfach die CSS-Angaben


    position: absolute;
    top: 100px:
    left: 300px;
    border: 1px solid #000;


    für das gewünschte Div einstellen. Am besten über eine ausgelagerte CSS-Datei.
    Wie man CSS auslagert wird auf der Homepage erklärt.

  • Hallo Foster,
    als 3-Tage-HTML-Experte darf ich vielleicht folgende Kurzfrage stellen:
    Foster hat erkannt,

    Zitat

    „hier liegt der Fehler“: border: 1px solid black;height: 21px


    Was ist innerhalb der rot signierten Stelle genau falsch, kanns noch nicht interpretieren?
    Mit freundlichen Grüßen
    Bernd

  • Zitat von &quot;Celeron&quot;

    Was ist innerhalb der rot signierten Stelle genau falsch, kanns noch nicht interpretieren?


    Wegen dieser Angabe werden nur 21px, also die "erste Zeile", grau dargestellt, weil das Div ebend nur diese 21px groß ist. Lässt man die Angabe weg, passt sich die Div-Länge dem Inhalt an.

  • also habe jetzt das so geschrieben:


    #inhalt {
    position: absoulute;
    top: 100px
    left: 300px;
    border: 1px solid #000;
    }


    HTML:


    <body>


    <div id="kopfbereich"></div>


    <div class="menu">
    <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li class="sub"><a href="ueber_uns.htm">Über uns »<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="../index.html">Matthias Graf, Klavier</a></li>
    <li><a href="#nogo">Sandra Lippert, Gesang</a></li>
    <li><a href="#nogo">Ricardo Cuna, Bass</a></li>
    <li><a href="../index.html">Lukas Haag, Saxophon</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="#nogo">Termine</a></li>
    <li><a href="#nogo">Bilder</a></li>
    <li><a href="#nogo">Impressum</a></li>
    <li><a href="#nogo">Links</a></li>
    </ul>
    </div>


    <div id="inhalt">
    <h1>Die Swinging Lipps</h1>
    <br />


    <p>Wir freuen uns, Sie auf unserer Homepage begrüßen zu dürfen.</p>
    <br />
    Weiterer Text.........
    </div>


    </body>


    aber der text steht im internet explorer trotzdem nicht neben dem menü...im firefox teilweise...außerdem ändert sich nix an der darstellung wenn ich die pixelzahlen änder...[/img]

  • Hier schon wieder ein, bzw. 2, Fehler in der CSS-Datei:


    #inhalt {
    position: absoulute;
    top: 100px;
    left: 300px;
    border: 1px solid #000;
    }


    Du solltest entweder deine Quellcodes nochmals überprüfen oder einfach sauberer arbeiten.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!