Xenya: Probleme bei Gestaltung mit InternetExplorer

SELF-Forum

Probleme bei Gestaltung mit InternetExplorer

Xenya
– Informationen zu den Bewertungsregeln

Hallo,
ich habe eine Seite die auf dem Firefox wunderbar funktioniert. Nun will aber mein Chef, dass diese auch mit dem InternetExplorer 7 verwendbar ist.

Da ich bei Dingen wie AJAX-Abfragen über jQuery gegangen bin, um möglichst flexibel zu sein, geht das meiste wunderbar.
Aber meine Seitengestaltung leidet darunter.

Vor allem 2 Style-Angaben versagen anscheinend komplett. Zum einen float right. Alles was im float right steht wird in eine neue Zeile geschrieben und nicht wie erwartet rechts von float left Elementen.

Zum anderen position fixed. Das macht nichts. Absolute anstelle von fixed geht, wenn ich aber mit absolut einen bereich über top und bottom aufspannen will, zeigt er gar nichts mehr an.

Hierfür suche ich workarounds, wie ich das gleiche Verhalten in firefox und ie bekomme.

Um ein besseres Verständnis für meine Probleme zu haben hier noch genauere Erklärungen, wie es aussehen soll.

Ich habe eine Header Zeile, die immer oben sein soll und eine Footer Zeile, die immer ganz unten sein soll. Beide haben eine feste Höhe.
Der Content der dazwischen ist soll den kompletten restlichen Platz ausfüllen, egal wie groß das Fenster ist. Wenn der Content größer ist wie dieser Bereich, soll nur der Content-Bereich gescrollt werden, Kopf und Fußzeile sollen oben und unten bleiben.

Um dies zu bekommen habe ich mit fixed gearbeitet. Mit top und bottom habe ich die Höhen angegeben, damit der Bereich dahingegen aufgespannt wird, wie ich es will.

Das ist die eine Sache die nicht geht.

Die andere das float right.
Dies wird an 2 Stellen verwendet:
In der Kopfzeile sind 3 Elemente, eins links, eins in der Mitte und eins rechts.
Dafür ist der gesamte div block, in dem alle 3 Elemente sind mit einem text-align: center versehen. So kommt das mittige Element an den richtigen Platz.
Das linke Element bekommt float left, das rechte float right.
Alle Elemente stimmen vom Platz, nur das mit float right ist in einer neuen Zeile.

außerdem kommt float right in einem Eingabefeld vor, um 2 Eingabefelder mit Label nebeneinander so zu platzieren, dass sie sich am Rand des Feldes ausrichten.

Hier per Code ein Beispiel:

  
<html>  
<body>  
<div style="position: fixed; left: 0; right: 0; top: 0; text-align: center;">  
	<div style="display: inline-block; float: left;">Header left</div>  
	<div style="display: inline-block;">Header center</div>  
	<div style="display: inline-block; float: right;">Header right</div>  
</div>  
<div style="position: fixed; bottom: 20px; left: 0; right: 0; top: 35px; overflow: auto;">  
	Hauptkontent  
	  
	<div style="position: absolute; top: 50px; left: 10px; width:300px; height: 400px;">  
		<div>  
			<label for="i1">L1</label><label for="i2" style="float: right;">L2</label>  
		</div>  
		<div>  
			<input id="i1"type="text" style="width:130px;"/><input id="i2"type="text" style="float: right; width:130px;"/>  
		</div>  
	</div>  
</div>  
<div style="position: fixed; left: 0; right: 0; bottom: 0; height: 20px;">  
	Footer  
</div>  
</body>  
</html>

