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



## hpvw (8. Dezember 2004)

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 (8. Dezember 2004)

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 (9. Dezember 2004)

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 (9. Dezember 2004)

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 (9. Dezember 2004)

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 (9. Dezember 2004)

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 (9. Dezember 2004)

Wie sollte denn alles in allem aussehen?


----------



## hpvw (9. Dezember 2004)

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 (9. Dezember 2004)

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


----------



## hpvw (9. Dezember 2004)

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.


----------



## Budman (9. Dezember 2004)

Hallo!

Nicht "rechts an der Navi" sondern "links an der Überschrift". Dann sollte es eigentlich auch klappen.  Wenn ich mich nicht verschaut habe, ziehst Du bei der Formatierung von "h1" die Linie an die Navi dran (durch den Einsatz von "0.5em"). Hierzu noch ein kleiner Hinweis zu "em" (Quelle: SelfHTML):


> Andere Angaben wie em oder Prozentwerte umgehen zwar das Problem der unterschiedlichen Bildschirmdarstellungen - aber erstens kann man bei einer Angabe wie 1.2em kaum von "Formatierung" reden, und zweitens bereiten solche Angaben auch andere Probleme. So kann es beispielsweise durch das Prinzip der natürlichen Vererbung passieren, dass Schriftarten bei mehrfach verschachtelten Elementen (etwa bei Listen oder Tabellen) immer kleiner oder größer werden. CSS 2.0 bietet zwar mit den erweiterten Möglichkeiten, Seite Formate für verschachtelte Elemente zu definieren, Maßnahmen zur Abhilfe an, doch das nutzt vorläufig auch nichts, solange es in vielen noch verbreiteten Browsern nicht funktioniert.
> 
> Um die "richtigen" und "falschen" Maßangaben ist angesichts all dieser Probleme in einigen Kreisen schon ein richtiger Glaubenskrieg ausgebrochen. Die einen behaupten, man solle sich an Angaben wie pt halten, weil ein Punkt immer gleich groß zu sein hat, die anderen beschwören die em-Angabe wie einen Erlösergott.



Ich wollte Dich da nur nochmal fragen, warum keine "div"-tags? Diese sind imho ein wesentlicher Teil von CSS, solange man sie nicht als "Lückenfüller" oder, wie Du schon sagtest, "inhaltsleer" verwendet, sondern sinnvoll und dort nutzt wo nötig.

Ich verwende in solchen Fällen immer als schönes Beispiel CSS Zen Garden als Beispiel für den gelungenen Einsatz von CSS. Aber auch dort ist eine Verwendung von divs unverzichtbar.

Gruss Bud


----------



## hpvw (9. Dezember 2004)

Hallo Budman.
Wie meinst Du das mit dem linken Rand an der Überschrift?
Der würde sich dann ja, so wie es jetzt mit den 2% (die 0.5em sind top und bottom) auch ist, auf den Seitenrand beziehen?
Dann müßte ich ihn ja so breit (+Abstand), wie die Navigation machen.
Ich weiß jedoch vorher nicht, wie breit die Navigation ist.
Die Seite wird im Endeffekt dynamisch erstellt und die Navigation soll soviel Platz einnehmen, wie sie gerade braucht.
Außerdem würde die Angabe sich ja auch auf alle anderen h1-Überschriften beziehen.
Da die Seite dynamisch erstellt wird und die User unterschiedliche Fensterbreiten haben (die ich ihnen gönnen will), weiß ich ja auch nicht, welche Überschrift die erste ist, die nicht mehr neben der Navigaton, sondern darunter steht.
Vielleicht habe ich Dich ja auch falsch verstanden.

Zu em:
Bei pt und px lässt der Internetexplorer keine Änderung der Schriftgröße durch den User zu. Das will ich dem User aber nicht verbieten.Im Firefox weiss ich selbst nicht mehr, ob ich normale, größere oder kleinere Schriftgröße habe. Wenn ich's nicht mehr lesen kann mache ich Strg +, wenn es mir ins Gesicht springt, mache ich Strg -.
Sicherlich muss man auf Verschachtelungen achten, aber damit kann ich leben, manchmal ist das ja auch gewünscht.
Danke für den Hinweis, wie Du siehst geht es mir nicht um absolute Größen, sondern um die relativen Unterschiede zwischen den Elementen unterschiedlicher Bedeutung.

