Layoutprobleme: FF float im foot; IE Formularbreite; FF Zeilenumbruch

[hpvw]

Hallo,
ich habe, wie ihr sicher ahnt, drei Probleme mit der Gestaltung meiner Layout-Vorlage.
Ich habe die HTML-Datei mal online gestellt:
http://www.hpvw.ipme.de/layout.html

Das erste Problem tritt im FireFox (bei mir Version 0.9) auf. gelöst, Danke Quaese
Im Foot der Seite habe ich mit float:right zwei Textbuttons, analog zu den Valid-Bildern des w3c, in einem span zusammengefasst.
Dieses soll so dargestellt werden, wie im IE.
Mein FireFox jedoch macht dafür eine neue Zeile.
Mit denselben css Eigenschaften und derselben html-Struktur im foot funktioniert das aber bei einer anderen Seite tadellos in beiden Browsern.

Das zweite Problem tritt im IE (bei mir Version 6) auf. neues Problem entstanden, siehe Post 2 und 8
Es handelt sich um die Breite des Formulars.
Ich habe, zum Testen, die Hintergrundfarbe der Blockelemente mal hervorgehoben.
Beim IE macht er das Formular breiter als nötig und gewünscht. So entsteht eine häßliche horizontale Scrollleiste, die nur für das Formular da ist.
Den Scrollbalken einfach ausblenden kommt selbstverständlich nicht in Frage. Es könnte ja auch mal ein zu breites Bild auftauchen.
Das Formular wird im Firefox wie gewünscht dargestellt.

Das dritte Problem ist wieder im FireFox. noch ungelöst, siehe auch Post 8
Um zu dem umflossenen Menü den "richtigen" Abstand, also denselben, wie zum body, zu haben, habe ich für h1..6 und p height, max-height und overflow:hidden definiert.
Ansonsten legt er den Hintergrund, bzw. den Border unter das Menü und fängt mit dem Text ohne Abstand direkt an der Navigation an.
Im FireFox sorgt das jedoch dafür, dass zu spät umgebrochen wird. So wird das letzte Zeichen einer Zeile manchmal nicht angezeigt, obwohl er eigentlich (, wie der IE,) bereits umbrechen sollte. Umbrechen tut FF trotzdem, nur halt etwas zu spät.

Ich freue mich auf Eure Lösungsvorschläge.
Wenn es möglich ist, beinhalten diese keine div's und Tabellen.
Ich habe mir nämlich vorgenommen, ein akzeptables Layout ohne "inhaltsleere" Elemente zu machen. Da bin ich bisher ohnehin schon durch Verwendung einiger span's gescheitert, aber evtl. bekomme ich die ja auch noch sinnvoll weg (Dafür suche ich noch sinnvolle Tags für Datum, die besagten Buttons, und einen inline "printOnly" Container).

Vielen Dank und Gruß hpvw

 

[hpvw]

Bei dem zweiten Problem bin ich inzwischen weitergekommen.
Die Breite der Formularfelder habe ich jetzt so, wie ich sie haben will.
Und die Scrolleiste ist auch weg.

Leider sind dabei neue Probleme aufgetreten.
Die Textarea wird im IE 6 unter Win2k bei Änderung des Inhalts breiter

Kann das Problem jemand nachvollziehen, sprich, tritt das bei jemand anderem auch auf?

Wie kann ich das jetzt lösen?

Bei Problem 1 und 3 habe ich immer noch keine Idee, wie ich das lösen kann.

Kann denn keiner helfen?

Gruß hpvw

 

[Quaese]

Hi,

zu Problem 1:
Du definierst am Anfang für die P-Tags mit text-indent das Einrücken der ersten Zeile.
Wenn Du in #foot den Wert wieder auf Null setzt, sollte das Problem gelöst sein.

#foot{ text-indent: 0; /* restliche Definitionen */}

