nicht angemeldet
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.
Gunnar Bittersmann