Jeena Paradies: IE macht was er will.

Hallo,

Ich habe da ein super blödes Problem, aber eigentlich zwei.

1. Problem
Ich will eigentlich was ganz einfaches, aber irgendwie kriege ich es nicht hin. Ich will eine Leiste mit Links haben die durch border getrennt werden. Die Hintergrundfarbe soll sich beim überfahren ändern, und der Aktive Link soll durch eine andere Hintergrundfarbe gekennzeichnet sein. Also alles schon mal irgendwo gesehen, aber warscheinlich mit JavaScript. Das alles soll aber per CSS gehen. Jetzt macht der IE bei meiner Seite volgendes: ich gebe an: border: 1px solid #000000; und er zeichnet nur Rechts und Links einen Rand hin, und außerdem ignoriert er das padding-bottom: 2px; Ich habe aber überhaupt keine Ahnung warum.
http://www.jeenaparadies.it-pc.de/selfhtml/gutgesell/
Diese Seite funktioniert super mit Mozilla 1.5 und Opera 7.21 und NS 4.77(abgespeckt) Der einzige Browser der hier muckt ist der IE. Ich habe den IE 6.0 glaube aber dass sich der 5.0 und der 5.5 genau so verhalten.

2. Problem
Ich habe so zu sagen css Popups gemacht, wie es auf http://www.meyerweb.com/eric/css/edge/popups/demo2.html steht. Im Opera 7.21 und im Mozilla 1.5 funktioniert es einwandfrei! Nur der IE zeigt keine veränderung. Es muss aber gehen, da es ja auf dieser Seite auch geht, habe es selbst ausprobiert. Irgendwas was ich noch drin habe stört aber den Betrieb des IE ich finde aber schon seit Tagen nicht heraus was es ist.

Ich gluabe irgendwie dass ich mittlerweile Betriebsblind bin. Könnte sich jemand den Quellcode angucken, und mir sagen was ich in den zwei Fällen noch versuchen könnte?

Grüße
<img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