Wieso genau das so ist, kann ich Dir nicht sagen. Ich hatte nur schon ein ähnliches Problem,
wobei das Phänomen - wie schon von Dir erwähnt - auf manchen Seiten auftrat, andere blieben
jedoch davon verschont.

Ciao
Quaese

 

[Gumbo]

Wieso hast du den Absätzen die Eigenschaften display:block; position:relative; overflow:hidden; height:100%; max-height:100%; zugewiesen, die sind doch vollkommen überflüssig?

 

[hpvw]

Super, vielen Dank für die Lösung zu Problem 1.

Zu display:block etc.:
Leider sind die nicht überflüssig.
Wenn die Weggelassen werden, ermitteln beide Browser den Abstand zur "umfloateten" Navigation nicht ?richtig?.
Die Breite des Blocks geht dann unter der Navigation hindurch bis an den Seitenrand.
Das padding wird ebenfalls am Seitenrand ermittelt.
Somit stehen ohne diese Angaben die Texte press an der Navigation, während der untere Rahmen bei den Überschriften unter der Navigation hindurch geht.
Vorher hatte ich sogar für Überschriften eine Hintergrundfarbe, zum Glück gefällt mir die ohnehin nicht mehr, dass sah noch viel schlimmer aus.

Den Sinn an der Art, wie die Browser das interpretieren, erkennt man an einer Kleinigkeit, mit der ich aber leben kann:
So wie es jetzt ist wird ein längerer Absatz, der kurz vor dem Ende der Navigation beginnt, nach dieser nicht an den Seitenrand geführt, sondern in der begonnen Breite fortgesetzt.
Der nächste Absatz beginnt dann am Seitenrand.

Vielleicht läßt sich das aber auch anders umgehen, ich bin leider kein CSS Experte.

Um das zweite Problem in den jetzigen Stand zu versetzen habe ich übrigends an diversen Stellen, die mit dem Kommentarbereich zu tun haben height:auto und width:auto definiert.

Vielen Dank nochmal
Gruß hpvw

 

[hpvw]

So, ich habe jetzt unter http://www.hpvw.ipme.de/layout2.html mal die Variante ohne die von Gumbo angesprochenen Eigenschaften eingestellt und zusätzlich rechts und unten einen margin an die Navigation gemacht.
Das 3. Problem wäre damit behoben.
Allerdings landet der untere Rahmen jetzt in beiden Browsern, wie beschrieben, unter der Navigation. Das gefällt mir gar nicht, lässt sich das irgendwie verhindern?

Gruß hpvw

PS: Netscape 7 entspricht übrigends bei layout2.html der Darstellung im FireFox.
Bei der ersten Variante haut er den unteren Rahmen der Überschriften über die Navigation.
Also werde ich wohl eher an layout2.html weiterdoktorn.

 

[Gumbo]

Wie sollte denn alles in allem aussehen?

 

[hpvw]

Was mich beim jetzigen Stand an Problem 3 stört habe ich mal als Grafik angehängt.
Die hervorgehobene Linie ist Teil des unteren Rahmen der h1. Dieser Block geht soweit an den linken Rand, als wäre die Navigation nicht da, nur der Text dieses Blocks wird entsprechend nach Links geschoben.

Bei Problem 2 bin ich ja inzwischen weiter, jedoch ändert die Textarea im IE ihre Breite, wenn man Text eingibt oder löscht.
Das hatte ich schonmal und auch keine Lösung gefunden.
Ich hoffe das kann irgendwer nachvollziehen.

Danke für die Hilfe hpvw

 

[Gumbo]

Erhöhe einfach des Wert des rechten Rands (margin-right).

 

[hpvw]

Wessen rechten Rand?
Den der Navigation?
Dann verschiebt sich nur der Text. Die Linie bleibt jedoch, wo sie ist.
Das press an der Navigation liegen des textes konnte ich damit bereits verhindern, jedoch bleibt die Linie weiterhin ohne Abstand an der Navigation.