Ergebnis 1 bis 4 von 4
  1. #1
    ~red~ ist offline Mitglied
    registriert
    27-10-2005
    Ort
    Berlin
    Beiträge
    29

    Genaue Positionierung und Browser

    Hallo! Ja! - so ein Mist aber auch. Opera speichert zwar welches Fenster gerade auf war aber nicht den Inhalt.

    Also versuche ich meine Abhandlung nun zum zweiten mal zu schreiben.

    Kurz um es geht wie nicht anders gedacht um eine Internetsite. Diese soll auf Mac und PC laufen und dabei auch noch unter IE, Safari, firefox und Opera gut ausschauen.

    Nix leichter als das dachte ich und fing mit dem gemeinsten an. IE auf PC und siehe da es funktioniert und schaut auch noch recht gut aus. Leider ist es mit der Adaption in die anderen Browser und Systeme etwas kniffeliger. Sprich Ie auf Mac und firefox und Opera auf Win machen was sie wollen. Das mieste passt schon irgendwie aber die Positionierung der Subnavigation macht Probleme. Sie verspringt um einige Pixel nach unten. und selbst mit einer versuchten Bereinigung des Problems im Stylesheet über:

    *{margin:0;padding:0}

    gleich am Anfang der Css-Datei war das Problem nicht zu beheben.

    Weiter ist mir bei meinen Versuchen noch keine zuverlässige Browserweiche untergekommen die die beiden Systeme tatsächlich einwandfrei auseinanderhält. Geschweige denn die Browser.

    Momentan versuche ich es mit:
    <script language="text/javaScript">
    <!--
    if (ver.navigator.appVersion.indexOf("MSIE") != -1) {
    document.write("<LINK REL=\"stylesheet\" HREF=\"http://www.imk.de/testdrive/test/style/style_ie.css\" TYPE=\"text/css\">"); }
    else {}
    if ((navigator.appVersion.indexOf("Mac") != -1)) {
    document.write("<LINK REL=\"stylesheet\" HREF=\"http://www.imk.de/testdrive/test/style/style_mac.css\" TYPE=\"text/css\">"); }
    else {}
    // -->
    </script>
    oder mit
    <?php
    if (eregi('Win',$HTTP_USER_AGENT))
    echo "<link rel=\"stylesheet\" href=\"styles/style_ie.css\" type=\"text/css\">\n";
    else
    if (eregi('Mac',$HTTP_USER_AGENT))
    echo "<link rel=\"stylesheet\" href=\"styles/style_mac.css\" type=\"text/css\">\n";
    else
    ?>
    Zum besseren Verständniss hänge ich noch diese beiden Bilder an.

    Die Seite auf PC im IE 6:
    Ein Bild kommt selten allein!

    und im Opera auf PC:
    Noch eins hilft dabei!

    Dazu dann auch noch die leidige Frage wi ich die Transparenz (60% in einem png) auch für den IE auf Mac erzeugen kann? Für den IE auf win hätte ich mitlerweile eine probate Lösung aber solange der Mac nicht mitspielt brauch ich das mit den übereinanderleigenden Layern nicht versuchen.

    Danke für jede qualifizierte Antwort.
    Sollte noch was unklar sein könnt ihr euch gerne mit mir in Verbindung setzen.
    Da meine erste Beschreibung leider wech iss hoffe ich doch das ich da Problem im 2.-ten Versuch genauso verdeutlichen konnte.

    Einen Link zur momentanen Testseite bekommt Ihr hier! Das ist er, der Link!

    Also alles Gute und für jede Hilfe bin ich dankbar!

    Gruß ~red~ :whacky:
    Geändert von ~red~ (28-10-2005 um 02:07 Uhr)

  2. #2
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Genaue Positionierung und Browser

    Erstmal wenn der IE was "richtig" macht, kannst du davon ausgehen das es falsch ist.

    Aber es ist bei deiner Seite unmöglich irgendwas rauszufinden was, du nutzt ein seltsames und sicher überflüssiges Frameset und behinderst einen mit JS daran an den Quelltext zu kommen. Auch ist dein CSS, wenn man den an den Quelltext gekomen ist, nicht sonderlich übersichtlich. Insofern läßt sich mit den wagen Angaben und was genau das Problem ist nicht helfen. Versuch mal das Problem zu isolieren und den Code nachvollziehbar hier zu zeigen.

  3. #3
    ~red~ ist offline Mitglied
    registriert
    27-10-2005
    Ort
    Berlin
    Beiträge
    29

    AW: Genaue Positionierung und Browser

    Tja was soll ich dir den darauf antworten?

    Das Frameset ist doch in Ordnung! Vier Randframes die den Contentframe in der Mitte halten.
    Eine Frameabfrage (übrigend von hier) die prüft ob die Seite mit oder ohne Frames von Extern geladen wurde.

    Zum Stylesheet:

    Jede Seite lädt das gleiche Stylesheet. Das für den IE! In diesem sind alle Layer festgelegt die in den folgenden Seiten verwendet werden. Sprich die Navigation (also die Sichtbare) und die zuerst nicht sichtbare (#Navigation0) mit Position, Breite und Höhe in Pixeln. Aber das ist auch net wirklich ein Problem. Da das ja funktioniert.

    Was definitiv nicht funktioniert ist die Ausrichtung der Layer die die Subnavi enthalten. (in meinem Stylesheet für jeder Unterrubrik der Layer mit der Bezeichnung LINE1; LINE2; LINE3; usw.) Ich hatte gehofft das mir jemand sagen kann wie ich die Verschiebung genau dieses Elementes in den Verschiedenen Browsern verhindern kann oder zumindest (mit extra CSS-Datei) darauf reagieren kann.!
    Die komplette CSS einmal hier:
    Code:
    a:link  { color: black; font-style: normal; font-weight: 400; font-size: 11px; line-height: 130%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none }
    a:visited  { color: black; font-style: normal; font-weight: 400; font-size: 11px; line-height: 130%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none }
    a:hover  { color: white; font-style: normal; font-weight: 400; font-size: 11px; line-height: 130%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none  }
    a:active  { color: white; font-style: normal; font-weight: 500; font-size: 11px; line-height: 130%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none }
    .Willkommen  { position: absolute; top: 120px; left: 210px; width: 650px; height: 440px; visibility: visible; display: block }
    .headline  { color: black; font-style: normal; font-weight: bolder; font-size: 14px; line-height: 120%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none }
    .infos  { color: black; font-style: normal; font-weight: normal; font-size: 12px; line-height: 130%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none }
    .navigation1  { color: black; font-style: normal; font-weight: 500; font-size: 11px; line-height: 130%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-size-adjust: none; text-decoration: none ; text-align: left; padding-left: 1px; }
    .txtlink  { color: black; font-style: normal; font-weight: normal; font-size: 10px; line-height: 120%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none }
    .contenttext   { font-style: normal; font-weight: lighter; font-size: 11px; line-height: 130%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; padding: 4px }
    .formulartext { font-style: normal; font-weight: lighter; font-size: 10px; line-height: 120%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; padding: 1px }
    .formulartextbold { color: black; font-style: normal; font-weight: bold; font-size: 10px; line-height: 120%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; padding: 1px }
    .content_klein   { font-style: normal; font-weight: lighter; font-size: 10px; line-height: 120%; font-family: arial; padding: 4px }
    .content_forms { font-style: normal; font-weight: normal; font-size: 8px; line-height: 130%; font-family: arial; padding: 4px }
    .Headline2  { font-style: normal; font-weight: lighter; font-size: 20px; font-family: arial }
    .subnavi  { font: 400 10px arial; text-align: center; padding: 1px }
    .buttons { color: #f60; font-style: normal; font-weight: 400; font-size: 10px; background-color: #fff; width: 90px; height: 20px; border: solid 1px #ee6408   }
    .Eingabefeld_1 { color: #4b4d6d; font-style: normal; font-weight: 400; font-size: 10px; background-color: #fff; border: solid 1px }
    .aktiviert  { color: black; font-style: normal; font-weight: bold; font-size: 11px; line-height: 130%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; word-spacing: 0; }
    .aktiviert2  { color: #fff; font-style: normal; font-weight: 400; font-size: 11px; line-height: 130%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;}
    #aktivlink { color: black; font-style: normal; font-weight: bold; font-size: 10px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none }
    #insidebody { height: 600px; width: 810px; left: 0; top: 0; position: absolute; bottom: 600px; z-index: 1; visibility: visible; }
    #Navigation0 { background-image: url(bg_b_60.png); width: 115px; left: 230px; top: 0; position: absolute; height: 100px; z-index: 3; visibility: hidden; min-width: 115px; min-height: 99px; max-width: 115px; max-height: 101px; border: solid 1px white; }
    #Navigation { background-image: url(bg_b_60.png); height: 600px; width: 115px; left: 230px; top: 0; position: absolute; z-index: 5; visibility: visible; min-width: 115px; min-height: 598px; max-width: 115px; max-height: 598px; border: solid 1px white; outline: solid 1px white; }
    #LINE1 { height: 31px; width: 552px; left: 233px; top: 108px; position: absolute; z-index: 6; visibility: visible; }
    #LINE2 { height: 26px; width: 552px; left: 233px; top: 142px; position: absolute; z-index: 6; visibility: visible; }
    #LINE3 { height: 31px; width: 552px; left: 233px; top: 164px; position: absolute; z-index: 6; visibility: visible; }
    #LINE4 { height: 31px; width: 552px; left: 233px; top: 190px; position: absolute; z-index: 6; visibility: visible; }
    #LINE5 { height: 28px; width: 552px; left: 233px; top: 212px; position: absolute; z-index: 6; visibility: visible; }
    #LINE6 { position: absolute; top: 234px; left: 233px; width: 552px; height: 28px; z-index: 6; visibility: visible; display: block  }
    #LINE7 { position: absolute; top: 258px; left: 233px; width: 552px; height: 25px; z-index: 6; visibility: visible; display: block  }
    #LINE8 { position: absolute; top: 272px; left: 233px; width: 552px; height: 30px; z-index: 6; visibility: visible; display: block  }
    #LINE9 { position: absolute; top: 318px; left: 233px; width: 552px; height: 14px; z-index: 6; visibility: visible; display: block  }
    #LINE10 { position: absolute; top: 512px; left: 233px; width: 552px; height: 35px; z-index: 6; visibility: visible; display: block  }
    #LINE11 { position: absolute; top: 544px; left: 233px; width: 552px; height: 31px; z-index: 6; visibility: visible; display: block  }
    #VISI1 { position: absolute; height: 600px; width: 116px; left: 230px; top: 0;  z-index: 4; visibility: visible; }
    #VISI0 { position: absolute; height: 100px; width: 116px; left: 230px; top: 0; z-index: 2; visibility: visible; }
    #Insidebody steht für die komplette Tabelle darunter die den kompletten Inhalt der Seite beinhaltet.
    #aktivlink ist der Zustand des momentan aktiven Links in der vertikalen Navigatin (#Navigation)
    #aktiviert2 ist der aktive Zustand eines Buttons in der Subnavi
    #Line... ist die jeweilige Subnavigation die sich je nach Unterseite vertikal verschiebt. (deshalb für jede Unternavigation eine eigene Position)

    Der Rest ist eigentlich zu vernachlässigen da es sich um spezifische Formatirungen des Inhaltes handelt. (Somit also irrelevant)

    Der Stylesheet wird von extern geladen und auf die elemente angewendet. Nur die Layer mit ID und Inhalt sind in den Dateien abgelegt. Somit läuft ohne Stylesheet gar nix. (Außer man zählt Designschrott dazu)

    #Navigation0 ist der Layer der nach einem Klick auf OFF erscheint und nur das Logo beinhaltet.
    Also ertsmal auch nicht wichtig da es ja vorrangig um eine passende Positionierung von dem Element LINE . . . geht.

    Nun weis ich nicht was ich noch erklären könnte um es dir leichter zu machen.

    Ich hoffe es hilft

    Greeting ~red~ :whacky:

  4. #4
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Genaue Positionierung und Browser

    Wenn du ein Frameset brauchst um Abstände zu simulieren, dann ist es seltsam dass du CSS einsetzt.
    und sichtbare und nicht sichtbare Menüs gibt es auf der Seite nicht. Ich erhalte auf deiner Seite sporadisch (d.h. nicht reproduzierbar) eine JS Fehlermeldung: Fehler: Frameset is not defined

    Dein Problem liesse sich nur lösen, wenn du mal ein Beispiel konstruierst, wo man erkennen kann, was du meinst. So ist und belibt dein HTML und CSS Code unübersichtlich und es läßt sich für mich nichts festellen was im IE anders ist als im FF, abgesehen von der fehlenden Transparenz

Ähnliche Themen

  1. Verschiedene Browser Versionen zulassen
    Von melodei im Forum Tools und Programme
    Antworten: 15
    Letzter Beitrag: 28-09-2005, 11:12
  2. Antworten: 0
    Letzter Beitrag: 06-02-2005, 01:14
  3. Mein Browser ist besser als Deiner
    Von RoyalKnight im Forum Smalltalk
    Antworten: 2
    Letzter Beitrag: 10-08-2004, 11:58
  4. Auflösung und Browser feststellen
    Von staxxx im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 05-10-2003, 14:52
  5. Nop (Browser send Signal an Servlet)
    Von ocelin im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 23-01-2002, 10:31

Lesezeichen

Berechtigungen

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