Zu den div's:
Wenn es nicht anders geht nehme ich auch ein div. Die div's sind zwar im html-Standard, aber an sich unter dem Aspekt der inhaltlichen Auszeichnungssprache IMHO fehl am Platz.
Mit dieser Seite habe ich mir selbst den Anspruch gesetzt html in seiner "reinsten" Form zu verwenden und die Gestaltung ausschließlich dem css überlassen.
Mir ist auch aufgefallen, dass, wenn man zum Beispiel den gesamten Content in ein div packt (also alle h1..6, p, etc), der Firefox merkwürdiges beim drucken fabriziert.
Wie im css schon ansatzweise zu erkennen, will ich auch die spezielle Formatierung für den Ausdruck berücksichtigen.
An welcher Stelle meinst Du, könnte ein div helfen?

CSS-Zengarden ist in der Tat eine faszinierende Seite.
Alles nur mit einem anderen css umfzuformatieren ist für mich allerdings nicht relevant, da der Content ohnehin formatierungsunabhängig in einer Datenbank steht. Das heißt ein neues Template und die Seite sieht ganz anders aus. Über verschiedene "Ausgabeprozessoren" lässt sich dann sowohl das Menü, als auch der Text beliebig anpassen und auf die Seite verteilen, wenn es nötig werden sollte.

Vielen Dank für deine Anregungen, vielleicht kannst Du ja noch mal sagen, ob ich Deinen Hinweis mit dem margin richtig verstanden habe. In dem Fall hätte es nämlich leider nicht den gewünschten Effekt.

Gruß hpvw


----------



## Gumbo (9. Dezember 2004)

Warum sollen div-Elemente IYHO (ich hasse solche Abkürzungen) unter dem Aspekt einer Auszeichnungssprache fehl am Platze sein? Die Elemente div und span sind doch dazu gedacht, mehrere zusammengehörige Elemente zu gruppieren.
Und was in HTML und XHTML (bis Version 1.1) das div-Element zur semantischen Strukturierung ist, wird in XHTML sogar noch einen Helfer bekommen, das section-Element.


----------



## hpvw (9. Dezember 2004)

Im Prinzip ist die Gruppierung ja eine durchaus semantische Auszeichnung.
In den Beispielen zu der in XHTML2 geplanten section wird aber auch klar, wie diese Sematik zu sehen ist. Es soll, so wie ich das sehe, ja die h1 bis h6 überflüssig machen (die mich nerven, seit ich mit html zu tun habe).
div's werden in der Regel jedoch meist zur rein optischen Gruppierung verwendet. Dafür ist html jedoch nicht gedacht.
div's haben auch nicht die Intention (wie section) eine Gruppierung im Sinne von wissenschaftlichen Arbeiten und ihrer Struktur zu definieren. Dafür sind ja (noch) h1 bis h6 zuständig.
Aber wir driften vom Thema ab   

Gruß hpvw


----------



## Gumbo (9. Dezember 2004)

Wo liegt denn deiner Meinung nach die Grenze zwischen optischer und semantischer Gruppierung?
Fasse ich mehrere Absätze zu einem semantischen Block zusammen, ist es eine semantische Gruppierung. Fasse ich jedoch mehrere Absätze zu einem semantischen Block zusammen, um diesse später noch durch einen zusätzlichen Rand auch optisch von anderen Elementen abzugrenzen oder in einer anderen Art und Weise hervorzuheben, ist es dann eine optische Gruppierung?


----------



## hpvw (9. Dezember 2004)

Die Grenze ist sicherlich fließend.
Für mich persönlich ist eine semantische Gruppierung eine Zusammenfassung, wie sie zum Beispiel in dem Beispiel von section gemacht wird.
Eine semantische Gruppierung ist meiner Meinung nach nicht gegeben, wenn ich zwei Blockelemente direkt ineinander schachtel. Also z.B.:
<div>
<div>
Bla
</div>
</div>
In Bezug auf mein Layout hielte ich auch <div><ul id="navi">...</ul></div> für eine rein optische Gruppierung.
Schachtelungen, die keine zusätzliche semantische Information liefern halte ich für optische Gruppierungen.

In Bezug auf den Thread nochmal:
Könnte ein div denn für eins der noch bestehenden Probleme Abhilfe schaffen?
Gibt es für die spans die ich verwende, aussagekräftigere, sinnvolle Elemente?

Gruß hpvw


----------



## Gumbo (9. Dezember 2004)

Anstatt der vermeintlich überflüssige span-Elemente würde ich mir eher Gedanken über die falsche Verwendung von geschützten Leerzeichen machen, denn die sind keinesfalls für gestalterische Aspekte gedacht, sondern für semantische.


----------



## hpvw (9. Dezember 2004)

Gumbo hat gesagt.:
			
		

> Anstatt der vermeintlich überflüssige span-Elemente würde ich mir eher Gedanken über die falsche Verwendung von geschützten Leerzeichen machen, denn die sind keinesfalls für gestalterische Aspekte gedacht, sondern für semantische.


Da hast Du recht. Ich habe erstmal direkt im a ein padding-right eingefügt.


----------

