Darstellung in Firefox, Internet Explorer und Chrome

    Hallo Joomla-Gemeinde,
    ich habe nicht allzulange auf mich warten lassen und melde mich gleich mit einer neuen Frage/Problem zurück X/


    Seite: horizont1.bplaced.de


    Problem 1)


    Die Darstellungen in verschiedenen Browsern:
    Komischerweise habe ich das Problem mit dem Internet Explorer und auch mit dem Mozilla Firefox das meine Seite nicht richtig bzw. nach meinen Wünschen entsprechend angezeigt wird (oder werden kann?)
    Im Chrome hingegen wird mir alles einwandfrei angezeigt. Mir ist bekannt oder ich habe oft gelesen dass das Problem beim Internet Explorer häufig davon kommt, dass Wordtexte einfach kopiert & eingefügt worden sind und daher die Formatierung von Word übernommen wurde. Dies kann ich nach meinen letzten Untersuchungen der Beiträge leider nicht bestätign.
    Chrome: Zeigt alles einwandfrei an (Bild 1)
    Mozilla Firefox: Schneidet Hintergrundbild ab (Bild 2)
    Internet Explorer: hinterlegter Hintergrund ragt über, Navigation verzieht sich komplett. (Bild 3)


    Problem 2)


    Ich bin gerade auf dem Weg, meine Navigation Responsive zu machen. Das Template Protostar ist ja selbst schon Responsive.
    Ich habe jetzt ungefähr gefühlte 30 Minuten gegoogelt und auf verschiedenen Seiten gesucht, auch in anderen Foren gestöbert (sry fürs fremdgehen :D ).
    Ich habe auch zahlreiche Erweiterungen gefunden, jedoch haben diese nichtmal funktioniert. Um ehrlich zu sein bin ich auch kein Fan davon, da man nie weiß was diese mit der Seite anrichten von daher lieber Finger weg. Muss ich jetzt eine "extra" Navigation anlegen und definieren oder was gibt es für Möglichkeiten? Ich finde irgendwie einfach nichts eindeutiges.


    Über eure Hilfe, bin ich wie immer sehr dankbar!


    Mit freundlichen Grüßen
    Graffa23

  • Zum hilfreichsten Beitrag springen

    Hallo Graffa23,


    zunächst mal: Sorry wenn ich jetzt nicht auf die Punkte 1) und 2) eingehe, möchte einstweilen auf folgendes hinweisen.
    Denn vielleicht 'erledigt' sich so manche anderen Darstellungen dann von selbst ;)


    Ich nehme jetzt nur 1 "kurzes Beispiel", dass Du weißt, was ich meine:
    ------------------
    <p style="text-align:
    justify;">
    <span style="font-family:
    arial, helvetica, sans-serif; font-size: 14pt; color: #000000;">Uhren
    nach unserem Empfinden immer schneller ticken und die Z</span></p>


    <p style="text-align:
    justify;">
    <span style="font-family:
    arial, helvetica, sans-serif; font-size: 14pt; color: #000000;">eit
    wie im Fluge vergeht.</span>
    --------------
    Du hast fast jede Zeile von den Beiträgen mit Inline-Editor formatiert. Bin jetzt brutal ;) Lösche diese ganzen Formatierungen & schreibe den Text in einem 'Aufwasch'.
    Zeilenumbrüche kannste dann immer noch machen.


    Außerdem:


    CSS
    body {
    background-color: #fff;
    color: #f3ad14 !important;
    font-family: Gabriola;
    font-size: 22px;
    line-height: 18px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;}


    Die font-color hast Du mit 'orange'angegeben. Warum? Gib: #000; ein und der Textbeitrag ist alles in schwarz. Weil Du ja u.a. (siehe obigen Ausschnitt color #000000; eingegeben hast).
    font-size usw. kannst Du direkt in dem Code ändern. Probier das mal, vielleicht sieht es dann auch in den andern Browsern besser aus.


    Die Navigation schaut bei mir im FF OK aus.


    Liebe Grüße, Christine

    Hallo Christine,
    das ist garkein Problem! Ich bin für jeden Tipp und Kritik dankbar.


    Deine Verbesserungsvorschläge habe ich angenommen und auch so geändert. Das war scheinbar von am Anfang vom rumprobieren drin gewesen :/
    Okay, Firefox sieht bei mir auch ganz normal aus. Wie sieht es bei dir denn im Internet Explorer aus?


    -----------


    Hast du zu den anderen zwei Punkten noch Tips & Tricks für mich?


    Liebe Grüße
    Graffa23

    Hallo Graffa23,


    viel kann ich da heut nicht mehr ausrichten, sozusagen, bin zu schlappy dazu :)
    Hab auch ein wenig abgewartet, weil wir wissen ja (von vorigen Threads), dass sich so manches bei Dir minütlich ändert :)


    Zu der Formatierung des Textes (siehe voriges post). Die Inline-CSSen sind aber noch drinnen. Probierst halt noch herum.


    Zu 1: Zum IE: Ja, bild3.png sieht bei mir auch so aus. Mitunter Grund: .nav-pills > li > a/Zeile 3004. Wenn man da padding-top bzw. padding-bottom die px ändert, könnte man es zurechtbiegen. Aber: Im FF (mit den veränderen Werten probiert) ist es dort dann nix gut. Da fällt mir momentan nichts ein.
    Zu bild2.png weiß ich jetzt nicht, ist ja kein Bild mehr da :)


    Zu 2: Was meinst Du genau mit "responsive"? Ist es doch & schaut doch gut aus? Also schön untereinander.
    Falls Du den sogenannten "Hamburger button" meinst. Puh, ist ein eigenes Thema. Da brauch ma mehr Zeit & Hilfe ....


    Für heute: Gute Nacht, Christine

    Hallo ihr beiden,
    erster mal wieder DANKE für eure Bemühungen und Tips! ^^


    ChristineT:
    Ja das stimmt, da habt ihr voll und ganz Recht dass sich bei mir müntlich was ändern kann. Liegt jedoch auch oft daran, das ich hier reinschreibe und eben trotzdem weiterhin versuche mir irgendwie das selbst zu erarbeiten.
    Das mit dem Text ist komisch und kann ich nicht nachvollziehen, hab den gesamten Quelltext aus dem Editorfenster herausgelöscht und meinen Text einfach mal zur Probe reingeschrieben. Werde ich mir nochmal anschauen müssen!


    Das mit dem Verschieben habe ich bisher noch nicht ausprobiert.. aber wie soll ich schon schauen ob es bei mir Fehlerfrei angezeigt wird, wenn es das jetzt noch nichtmal tut.. Beim Firefox macht mein Header was er will, irgendwie ist das nicht mit verschiedenen Bildschirmauflösungen kompatibel (scheint mir so bzw eher gesagt die class bodyoben)


    Normalerweise sollte Bild2.png noch da sein, besser gesagt das Hintergrundbild..


    Ich meinte mit Responsive genau dieses "Hamburger-Menü", da ich finde das es einfach übersichtlicher bzw schlichter aussieht als dieser große Kasten.
    Klar Kompatibel ist es aufjedenfall.
    Danke und ich hoffe du hast gut geschlafen!


    astrid:
    Das ist vollkommen in Ordnung und bin dir sehr dankbar für den Link, werde mich mal umschauen!
    Es ist eben auch einfach sinnvoller alleine drauf zu kommen, aber gut ist es eben auch von anderen Denkanstöße etc zu bekommen.


    Liebe Grüße
    Graffa23

    Was für ein Durcheinander... :D


    Zitat von Graffa23

    Beim Firefox macht mein Header was er will, irgendwie ist das nicht mit verschiedenen Bildschirmauflösungen kompatibel (scheint mir so bzw eher gesagt die class bodyoben)


    Lösche erst einmal alles, was mit "bodyoben" zu tun hat:

    Code
    #bodyoben {  background-color: rgba(255, 255, 255, 0.6);  border: 1px solid grey;  box-shadow: 2px 2px 25px #292929;  display: block;  height: auto;  margin-bottom: 10px;  margin-left: auto;  margin-right: auto;}


    und ersetze es durch

    Code
    .header-inner {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid grey;
  box-shadow: 2px 2px 25px #292929;
  margin-bottom: 10px;
}


    Falls es nicht das ist, was du erreichen willst, dann wäre es vielleicht ganz gut, wenn du mal anhand eines Bildes (erstellt mit Photoshop oder Gimp o.ä.) zeigen würdest, wie es aussehen soll.


    Den Rest sehe ich mir danach an ;)

    Hallo anka,
    danke auch Dir für deine Hilfe und entschuldige das Durcheinander ^^


    Das Problem mit den Header hat sich aus meiner Sichtweise durch deinen oben genannten Code erledigt. Der Header wird sauber in allen 3 Browsern angezeigt. Danke!


    Allerdings macht die Navigation nach wie vor Probleme beim Firefox (Bild mozilla_firefox.png) und Internet Explorer (ie.png)
    Lediglich im Google Chrome Browser wird dies nach meinen Vorstellungen angezeigt. (chrome.png)
    Ich hoffe das dadurch nochmal ein wenig Licht ins Dunkle kommt! search


    Mit freundlichen Grüßen
    Graffa23

    Machste aus "Mehr über xyz" nur "Über xyz" oder aus "Herzlich Willkommen" nur "Willkommen".


    Oder verkleinerst hier die paddings left und right bis es passt.

    Code
    .nav-tabs > li > a, .nav-pills > li > a {
    line-height: 14px;
    margin-right: 2px;
    padding-left: 12px;
    padding-right: 12px;
}


    Schuld ist wahrscheinlich der Font Gabriola, der auf unterschieldichen Browsern schon mal leicht abweichend interpretiert wird, noch dazu, wenn es ein Free Font ist.

    Hallo Re:Later,
    danke für deine Hilfe.


    Mit dem 'verkürzen' der Namen hat es im Firefox geklappt.
    Im Internet-Explorer wird die Schrift ja sozusagen höhergestellt wie auf dem hervorigen Bild zu erkennen. Kan das was mit den paddings zu tun haben?


    Liebe Grüße
    Graffa23

    Hallo,


    mir ist aufgefallen, dass sämtliche BS2 Basics fehlen die standardmäßig aber in der Template-CSS vorhanden sind
    z.Bsp.


    Sicher sind da noch mehr CSS-Anweisungen gelöscht, die aber für das ganze BS2 Konstrukt wichtig sind.


    Ich empfehler Dir die template.css zurückzusetzen und Schritt für Schritt erstmal nur das zu überschreiben, was du tatsächlich ändern willst und erst am Ende nochmal zu Prüfen, was du löschen kannst.


    Gruß

    Die Anweisungen sind nicht gelöscht, werden aber durch einen Syntaxfehler ausser Kraft gesetzt. In Zeile 2945 ist eine schliessende Klammer zu viel:

    Zitat von deGobbis

    Ich empfehler Dir die template.css zurückzusetzen und Schritt für Schritt erstmal nur das zu überschreiben, was du tatsächlich ändern willst


    Das fände ich auch gut. Standard verwenden und dann eine eigene custom.css Schritt für Schritt (wieder) aufbauen. Dann kommen auch keine Fehler auf Zeile 2354325 mehr rein.


    Noch ein Tipp: Kein important! verwenden. Ich sehe z.B.
    font-family: G.. important!
    das ist nicht gut.


    Besser eine Ersatzschrift definieren - wer an dem Inhalt interessiert ist, wird ihn auch in Arial interessant finden wenn sein Browser die andere Schrift nicht rendert.
    Noch eine kurze Erklärung, auch wenn ich vielleicht offene Türen einrenne: CSS = cascading style sheet. Wenn du irgendwo mit dem Holzhammer !important auffährst, kannst du die Kaskade, also die Vererbung, zerstören.
    Ausserdem ist es wie beim Maler: Wer als letzter kommt, übermalt die anderen. Soll heissen: Wenn in der Protostar-template.css z.b. steht color: red; und du schreibst am Ende in deine custom css: color: blue, dann gewinnt blue.


    Der Vorteil ist dass du alle eignen Definitionen zusammen in einer Datei hast - und da kannst du dich richtig austoben (oder css-freaks toben lassen ;) )

    Hallo an alle,
    erster viele Dank für eure Tips und hilfreiche Antworten.
    deGobbis; anka:
    Sind die BS2 jetzt vorhande?
    Habe den Tipp von anka umgesetzt und die Klammer entfernt, die zu viel war.


    Im Großen und ganzen bin ich jetzt doch schon ein wenig geschockt, da ich dachte dass ich auf einem guten Weg bin.
    Naja aber es wird scheinbar kein Weg daran vorbeiführern.


    Habe jetzt schon Probleme, da warum auch immer, mein Template Protostar nichtmehr da ist und ich somit nicht diese template.css zum "zurücksetzen" vorhanden habe.
    Also ich stehe gerade schon ein wenig Kopf über Fuß ?(


    firstlady:
    Das heißt nicht die vorhandene template.css anpassen sondern eine komplett eigene css aufbauen?


    Danke für eure Unterstützung.


    Liebe Grüße
    Graffa23

    • Hilfreich

    Hallo Graffa23,


    Du bist schon auf einem guten Weg - so Rückschläge passieren halt - auch mir immer wieder ;)


    So, ich mach mal den Anfang - bin dann nämlich weg. Sind ja hier noch so liebe Supporter da, die Dir den Weg weiter ebnen :)


    Zum Protostar: Du müsstest eigentlich bei: Erweiterungen > Templates > Templates auch das protostar_default haben (soferne Du es nicht gelöscht hast).
    Hattest ja damals eine 'Kopie' davon gemacht. Dort kannst Du Dir ja die Original template.css holen. Danach sehen wir weiter, weil es ja dann wieder anders aussehen wird.


    Hast Du Dir die Änderungen vom header aufgehoben/notiert? Und zwar den Code von:
    .header-inner {xxx} (von Anka) posts davor. Den wirst Du wieder brauchen.


    Zur custom.css:


    Da müsstest Du folgendes machen:


    Editiere die index.php des Templates, suche dort folgende Zeile
    ...
    // Add Stylesheets


    $doc->addStyleSheet($this->baseurl . '/templates/' .
    $this->template . '/css/template.css');


    // Load optional RTL Bootstrap CSS...

    und füge dort eine zusätzliche (rote) Zeile ein:
    ...
    // Add Stylesheets


    $doc->addStyleSheet($this->baseurl . '/templates/' .$this->template . '/css/template.css');

    $doc->addStyleSheet($this->baseurl. '/templates/' . $this->template . '/css/custom.css');


    // Load optional RTL Bootstrap CSS
    ...


    Alles andere > dort dann CSSen aufbauen > später ;)


    Liebe Grüße & Danke jetzt schon an weiter Infos von den Mädels & Co.


    Christine

    Hallo Christine,
    danke für deine umfangreiche Hilfe :)


    Puuuh, da bin ich ja froh das ich mich nicht komplett auf dem Holzweg befinde!
    Protostar hat sich erledigt, habe einfach nochmal Joomla runtergeladen und von dort die template.css in mein jetztiges Template eingefügt.
    Ja ich habe ich größtenteils notiert, wird ja aber auch hier im Forum zu finden zu sein oder?


    Die index.php habe ich jetzt so abgeändert, wie beschrieben.
    Logischerweise muss ich jetzt ja eine neue Datei custom.css anlegen.


    Wenn ich das richtig verstanden habe, kommen in meine custom.css NUR meine Abänderung des Templates.
    Theoretisch müssten diese dann am Ende die Angabe in der template.css überschreiben oder?


    Und wie gesagt nochmal vielen Dank, das ihr euch wirklich so umfangreich und intensiv Zeit/Mühe macht :)


    Liebe Grüße
    Graffa23


    EDIT: Ich habe schonmal angefangen in der custom.css das ein oder andere zu basteln. Sollte ich zu voreilig sein, dann bremst mich bitte aus!


    EDIT2:

    Zitat

    Die Schriftart ist das Problem, die wird offensichtlich im IE falsch gerändert.


    Kann dies bestätigen, habe es gerade ausprobiert. Ist es möglich, wenn jemand die Seite mit dem IE aufruft, eine andere Schriftart zu laden?

    Hey Astrid,
    danke für den Tipp, ich werde mich dort mal ein wenig einlesen.


    Bin jetzt mit den meisten Änderungen auf der Seite fertig.
    Wie sieht es von der Richtigekti aus? Habt ihr es so gemeint mit der custom.css ?


    Liebe Grüße
    Graffa23

    Hallo Graffa23,
    ich habe gerade einmal kurz auf die Website geguckt. Ist es von dir gewollt, dass schmale Displays das Menü nicht anzeigen? Oder übersehe ich etwas? Ich habe nur im Firefox den Bildschirm verkleinert. Bei 640 Pixel Breite wird mir kein Menü angezeigt.


    Fehler kannst du unter anderem auch hier kontrollieren:


    https://validator.w3.org/nu/?u…2Fhorizont1.bplaced.de%2F


    Hier wird der HTML-Teil gecheckt.



    https://jigsaw.w3.org/css-vali…ng=1&vextwarning=&lang=de


    Diese URL prüft den CSS-Teil. Hier solltest du dir die Einlesefehler noch einmal ansehen. Die Fehler „Die Eigenschaft xx ist eine unbekannte Erweiterung des Herstellers.“ Kannst du vernachlässigen.
    Viele GrüßeAstrid