Falls jemand weiß wie ich das so umsetze, dass es auch im Internet-Explorer funktioniert, wäre ich sehr dankbar.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Probleme bei Gestaltung mit InternetExplorer

    Alexander (HH)
    – Informationen zu den Bewertungsregeln

    Moin Moin!

    Spontag würde ich mal sagen: Garbage in, Garbage out.

    Die Tagsuppe ist kein gültiges HTML. Demzufolge darf jeder Browser raten, was Du wirklich wolltest, und die Browser raten unterschiedlich gut. Stichwort: Quirks Mode.

    Mal so am Rande: Warum benutzt Du Inline-CSS statt eines zentralen Stylesheets?

    Alexander

    --
    Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Probleme bei Gestaltung mit InternetExplorer

      Xenya
      – Informationen zu den Bewertungsregeln

      Hallo,
      Danke für die Antwort.

      Inline-CSS habe ich nur für dieses Beispiel genutzt.

      Ok, wenn dies kein gültiges HTML ist würde ich mich freuen, wenn ich darüber aufgeklärt werde wieso dies nicht gültig ist, wie man es anders macht und wie ich meine vorstellungen am besten umsetzen kann.

      Ich würde gerne etwas lernen.
      Mein Vorgehen entstand durch mein mein Halbwissen und dem was ich über google zusammen gesucht habe. Das heißt, ich weiß erstmal nicht wie ich weiter vorgehen soll, deshalb habe ich mich hier auch gemeldet.
      Würde mich also total freuen, wenn du mir die Fehler zeigst und die richtigen alternativen aufzeigst, damit ich in Zukunft html-konformeren code produzieren kann.

      Vielen Dank.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Probleme bei Gestaltung mit InternetExplorer

        Alexander (HH)
        +2 Informationen zu den Bewertungsregeln

        Moin Moin!

        Ok, wenn dies kein gültiges HTML ist würde ich mich freuen, wenn ich darüber aufgeklärt werde wieso dies nicht gültig ist

        * Validator öffnen
        * "Validate by Direct Input" klicken
        * Tagsuppe aus https://forum.selfhtml.org/?t=207922&m=1413764 in das Feld "Enter the Markup to validate:" kopieren
        * "Check"-Button klicken
        * Ergebnis lesen und verstehen

        Die Validator-Ausgabe enthält einige Links, die die gefundenen Probleme etwas ausführlicher erklären.

        Zwei Probleme machen es dem Validator mit der unveränderten Tag-Suppe besonders schwer:

        * Unable to Determine Parse Mode!
        * No DOCTYPE found! Checking with default HTML 4.01 Transitional Document Type.

        Mit einer hinzugefügten Doctype-Angabe (ich hab mal stumpf HTML5 angenommen) gibt der Validator etwas hilfreichere Meldungen aus:

        * No Character encoding declared at document level.
        * Element head is missing a required instance of child element title.
          (Der ist etwas fies, weil HTML5 einige Dinge implizit annimmt.)
        * No space between attributes.

        Umgestellt auf HTML 4.01 strict gibt es ähnliche Probleme:

        * document type does not allow element "BODY" here
        * NET-enabling start-tag requires SHORTTAG YES
        * end tag for "HTML" which is not finished

        Vergleich mal das <http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=Grundgerüst einer HTML-Datei> mit Deiner Tag-Suppe, insbesondere welche Elemente in welcher Verschachtelung vorkommen.

        Ich würde gerne etwas lernen.

        Guter Anfang.

        Hast Du Dich schon schlau gemacht, was "Quirks Mode" bedeutet? Google, Forumsarchiv, Wikipedia dürften allesamt hilfreiche Werkzeuge dafür sein.

        Alexander

        --
        Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
        Beitrag melden
        +2
        Informationen zu den Bewertungsregeln

        1. Probleme bei Gestaltung mit InternetExplorer

          Xenya
          – Informationen zu den Bewertungsregeln

          Hallo,
          nochmals danke für die Antwort.

          Ich werde mir die Validator-Angaben mal genauer anschauen.

          Das Beispiel vorher war wirklich nur ein Beispiel und auf das nötigste reduziert.

          Natürlich habe ich den Grundaufbau wie auf deiner Grundgerüst-Seite.
          Ich dachte ich lasse alles weg was unnötig ist, um wirklich nur das mit dem "float: right" und dem "position: fixed" zu zeigen.

          Das echte Projekt ist um einiges größer und wird auch mit JSF (Java Server Faces) erstellt. Habe das mal durch den Validator gejagt.
          Der gibt mir vor allem Fehler zurück, die JSF gemacht hat (zum Beispiel für verschiedene hidden input Felder die JSF zur Session-Handling anlegt die gleiche id oder das nicht vorhandene Attribut autocomplete dort).

          Normalerweise habe ich auch eine Doctype-Angabe.
          Ja, normalerweise. Hab da sofort nachgeschaut und gesehen, dass ich diese auskommentiert hatte. Habe anfangs GoogleMaps genutzt das damit nicht mehr geht.
          Jetzt nutze ich eine andere Karte, wieso es wieder gehen müsste.
          So sieht nun der Anfang aus:

            
<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
...

          Was hat sich durch die neue Doctype-Angabe geändert?
          Im Firefox: Ein "Margin-Effekt" den ich vorher hatte ist weg. Kann ich mit einer expliziten Margin-Angabe nachholen.
          Ansonsten wie immer.

          Im InternetExplorer 7: Fixed funktioniert nun anscheinend. Die Angabe "float: right" macht aber immer noch eine neue Zeile.
          Ein Problem ist dazu gekommen:
          Aus unerklärlichen Gründen (es wird auch kein Fehler angezeigt) wird die Karte nicht mehr dargestellt.
          Für sie ist im Content-Bereich ein <div id="map" style="width:100%; height:100%;"></div> vorgesehen. Durch <body onload="init();"> wird dieser eigentlich gefüllt. Funktionert im Firefox und funktionierte ohne Doctype angabe auch im IE. Nun nicht mehr.

          Wie gesagt, ich werde nochmals die Links vom Validator studieren, vielleicht erfahre ich so etwas über float: right

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Probleme bei Gestaltung mit InternetExplorer

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@Xenya:

            nuqneH

            <?xml version="1.0" encoding="UTF-8"?>
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            Damit schickst du immer noch einige Browser in den Quirksmodus. Lass die optionale XML-Deklaration weg!

            Qapla'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln