Probleme IE6 und FF

  • Hi,


    habe versucht meine HP neu zu gestalten mit CSS.
    wollte die Linke Menue-Seite gerne fest stehend haben, die rechte Seite mit dem Inhalt soll scrollen.


    Ich selbst habe leider nur IE7 und da funzt es eigentlich recht ordentlich.
    Nun wurde mir aber mitgeteilt:, daß im
    IE6 der Hintergrund auf der linken Seite nicht bis runter geht. (damit kann ich zwar im Notfall leben), aber es fehlt bei der rechten Seite der Scrollbalken!


    Im FF geht dafür der Hintergrund auf der linken Seite über das Seiten-Ende hinaus.


    hier der Link zur Testseite:
    http://home.arcor.de/deschner-clan/


    Falls jemand Abhilfe weiß, bedanke ich mich schon mal ganz herzlich - bin halt Anfänger und quäle mich noch Recht durch das Dickicht:confused:


  • Im FF geht dafür der Hintergrund auf der linken Seite über das Seiten-Ende hinaus.


    In Opera und IE7 geht der Hintergrund auch über das Seitenende hinaus.
    Kannst du vielleicht mal deinen Text posten damit man sich das mal näher ansehen kann?

    Das Leben ist schön - :D
    Lehren ist die schönste Methode zu lernen.

  • Hallo Sascha,
    danke für die Mühe. Meinst Du mit Text posten: den CSS-Code?
    (Sorry bin Anfänger ;))
    Hier mal der Code:


    hoffe, das hilft.
    Vielleicht habe ich bei selfthtml auch was falsch verstanden, speziell hier:


    hier noch der ganze Qelltext:



    Beim IE7 sieht es bei mir richtig aus!


    Ganz herzlichen Dank für die Hilfe

    Einmal editiert, zuletzt von erich1903 ()

  • caipiGuten Morgen Erich,


    also ich hab mich nach einer durchgemachten Nacht mal etwas durch deinen Text durchgewühlt. Folgendes konnte ich mit verschwomenem Blick noch erkennen.


    Zu dem Probelm mit der überstehenden Navigationsleiste auf der linken Seite:


    Bei #fixiert findest du height:100%;. Dies verursacht das deine linke Navi sich immer der Bildschirmhöhe anpasst. Also musst du in #fixiert die Höhe auf deine rechte Seite anpassen, die da zusammen wären #header{height:120px;} #menuho {height:1.8em;} und #inhalt {min-height:380px;} und #footer{height:1.2em;}. Allerdings steckt dies alles in einem #wrap drin und der ist auch auf height:100% gesetzt was eben wieder das selbe verursacht wie in #fixiert (passt sich der Bildschirmhöhe an). Und wenn der #inhalt wächst, sollte deine Navigation ja auch mitwachsen.


    Also im Moment fällt mir keine Patentlösung ein und ich glaube das dieses Script für einen Anfänger auch sehr schwer zu handhaben ist, denn im Grund bin ich selbst noch einer.


    Was du hier auf jeden Fall brauchst ist Geduld und Übung mit CSS. Dazu kann dir das hier helfen.


    Ich gehe jetzt zuerstmal ins Bett und wenn ich dann ausgeschlafen habe, schaue ich mir das Script nochmal näher an.


    Ach ja, schreib doch bitte den Quelltext in einen Code rein und nicht in ein Quote. Hier geht es zur BB-Code-List .

    Das Leben ist schön - :D
    Lehren ist die schönste Methode zu lernen.

    2 Mal editiert, zuletzt von Sascha79 ()

  • Hi Sascha79,


    vielen dank für den Link, aber ich wühle mich schon seit Wochen, durch div. Seiten, u.a. auch auf der genannten), sonst wäre ich ja garnicht so weit gekommen.
    Vielleicht haperts an meinem Kleingehirn, daß ich wohl nicht alles richtig verstehe? (Hatte allerdings nie was mit Computer &Co zu tun, und bin erst nach BorisB überhaupt mal ins Netz "reingekommen":p)


    Deshalb verzeih mir auch, daß ich das mit dem BB-Code nicht getan habe.


    Mein Ansinnen war eigentlich nur eine HP zu erstellen, was mir ja auch geglückt war:D, wenn auch mit Frames und ich darauf recht stolz war. Auf den Hinweis div.Foren, wollte ich jetzt umstellen. Scheinbar wird das eine Lebensaufgabe...., bzw. frage ich mich obs nicht besser ist, es mit Tabellen-Layout zu versuchen?

  • Deshalb verzeih mir auch, daß ich das mit dem BB-Code nicht getan habe.


    Also das ist wirklich kein Problem:). Also auf Tabellen würde ich nicht umsteigen, da wird alles nur noch unübersichtlicher und nebenbei erwähnt ich finde das Layout super und mit etwas Geduld bekommen wir das auch hin.


    Leider habe ich auch keinen IE6 zur Hand. Ein ganz grosses Problem ist, das man es halt nicht allen Browsern recht machen kann.


    Ein kleiner Hinweis. Der IE6 kann min-height nicht interpretieren siehe auch Browserkombatibilität


    Zu dem Problem mit dem Scrollbalken, ich konnte nirgends ein schliessendes Tag finden. Schau mal hier, nach dem Inhalt...

    Code
    1. <div id="inhalt">
    2. <h1 class="center">Ein herzliches Gr&uuml;ss Gott</h1>
    3. <p><img class="opacity" src="Graphik/HPsign/adler.png" alt="Adler" width="219" height="219">Auf vielen USA-Reisen konnten wir einiges Erleben und viele Erfahrungen sammeln, die wir hier festhalten wollen.
    4. Vielleicht findest Du als Leser aber auch ein paar praktische Tipps f&uuml;r die eigene Reiseplanung. Da ich meine HP neu gestalte findest Du hier im Moment nur eine Testseite mit dem Beginn des Reiseberichts vom Dezember 2007. Die vorherigen Reiseberichte findest Du noch auf unserer bisherige <a href="http://home.arcor.de/diedeschi/" target="_blank" >Homepage</a>. Wenn es Dir gefallen hat - Du Vorschl&auml;ge, bzw. Fehler gefunden hast - schreib doch ein paar Zeilen. Wir freuen uns &uuml;ber einen Eintrag im</p>
    5. <p class="center"><img src="http://home.arcor.de/deschner-clan/Graphik/HPsign/gbook.gif" alt="G&auml;stebuch" width="105" height="87"></p>
    6. <p class="center"><a href="gast.htm">G&auml;stebuch.</a></p>
    7. </div>
    8. <!-- Ende Inhalt -->
    9. <!-- InstanceEndEditable --></div>
    10. <!-- Ende Scrollbereich -->


    Wahrscheinlich liegt es daran, das im IE6 der Scrollbalken nicht zu sehen ist. Ich nehme an der FF ist hierso gütig und setzt das </div>. Probier es doch mal aus ob´s klappt.

    Das Leben ist schön - :D
    Lehren ist die schönste Methode zu lernen.

  • Hi Sascha 79,


    lieb von Dir, daß Du es noch nicht aufgegeben hast, einem Anfänger unter die Arme zu greifen.


    Ich denke, daß mit diesem

    Zitat

    <!-- InstanceEndEditable --> </div>


    der Scrollbereich geschlossen wird?


    Ich habe den schlimmen Verdacht, daß ich irgendwie bei dem Workaround
    was falsch gemacht habe - nur was=?


    Als Grundlage habe ich mir dies angeschaut:
    http://de.selfhtml.org/css/lay…ixbereiche.htm#definieren


    Ich habe eine externe CSS-Datei angelegt. Diese dann im Head verlinkt.
    Den Workaround habe ich dann im Head unter die verlinkte CSS-Datei geschrieben.


    War das überhaupt richtig oder gehört dafür eine extra Datei angelegt?


    Sitz irgendwie auf der Leitung, mit conditional comment ...


    Vielen lieben Dank für die Hilfe

  • Hi Erich,


    ich meinte eigentlich das hier....

    Code
    1. <!-- Ende Scrollbereich -->


    Füge hier doch noch ein </div> ein um deinen Scrollbereich zu schliessen.;)


    In die Sache mit dem Workaround muss ich mich auch zuerst reinlesen.

    Das Leben ist schön - :D
    Lehren ist die schönste Methode zu lernen.

  • Hi,


    das </div> ist doch da, steht dummerweise in der falschen Zeile, hinter <!-- InstanceEndEditable -->
    (kann ich noch ändern, dürfte aber keine Auswirkungen haben.


    <!-- InstanceEndEditable --> ist nur ein Kommentar, kein DIV.

  • :rolleyes:...hast recht, hab kurz den Überblick verloren.


    Du hast schwerwingende Dinge an deiner Site verändert. Denn jetzt ist sie nicht mehr mittig vom Bildschirm (oder ist das so gewollt?) und es ist gar nicht mehr möglich zu scrollen.


    Was mir noch aufgefallen ist, da du das Problem ja mit dem IE6 hast: Ist diese Zeile.

    Code
    1. <!--[if lt IE 7]><style type="text/css">

    Hier hast du IE7 angegeben. In der Erläuterung bei selfhtml steht noch das hier:
    Um diese (noch) ungültigen CSS-Angaben nur dem Internet Explorer 5 und 6 zugänglich zu machen, werden sie über einen conditional comment in der HTML-Datei eingebunden.


    Les doch mal denn hier durch, vielleicht bekommst du es ja dann hin.


    Blos nicht aufgeben. Das klappt schon noch.

    Das Leben ist schön - :D
    Lehren ist die schönste Methode zu lernen.

    7 Mal editiert, zuletzt von Sascha79 ()

  • Hi,
    1) hast wahrscheinlich gerade da reingeschaut, als ich was ausprobiert hatte;) hat aber nicht geklappt, jetzt ist wieder alles im Ur-Zustand.


    2) <!--[if lt IE 7]><style type="text/css">


    sagt doch soviel, wie kleiner als IE7, und ist dann doch für IE6 u IE5.


    oder verstehe ich hier auch schon wieder nur Bahnhof?


    3) Die genannte Seite hab ich mir schon durchgelesen, aber eben nicht verstanden.

    Zitat

    Sitz irgendwie auf der Leitung, mit conditional comment ...

  • Zitat

    2) <!--[if lt IE 7]><style type="text/css">


    sagt doch soviel, wie kleiner als IE7, und ist dann doch für IE6 u IE5.

    Das ist korrekt so ... in der Hinsicht hat Sascha also unrecht. ;)

    My software never has bugs. It just develops random features ... :D
    [FONT="System"]&#63743;
    » DevShack - die Website des freien Webentwicklers Boris ;)

  • sodele...


    nachdem ich mich jetzt die ganze Nacht mit Browserweichen rumgeschlagen habe, versuch ich es ein letzes mal. Ich hab das jetzt auf meiner eigenen Site ausprobiert und so hat es auch geklappt. Ich hoffe das es bei dir auch klappt.


    Versuch doch mal folgendes in head einzufügen.



    Ich versuch mal zu Erläutern wie ich das verstanden habe.
    Also...,du hast ja das <div id="fixiert"> fixiert, d. h. das du für diesen Teil deines Scripts die Browserweiche stellen musst, da die IE´s vor IE7 fixed nicht interpretieren. Also habe ich jetzt eben diesen Teil in <!--[if IE]> <!--[if IE]> (sollte für alle IE´s gelten)eingefügt.


    caipiIch hoffe das passt.


    Und noch nebenbei erwähnt, in Opera sitzt das Layout nicht in der Mitte und es ist kein Scrollbalken vorhanden.


    Bin halt leider auch noch kein Profi.:(

    Das Leben ist schön - :D
    Lehren ist die schönste Methode zu lernen.

  • Hi Sascha,


    jetzt bin ich ganz irritiert:confused:


    diese wenn IE für die Navi, steht doch in der html Datei.
    Muß ich diese codes dann da rausnehmen?


    das mit der fehlenden Scroll-Leiste bei Opera hab ich auch festgestellt, nachdem ich endlich mal bei browsershots durchkam.


    Vielleicht weiß jemand hier Abhilfe? - oder hab ich in der falschen Rubrik gepostet?


  • diese wenn IE für die Navi, steht doch in der html Datei.
    Muß ich diese codes dann da rausnehmen?


    Nein du musst den Code nicht aus deinem HTMLdokument rausnehmen. Ich hab das einfach so gemacht das ich, eben diesen fixierten Bereich kopiert habe und in die Browserweiche eingefügt habe. Das heisst, du lässt ihn dort wo er ist, aber stellst ihn eben für IE ein zweites mal zur verfügung.


    Wie gesagt, ich weiss nicht ob das die Ideallösung ist. Aber so hat´s bei mir wenigstens geklappt.


    Das hier hab ich bei css4you gefunden.
    Die Syntax ist <!--[if IE Version]> HTML <![endif]-->. Für Version setzt du die gewünschte Versionsnummer ein.


    Kannst dir die Seite ja selbst mal anschauen. Workshop: Browserweiche.


    /*edit. So anstrengend es auch ist, aber es macht auch Spass:)

    Das Leben ist schön - :D
    Lehren ist die schönste Methode zu lernen.

  • Hi Sascha,
    leider funzt das auch nicht...
    zudem mußte ich jetzt auch noch feststellen, daß bei Opera die rechte Seite nicht wie gewünscht einen Scrollbalken hat - so sind lange Inhalte nicht lesbar.


    Zitat

    So anstrengend es auch ist, aber es macht auch Spass


    Dank f. die aufbauenden Worte, wenn ich mir das Ergebnis wochenlanger Arbeit anschaue und nichts wirklich klappt, :confused: verschwindet der Spaß schön langsam. (Überlege zwischenzeitl. ernsthaft, wieder auf Frames zu gehen)


    Vielleicht weiß jemand wenigstens Abhilfe für das Opera Problem?

  • hallo erich,


    also bevor du jetzt deine ganze Site über den Haufen schmeisst, wo du dich ja auch mühevoll reingearbeitet hast, und auf eine Variante zurückgreifst die dir früher oder später eben auch jede Menge Probleme machen kann, habe ich mir gedacht lass uns doch deine Site mal gemeinsam auseinander nehmen und zusammen studieren.


    Hierfür habe ich das Skelet deiner Site nachgebaut.
    Das sieht so aus.


    Also in Opera und FF passt es, nur wieder im IE mal wieder nicht. Für den habe ich dann die Browserweiche zwischen </style> und </head> eingefügt. Dann klappt´s.


    Da die Elemente noch keinen Inhalt haben, habe ich jedem mal einen border von 1px verpasst damit wir sehen können wo sie sind. Dem Content habe ich jetzt mal eine Höhe von 800px verpasst, damit wir das mit dem scrollen prüfen können.


    Ich schlage vor, als nächstes versuchen wir mal die Sidenav fertigzustellen. Wenn du Fragen hast, dann frag. Wenn du Vorschläge hast, dann schlage vor.
    Lass uns doch die Site Stück für Stück zusammen rekonstruieren und die Probleme die folgen (könnten) zusammen behandeln um ihnen den Gahr auszumachen.8)

    Das Leben ist schön - :D
    Lehren ist die schönste Methode zu lernen.

    3 Mal editiert, zuletzt von Sascha79 ()

  • Hallo Sascha79,


    vielen Dank für Deine aufbauenden Worte, waren wirklich dringend nötig;)
    (Ich werde schon genervt, da ich Rückfragen wegen 2 ausstehender Berichte habe, die ich natürlich lieber gleich fürs neue Layout schreiben wollte) und bekams einfach nicht gebacken.


    Habs jetzt mal nach Deinem Vorschlag bei browsershots hochgeladen (hab selbst nur IE7) und sehe es mir dann an.


    Vielleicht ist mir das Glück hold und es klappt:D

  • Hallo,


    sieht ja recht gut aus:D
    nur der IE muckt noch ein bißchen, (damit kann ich aber notfalls leben;)
    IE6 –linke Seite roter Hintergrund geht nicht über die ganze Spalte bis zum Ende
    IE8 –linke Seite roter Hintergrund geht ganz nach links, somit fehlt der helle Aussenrahmen


    Bei Opera sind die Scrollbalken da, also dürfte es auch funktionieren - testen kann ich es leider nicht.


    Ob bei FF der rote Streifen über das Ende hinausgeht, kann ich auch nicht testen, da ich nur die browsershot Bilder habe. Nachdem Du aber FF hast, wirds sicher passen.


    Vielen, vielen Dank

  • ...also, damit deine Seitennavigation mitwächst gibst du einfach im wrap background-color:#993300; an und das content färbst du dann mit background-color:##F3ECDC; ein.


    In den header kommt ja dann dein Hintergrundbild, da ist die Hintergrundfarbe dan egal. Die topnavi, footer und sidenavi übernehmen jetzt die Farbe vom Wrap.


    Als nächstes nimmst du aus dem Content und sidenavi 'hight' ganz raus, denn nun wissen wir ja das der Scroll funktioniert.


    Nun kannst du ja mal in das content einen Inhalt einfügen und du wirst sehen die Sidenav (ist ja nicht wirklich die sidenav, sonder der wrap) wächst mit.

    Das Leben ist schön - :D
    Lehren ist die schönste Methode zu lernen.