--
"Of course it does not work, but look how fast it is!"
  1. Hi,

    1. Problem
      http://www.jeenaparadies.it-pc.de/selfhtml/gutgesell/

    Du gibst den .menu a:link eine height, aber kein display:block; Also bringt das height in normalen Browsern nichts, da es auf inline-Elemente nicht angewendet werden darf.
    IE ist fehlerhaft und interpretiert width und height auch für inline-Elemente.
    Da würde ich also mal suchen: height weglassen oder auf niedrigeren Wert (~95%) setzen - wahrscheinlich ist die border nur nach außerhalb verschoben - oder aber display:block setzen...

    1. Problem
      Ich habe so zu sagen css Popups gemacht, wie es auf http://www.meyerweb.com/eric/css/edge/popups/demo2.html steht. Im Opera 7.21 und im Mozilla 1.5 funktioniert es einwandfrei! Nur der IE zeigt keine veränderung. Es muss aber gehen, da es ja auf dieser Seite auch geht, habe es selbst ausprobiert. Irgendwas was ich noch drin habe stört aber den Betrieb des IE ich finde aber schon seit Tagen nicht heraus was es ist.

    Vielleicht sagst Du noch, was man tun muß, um diese "Popups" zu sehen, dann muß man nicht rumsuchen.
    Oder meinst Du die Bildchen links oben über der Navigation?

    Diese werden auch widersprüchlich formatiert: position:absolute bewirkt automatisch display:block. Du gibst display:inline an.
    Ich hätte auch nicht zwischen height/width 0 und height/width 100/80px umgeschaltet, sondern zwischen display:none und display:block

    cu,
    Andreas

    --
    Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
    http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/
    1. Hallo,

      Du gibst den .menu a:link eine height, aber kein display:block; Also bringt das height in normalen Browsern nichts, da es auf inline-Elemente nicht angewendet werden darf.

      Das mache ich wegen dem IE 5.0 da der mir sonst gar kein padding interpretiert.

      IE ist fehlerhaft und interpretiert width und height auch für inline-Elemente.
      Da würde ich also mal suchen: height weglassen oder auf niedrigeren Wert (~95%) setzen - wahrscheinlich ist die border nur nach außerhalb verschoben - oder aber display:block setzen...

      Ich versuche es kleiner zu setzten, aber auch wenn ich es weggelassen habe gab es keine verbesserung. Ich kann es nicht diaplay:block setzen, da diese Buttons ja dann nicht mehr nebeneinander sind sondern untereinander.

      Vielleicht sagst Du noch, was man tun muß, um diese "Popups" zu sehen, dann muß man nicht rumsuchen. Oder meinst Du die Bildchen links oben über der Navigation?
      Diese werden auch widersprüchlich formatiert: position:absolute bewirkt automatisch display:block. Du gibst display:inline an. Ich hätte auch nicht zwischen height/width 0 und height/width 100/80px umgeschaltet, sondern zwischen display:none und display:block

      Das mit dem Wiederspruch muss ich noch mal gucken, aber das mit display:none geht wegen dem Netscape 6 nicht, da dort die Bilder sonst nicht vorgeladen werden.

      Grüße
      <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

      --
      "Of course it does not work, but look how fast it is!"
      1. Hi,

        Ich versuche es kleiner zu setzten, aber auch wenn ich es weggelassen habe gab es keine verbesserung. Ich kann es nicht diaplay:block setzen, da diese Buttons ja dann nicht mehr nebeneinander sind sondern untereinander.

        Du kennst float?

        cu,
        Andreas

        --
        Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
        http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/
        1. Hallo,

          Du kennst float?

          Hm stimmt, manchmal ist man doch erst einmal Blind, ich werde es sofort ausprobieren.

          Grüße
          <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

          --
          "Of course it does not work, but look how fast it is!"
          1. Hallo,

            Ich habe das erste Problem jetzt zwar ganz anders gelöst, als ich wollte, aber es gefällt mir doch sehr gut so, und sieht sogar in allen mir zur Verfügung stehenden Browsern gleich aus (außer NS4 aber da passt es auch). http://www.jeenaparadies.it-pc.de/selfhtml/gutgesell/

            Jetzt bleibt noch das zweite Problem, dass sich bestimmt auch lösen lassen wird, nur komme ich nicht drauf wie. Auf der Seite http://www.meyerweb.com/eric/css/edge/popups/demo2.html funktioniert es ja auch. Mist.

            Grüße
            <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

            --
            "Of course it does not work, but look how fast it is!"
            1. Hallo,

              Also der IE kann einen wirklich zur Verzweiflung bringen!
              Ich habe jetzt herausfinden können woran es liegt, dass der IE die hover Bilder nicht anzeigt. Durch reines ausprobieren. Also es ist so, dass wenn ich bei a:link und a:hover das gleiche padding-bottom:2px habe, dann zeigt er nichts an, sobald das padding-bottom bei a:hover anders ist als bei a:link funktioniert es. Ich verstehe überhaupt nicht was das miteinander zu tun hat. Vieleicht kann mir das jemand erklären?

              Das sieht natürlich blöde aus, wenn der Link sich bei hover in der größe verändert, weiß jemand wie man das umgehen könnte?

              Grüße
              <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

              --
              "Of course it does not work, but look how fast it is!"
              1. Hi Jeena,

                scheinbar ist es wirklich so als bräuchte der IE aus irgend einem
                Grund einen merklichen Unterschied zwischen a:link und a:hover. Also habe ich einen Unterschied bei der Schreibweise für den Rahmen
                gemacht:

                .menu li a {
                         text-decoration: none;
                         padding:1px 7px 2px 7px;
                         color: #001A88;
                         background: url(../img/linkback.png) repeat-x #fff;
                         font-weight: bold;
                         border-width:1px 0 1px 1px;
                         border-style:solid;
                         border-color:#000;
                         margin: 0;

                }
                        .menu li a:visited {
                         text-decoration: none;
                         padding:1px 7px 2px 7px;
                         color: #78698E;
                         background: url(../img/linkback.png) repeat-x #fff;
                         font-weight: bold;
                         border: 1px #000 solid;
                         border-right: none;
                         margin: 0;

                }
                        .menu li a:hover {
                         text-decoration: none;
                         padding:1px 7px 2px 7px;
                         color: #78698E;
                         background: url(../img/linkback2.png) repeat-x #fff;
                         font-weight: bold;
                         border: 1px #000 solid;
                         border-right: none;
                         margin: 0;

                Wenn du das in dein CSS reinkopierst, dürften die Links beim
                "drüberfahren" nicht mehr "schrumpfen". Unglaublich aber wahr,
                wie man immer wieder für den ie tricksen muß...

                Und tschüss

                Hugo

                1. Hi Jeena,

                  noch ein kleiner Nachtrag, es reicht dem IE auch aus
                  wenn man bei a:hover eine andere Rahmenfarbe definiert,
                  z.B. #2E2E2E (dunkel-grau) und ansonsten die Struktur
                  beibehält; das hätte den Vorteil, das es dann auch im Mozilla
                  funktioniert...

                  Und tschüss

                  Hugo

                  1. Hallo,

                    noch ein kleiner Nachtrag, es reicht dem IE auch aus
                    wenn man bei a:hover eine andere Rahmenfarbe definiert,
                    z.B. #2E2E2E (dunkel-grau) und ansonsten die Struktur
                    beibehält; das hätte den Vorteil, das es dann auch im Mozilla
                    funktioniert...

                    Juhu!!! Es funktioniert, du bist der beste!!! Alleine wäre ich nie drauf gekommen.

                    Hast du evetnuell die möglichkeit dir die Seite mit einem IE 5.0 anzugucken?

                    Grüße
                    <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

                    --
                    "Of course it does not work, but look how fast it is!"
                    1. Hi Jeena,

                      freut mich das es jetzt geht, einen IE 5 habe ich leider auch nicht.

                      Und tschüss

                      Hugo

                    2. Hallo,

                      Dank Hugo sieht geht das was ich vorhabe schon mal in den wichtigsten Browsern. Mein Bruder hat noch den alten IE 5.0 (genau wie der Arzt) Und er hat die Seite mal besucht. Das mit den hover Bildern geht leider nicht, das wäre aber nicht so schlimm, schlimmer ist, wie der IE 5.0 meinen Code interpretiert:

                      <img src="http://www.jeenaparadies.clever-webspace.de/selfhtml/bilder/gutgesell2.jpg" border="0" alt="">

                      Anscheinend  nimmt er line-height, und macht den link so hoch wie line-height der list also ul. Ts ts immer irgendwas. Hast du noch irgendeine Idee Hugo?

                      Grüße
                      <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

                      --
                      "Of course it does not work, but look how fast it is!"
                      1. Hi Jeena,

                        das was ich jetzt sage, muß leider sehr vage ausfallen aus
                        Ermangelung eines IE5 zum ausprobieren.

                        Du könntest zum einen versuchen, deine font-size für den body
                        auf 101% (font-size:101%) zu definieren; der IE sowie manche
                        Versionen vom Opera haben diverse Bugs bei relativen Schriftgrößen.

                        Zweitens könntest du auch versuchen, die line-height nur auf das
                        notwendigste hochzuschrauben (Größenbereich 1.3em). Wenn das jetzt
                        nicht helfen sollte, können wir zusammen gerne nochmal nach einer
                        anderen Lösung schauen.

                        Und tschüss

                        Hugo

                        1. Hallo,

                          Du könntest zum einen versuchen, deine font-size für den body
                          auf 101% (font-size:101%) zu definieren;

                          Das hat leider nichts geholfen.

                          Zweitens könntest du auch versuchen, die line-height nur auf das
                          notwendigste hochzuschrauben (Größenbereich 1.3em).

                          Wenn ich das kleiner als 2em mache dann verschwinden wieder die border oben und unten, und die Bildchen verändern sich nicht.

                          Ich überlege ernsthaft, ob ich nicht extra für die IE 5 eine extra für ihn zugeschnittene CSS Datei machen sollte, und die dann mit diesem "if IE 5" oder wie das geht einbinden sollte.

                          Grüße
                          <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

                          --
                          "Of course it does not work, but look how fast it is!"
                          1. Hi Jeena,

                            Ich überlege ernsthaft, ob ich nicht extra für die IE 5 eine extra für ihn zugeschnittene CSS Datei machen sollte, und die dann mit diesem "if IE 5" oder wie das geht einbinden sollte.

                            ich finde es gut, dass du das Problem für den IE 5 nochmals
                            gesondert über "conditional comments" angehen willst. Denn die
                            einfachste Lösung wäre sicherlich gewesen deinem Kunden einen
                            anderen Browser "aufzuschwätzen";-) Du hättest dann aber nicht
                            die fehlerhafte Darstellung ausgebügelt. Der IE5 ist nämlich
                            meiner unmaßgeblichen Meinung nach im Gegensatz zum NS4
                            noch ein sehr weit verbreiteter Browser, da er der
                            Standard-Browser von Windows 2000 ist. Leider ist der IE5 ein
                            ähnlicher Nervtöter wie der NS4.

                            Ich würde mir es an deiner Stelle bei der Anpassung aber so leicht wie
                            möglich machen. Ich glaube den "Bildwechsel-Effekt" wirst du
                            beispielsweise nicht für den IE5 retten können. Und bei deiner
                            Liste könntest du dir ja überlegen, ob dir dort (und nur dort)
                            bei font-size und line-height, Angaben in px nicht das Leben leichter
                            machen würden. Ansonsten ist es ja relativ einfach durchzuführen: das
                            bisherige CSS unverändert beibehalten und eine kleine zusätzliche
                            CSS-Datei einbinden, welche nur die Veränderungen für den
                            IE5 beinhaltet, etwa so

                            <!--[if gte IE 5]>
                                 <link href="ie5.css" rel="stylesheet" type="text/css">
                            <![endif]-->

                            Würde mich selbst interessieren, wie du es letztenendes
                            gemacht hast.

                            Abschließend bleibt mir noch zu sagen, dass die Seite sehr hübsch
                            ist, die du da "gebastelt" hast. Besonders die lustige Krankenwagen-
                            Grafik kompensiert die zuweilen "mulmigen" Gefühle, die man manchmal
                            mit einem Arztbesuch verbindet.

                            Und tschüss

                            Hugo

                            1. Hallo,

                              ich finde es gut, dass du das Problem für den IE 5 nochmals
                              gesondert über "conditional comments" angehen willst. Denn die
                              einfachste Lösung wäre sicherlich gewesen deinem Kunden einen
                              anderen Browser "aufzuschwätzen";-) Du hättest dann aber nicht
                              die fehlerhafte Darstellung ausgebügelt. Der IE5 ist nämlich
                              meiner unmaßgeblichen Meinung nach im Gegensatz zum NS4
                              noch ein sehr weit verbreiteter Browser, da er der
                              Standard-Browser von Windows 2000 ist. Leider ist der IE5 ein
                              ähnlicher Nervtöter wie der NS4.

                              Genau das ist ja das eigentliche Problem, denn (fast) keiner der ein Modem hat wird sich einen neuen Browser holen, nur damit gerade _diese_ Seite bei ihm ein wenig besser aussieht.

                              Ich würde mir es an deiner Stelle bei der Anpassung aber so leicht wie
                              möglich machen.

                              Sowieso ;-)

                              Ich glaube den "Bildwechsel-Effekt" wirst du
                              beispielsweise nicht für den IE5 retten können.

                              Das ist nicht weiter schlimm, das sieht nur ein bischen Netter, und lockerer aus, ist aber für das Gesamtdesign, und die Informationen die der Arzt vermitteln will nicht von Wichtigkeit.

                              Und bei deiner Liste könntest du dir ja überlegen, ob dir dort (und nur dort)
                              bei font-size und line-height, Angaben in px nicht das Leben leichter
                              machen würden.

                              Ich weiß noch nicht, mal gucken ob das überhaupt was bringt.

                              <!--[if gte IE 5]>
                                   <link href="ie5.css" rel="stylesheet" type="text/css">
                              <![endif]-->

                              gte heiß ja größer oder gleich Version 5 ich werde mal nachgucken, was ich für nur Version 5 schreiben muss.

                              Würde mich selbst interessieren, wie du es letztenendes
                              gemacht hast.

                              Da das mein erstes Projekt ist, wofür ich Geld bekommen werde, werde ich die Seite hier im Forum bewerten lassen, bevor ich sie richtig online stelle.

                              Abschließend bleibt mir noch zu sagen, dass die Seite sehr hübsch
                              ist, die du da "gebastelt" hast. Besonders die lustige Krankenwagen-
                              Grafik kompensiert die zuweilen "mulmigen" Gefühle, die man manchmal
                              mit einem Arztbesuch verbindet.

                              Danke, den Krankenwagen hat mir meine liebe Frau gemalt.

                              Grüße
                              <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

                              --
                              "Of course it does not work, but look how fast it is!"
                              1. Hallo Jeena,

                                <!--[if gte IE 5]>
                                     <link href="ie5.css" rel="stylesheet" type="text/css">
                                <![endif]-->
                                gte heiß ja größer oder gleich Version 5 ich werde mal nachgucken, was ich für nur Version 5 schreiben muss.

                                Kleine Suchhilfe: http://drweb.de/html/conditional_comments.shtml

                                Grüße
                                Torsten

                                1. Hallo,

                                  Kleine Suchhilfe: http://drweb.de/html/conditional_comments.shtml

                                  Dankeschön, und obwohl ich drweb eigentlich _nie_ nutze werde ich das doch von dort aus übernehmen.

                                  Grüße
                                  <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

                                  --
                                  "Of course it does not work, but look how fast it is!"
                            2. Hallo,

                              So sieht es im IE 5.0 aus:
                              http://www.browsercam.com/projects/28298/478873.jpg
                              und so im IE 5.5:
                              http://www.browsercam.com/projects/28298/478874.jpg

                              Habe gemerkt, dass der IE 5.5 den gleichen Scheiß macht, also habe ich ihn auch gleich damit versorgt. Ich frage mich warum da bei der List margin-top: 0.5em nicht funktioniert. Dann würde es nämlich genau so aussehen wie im IE 6 Mozilla und Opera.

                              Kann sich das jemand mal im IE 5 und IE 5.5 angucken, und mir berichten, ob sich dort die Bilder wechseln und so weiter?

                              Grüße
                              <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

                              --
                              "Of course it does not work, but look how fast it is!"
                              1. Hallo Jeena,

                                Ich frage mich warum da bei der List margin-top: 0.5em nicht funktioniert. Dann würde es nämlich genau so aussehen wie im IE 6 Mozilla und Opera.

                                Probiere stattdessen margin-top für die li-Elemente, also bspw. .menu li {margin-top:0.4em} im MSIE 5.x-Stylesheet, dann sollte es funktionieren: http://home.t-online.de/home/dj5nu/fanhost/jeena.jpg

                                Kann sich das jemand mal im IE 5 und IE 5.5 angucken, und mir berichten, ob sich dort die Bilder wechseln und so weiter?

                                Der Bildwechsel oben links funktioniert im 5.0 definitiv nicht (es ist immer die Schlange zu sehen), wahrscheinlich auch nicht im 5.5 (siehe http://www.meyerweb.com/eric/css/edge/popups/demo2.html, »What's Up With Explorer?«), kann ich aber nicht testen. Der Hintergrund der Links selbst wird allerdings beim Mouseover wie gewünscht geändert: http://home.t-online.de/home/dj5nu/fanhost/jeena2.jpg (Cursor nicht im Bild)

                                Auf das andere Posting antworte ich noch.

                                Mathias

                                1. Hallo,

                                  Probiere stattdessen margin-top für die li-Elemente, also bspw. .menu li {margin-top:0.4em} im MSIE 5.x-Stylesheet, dann sollte es funktionieren: http://home.t-online.de/home/dj5nu/fanhost/jeena.jpg

                                  Ist das dann der Screenshot mit margin-top:0.4em ? Mensch eine sehr gute Idee, die ich auch nicht nicgt ausprobiert habe.

                                  Kann sich das jemand mal im IE 5 und IE 5.5 angucken, und mir berichten, ob sich dort die Bilder wechseln und so weiter?
                                  Der Bildwechsel oben links funktioniert im 5.0 definitiv nicht

                                  Schade, aber irgendwie finde ich das trotzdem besser als auf JavaScript zu setzten, nicht dass ich Javascript nicht mögen würde, aber es ist irgendwie Proffesioneller. Meine eigene Meinung.

                                  http://www.meyerweb.com/eric/css/edge/popups/demo2.html, »What's Up With Explorer?«)

                                  Jo das habe ich schon oft gelesen, aber irgendwie glaubte ich zu verstehen, dass er da meint dass wenn man keine Höhe und Breite angibt der IE es einfach übereinander macht, also nach der Reihenfolge wie man die links hovert, und nicht mehr wegmacht, wenn man vom Link weggeht. Das habe ich ja gemacht, aber keine Ahnung das ist mir sowieso sehr schleierhaft, warum das bei Änderungen die damit eigentlich nichts zu tun haben, bei irgendeinem Browser immer nicht klappt. Jetzt ist es aber so, dass es in den neuen Browsern geht. Ich gehe mal davon aus, dass es in den Zukünftigen auch funktioniert. Und da ich diese Seite für jetzt und die Zukunft mache finde ich ist das so in Ordnung. Man kommt ja an alle Informationen ran.

                                  Grüße
                                  <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

                                  --
                                  "Of course it does not work, but look how fast it is!"
                      2. Hallo Jeena,

                        ich habe eine Beispiellösung MSIE 5 erarbeitet: http://home.t-online.de/home/dj5nu/fanhost/jeena.html
                        Mit einem \ im Eigenschaftsnamen kann man Styles vor MSIE<6/Win (und Netscape 4 und Opera 5) verstecken, du kannst natürlich auch Conditional Comments verwenden, die wirken genauer.
                        Nach wie vor ist mir nicht klar, wie du .menu und .ende (besser: #ende, also id="ende") dieselbe Höhe in allen Browsern geben willst, denn momentan sorgt ein ungenaues Zusammenspiel zwischen line-height für .menu und line-height für .ende dafür, dass die Boxen ungefähr übereinanderliegen, hier müsstest du dir etwas besseres überlegen, da sich offenbar keine Kombination, auch nicht mit absoluten Einheiten, finden lässt, welche in mehr als einem Browser eine Deckungsgleichheit bewirkt, was wohl aber an der seltsam unterschiedlichen Interpretation von float liegt, und für MSIE 5, 6 und Opera 6/7 und Gecko jeweils gesonderte Styles einzubinden, wäre unangemessen.

                        Mathias

                        1. Hallo,

                          Hallo Jeena,

                          ich habe eine Beispiellösung MSIE 5 erarbeitet: http://home.t-online.de/home/dj5nu/fanhost/jeena.html

                          Danke für die Mühe, aber da ist der obere Rand von .menu 1px weiter unten als der obere Rand von .ende und das sieht ein wenig blöd aus (zumidest ist es hier so auf meinem Opera 7.21/Liux) Hier habe ich das jetzt auch schon hingekriegt: http://jeenaparadies.servebeer.com/selfhtml/gutgesell/
                          Wenn du einen IE 5 und/oder IE 5.5 hast könntest du mir vieleicht sagen, wie sich da das alles so verhält (also Bildwechsel, Schrift vergrößern / verkleinern und so weiter.

                          Mit einem \ im Eigenschaftsnamen kann man Styles vor MSIE<6/Win (und Netscape 4 und Opera 5) verstecken, du kannst natürlich auch Conditional Comments verwenden, die wirken genauer.

                          Kannst du mir das noch mal genauer erklären? Wo finde ich darüber informationen? Ich müsste dann nämlich nicht noch eine extra Datei für den IE 5.x machen. Das wäre dann schon viel schöner.

                          Nach wie vor ist mir nicht klar, wie du .menu und .ende (besser: #ende, also id="ende") dieselbe Höhe in allen Browsern geben willst,

                          Das will ich doch gar nicht. Das soll eigentlich so aussehen wie in Opera 7.21, IE 6, Mozilla 1.5, Safari (weiß nicht mehr welche Version das war)
                          So wie es jetzt ist ist .menu ein wenig unter .ende und so soll das auch sein. Leider kriege ich .menu mit margin-top nicht weiter runter (warscheinlich aus Mangel an allgemeinem Verständniss über margin) Und Wenn ich line-height wie im IE 6 verwende dann ist .menu genau so hoch wie line-height. Das sieht dann scheiße aus. Außerdem ist der letzte link aus mir unerklärlichen Gründen höher als die anderen. Wenn ich aber in der html Datei .ende über .menu lege und mit negativen margin Angaben arbeite dann funktionert der Bildwechsel im IE 6 nicht mehr.

                          Gecko jeweils gesonderte Styles einzubinden, wäre unangemessen.

                          Das stimmt, und das ist überhaut das letzte was ich will. Ich habe es jetzt so gemacht, dass es in den Browsern die ich zur verfügung habe so aussieht wie im Mozilla 1.5 Das sind Opera 7.21; Mozilla 1.5; Firebird 0.7/0.7.1; IE 6.0; (NS 4.77 ein bischen anders ;-))
                          Ich kann mir vorstellen dass es dann in allen Mozillas und Firebirds so aussieht, und in allen Operas 7.x Die zwei IE 5.x haben dann keinen Bildwechsel und auch das nach unten verschobene nicht, also fehlt da so der kleine räumliche Effekt, aber das finde ich nicht so schlimm. Hauptsache es sieht nicht blöde aus.

                          Als ich diese Probleme mit IE 6 hatte habe ich ausprobiert padding-top und padding-bottom um je 1px bei hover zu verkleinern. Das hat eigentlich auch super ausgesehen. Doch leider hat es dann im Mozilla nicht mehr mit dem Bildwechsel geklappt.

                          Ich glaube es liegt eigentlich auch viel an meinem Unwissen, was die einzelnen margins paddings floats und so weiter machen dürfen/können/sollen. Und es wird bestimmt noch sehr lange dauern, bis ich duchsteige, wie sich das W3C das alles theoretisch gedacht hat. Dann kommt noch eine viel längere Periode in der ich herauszufinden versuchen werde was die einzelnen Browser davon wie verstehen. Aber ich hab ja Zeit und Lust dazu, also auf in den Kampf! ;-)

                          Grüße
                          <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

                          --
                          "Of course it does not work, but look how fast it is!"
                          1. Hallo nochmal,

                            Probiere stattdessen margin-top für die li-Elemente, also bspw. .menu li {margin-top:0.4em} im MSIE 5.x-Stylesheet, dann sollte es funktionieren: http://home.t-online.de/home/dj5nu/fanhost/jeena.jpg
                            Ist das dann der Screenshot mit margin-top:0.4em ?

                            Ja.

                            ich habe eine Beispiellösung MSIE 5 erarbeitet: ...
                            Danke für die Mühe, aber da ist der obere Rand von .menu 1px weiter unten als der obere Rand von .ende und das sieht ein wenig blöd aus (zumidest ist es hier so auf meinem Opera 7.21/Liux)

                            Das war beabsichtigt, aber ein Irrtum meinerseits. Da hatte ich dich missverstanden.

                            Wenn du einen IE 5 und/oder IE 5.5 hast könntest du mir vieleicht sagen, wie sich da das alles so verhält (also Bildwechsel, Schrift vergrößern / verkleinern und so weiter.

                            Das Verkleinern und Vergrößern der Schrift funktioniert recht problemlos, es kommt zu keinen Überlagerungen, wobei .menu und .ende bei Vergrößerung natürlich nicht mehr übereinanderliegen, die Links jedoch problemlos umgebrochen werden und lesbar untereinander erscheinen.

                            Mit einem \ im Eigenschaftsnamen kann man Styles vor MSIE<6/Win (und Netscape 4 und Opera 5) verstecken, du kannst natürlich auch Conditional Comments verwenden, die wirken genauer.

                            Kannst du mir das noch mal genauer erklären? Wo finde ich darüber informationen? Ich müsste dann nämlich nicht noch eine extra Datei für den IE 5.x machen. Das wäre dann schon viel schöner.

                            Zum Beispiel hier: http://doxdesk.com/personal/posts/css/20020212-bmh.html

                            .ende {
                             line-height: 1.3em; /* verstehen alle Browser, die line-height verstehen */
                             l\ine-height: 1.4em; /* verstehen MSIE 5.x/Win, NS4 und Opera 5 nicht */
                            }

                            Für Netscape 4 könnte man spezielle Styles mittels /*/*//*/ ... /* */ vergeben, falls gewünscht. Das würde genauso wie e\igenschaft auch auf Opera 5 wirken, dem könnte man durch ein zusätzliches body>.ende {l\ine-height: ...;} danach begegnen.

                            Außerdem ist der letzte link aus mir unerklärlichen Gründen höher als die anderen.

                            Das liegt am Whitespace zwischen dem End-Tag des letzten li-Elements und dem End-Tag des ul-Elements. Entweder er wird entfernt oder zwischen den End- und Anfangs-Tags der li-Elemente wird durchgängig Whitespace verwendet (</li><li> --> </li>[Zeilenumbruch]<li> oder ähnlich).

                            Mathias

                  2. Hallo,

                    noch ein kleiner Nachtrag, es reicht dem IE auch aus wenn man bei a:hover eine andere Rahmenfarbe definiert, z.B. #2E2E2E (dunkel-grau) und ansonsten die Struktur beibehält; das hätte den Vorteil, das es dann auch im Mozilla funktioniert...

                    Das geht mit allen Farbangaben, ausgenommen der Eigenschaft color. Der Wert selbst muss sich nicht ändern, eine andere Schreibweise reicht, zum Beispiel bei der Hintergrundfarbe:

                    .menu a:link {color: #001A88; text-decoration: none; background: url(http://www.jeenaparadies.clever-webspace.de/selfhtml/gutgesell/img/linkback.png) repeat-x #fff;}
                    ...
                    .menu a:hover {color: #78698E; background: url(http://www.jeenaparadies.clever-webspace.de/selfhtml/gutgesell/img/linkback2.png) repeat-x white;}

                    Das ist m.M.n. verallgemeinert betrachtet die eleganteste Lösung. Bei Farben, die sich nicht über vordefinierte Namen ausdrücken lassen, sind Wechsel zu anderen entsprechenden Schreibweisen möglich, welche der MSIE auch als Änderung registriert. Beispielsweise bei border-color/border: border-color:red; <-> border-color:#f00 <-> border-color:#ff0000 <-> border-color:rgb(255,0,0).

                    Die gemeinsamen Eigenschaften von :link, :visited, :hover, :active und :focus würde ich übrigens in eine Regel mit dem Selektor .menu a auslagern (das sind margin, padding, height, border, font-weight soweit ich es sehe) anstatt sie zu wiederholen.

                    Mathias
                    (pure css popups tooltips eric meyer msie internet explorer probleme)

                    1. Hi Mathias,

                      .menu a:link {color: #001A88; text-decoration: none; background: url(http://www.jeenaparadies.clever-webspace.de/selfhtml/gutgesell/img/linkback.png) repeat-x #fff;}
                      ...
                      .menu a:hover {color: #78698E; background: url(http://www.jeenaparadies.clever-webspace.de/selfhtml/gutgesell/img/linkback2.png) repeat-x white;}

                      Das ist m.M.n. verallgemeinert betrachtet die eleganteste Lösung.

                      Du hast recht so ist es noch besser, ja die beste Lösung. Danke für
                      den Hinweis.

                      Und tschüss

                      Hugo

  2. Hi Jeena,

    das erste Problem kannst du lösen, indem du deiner Liste
    eine line-height verpasst, etwa so:

    ul.menu {
             margin: 0;
             padding: 0;
             float: left;
             line-height: 1.3em;
            }

    Zum zweiten Problem kann ich leider nicht beitragen, aber
    vielleicht hilft dir dieser Link:

    http://css.fractatulum.net/sample/hov2format.htm#

    Und tschüss

    Hugo

  3. Hallo,

    Irgendwie gibt es schon wieder probleme bei meinem Provider, hier ein Link, zu der Seite:
    http://jeenaparadies.servebeer.com/open/Webs/gutgesell3/

    Grüße
    <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

    --
    "Of course it does not work, but look how fast it is!"
  4. Hallo,

    Also ich habe es jetzt gelöst, in dem ich oben und unten ein Pixel wegnehme. Das löst zwar das eigentliche Problem nicht, aber es sieht doch ganz ansehnlich aus.

    Leider habe ich nicht unendlich viele verschiedene Browser zum Testen zur verfügung, so dass ich es nur auf [linux] Opera 7.21, Mozilla 1.5-2, Netscape 4.77 [Windows] Firebird 0.7/0.7.1, Internet Explorer 6.0 testen konnte.

    Der Arzt für den ich das machen hat aber den IE 5.0 auf seinem Rechner instlliert. Könntet ihr es euch in verschiedenen Browsern angucken, und mir dann hier bescheid geben, ob das so funktioniert wie es soll? Ich lade es auch extra auf einen Server, der auch erreichbar ist hoch ok? ;-) Sagt auch bescheid, wenn euch was anderes aufgefallen ist.

    Grüße
    <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

    --
    "Of course it does not work, but look how fast it is!"
    1. Hallo,

      http://www.jeenaparadies.clever-webspace.de/selfhtml/gutgesell/
      Kann ja mal in der Hektik passieren sollte aber nicht.

      Grüße
      <img src="http://www.jeenaparadies.it-pc.de/unterschrift.png" border="0" alt="">

      --
      "Of course it does not work, but look how fast it is!"