Float-Probleme mit IE + richtige Maßeinheit

[Fabian St.]

Hi!

Ich schreibe gerade für meine Website eine Admin-Seite, auf der ich dann bestimmte Artikel/News/kommentare online mittels PHP/MySQL bearbeiten kann. Der PHP/MySQL Code steht und funktioniert bereits, jetzt ergeben sich jedoch - bei dem vermeintlich leichteren - CSS Probleme:

Es geht um folgende Seite:

http://fabis-site.net/admin/index1.html

und speziell um den IE. Wenn man nämlich die Seite mit dem IE (in meinem Falle 6.0 unter WinXP) anschaut, so wird das content-div unter das (#menu) geschoben, obwohl im #menu ein float:left steht. Mozilla und Opera zeigen es richtig an. Zur Verdeutlichung hat das content-div einen roten Rahmen.

Weiß jemand den Grund dafür und hat vielleicht eine Lösung parat?

P.s DIe Seite ist als XHTML und CSS validiert.

---------------------------------------------------------------------

So nun zu meiner zweiten Frage:

Bisher habe ich sämtlichen Positionierung/margin/padding - Werten als Maßeinheit Pixel zu Grunde gelegt. Bekanntlich ist dies auch in Hinsicht auf Zugänglichkeit und Barrierefreiheit nicht das Beste. Nun hat mir bereits Cheatah in diesem Thread (http://forum.de.selfhtml.org/archiv/2004/7/85915/#m506986) den Ratschlag gegeben möglichst auf em zu setzten. Das habe ich auf obiger Seite getan - doch immer mit der Frage im Hinterkopf, wann genau man em verwenden sollte. Nur bei der Schriftgröße, auch bei der Breite, Höhe, bei margin, padding?

Ich wäre froh, wenn mir das noch jemand erläutern könnte ;-)

Grüße,
Fabian St.

[Cheatah]

Hi,

Weiß jemand den Grund dafür und hat vielleicht eine Lösung parat?

Box Model Bug, Three Pixel Text Jog, Doubled Float Margin Bug - such' Dir was aus, eins von denen wird's sein. Lösungen findest Du mit diesen Stichworten im Netz.

Cheatah

[Fabian St.]

Hi Cheatah!

Box Model Bug, Three Pixel Text Jog, Doubled Float Margin Bug - such' Dir was aus, eins von denen wird's sein. Lösungen findest Du mit diesen Stichworten im Netz.

Wie ich diese Bugs hasse... :-(
Na gut, dann will ich mich mal dran setzten.

Vielen Dank!

Grüße,
Fabian St.

[Cheatah]

Hi again,

So nun zu meiner zweiten Frage:

aah, glatt übersehen.

wann genau man em verwenden sollte. Nur bei der Schriftgröße, auch bei der Breite, Höhe, bei margin, padding?

Bei allem, was direkt oder indirekt von der Schrift abhängt. Es macht beispielsweise wenig Sinn, ein Foto mit em-Größen zu versehen. Überlege Dir also, ob die Länge irgendeinen Zusammenhang zur Schrift besitzt.

Cheatah

[Fabian St.]

Hi again ;-)

Bei allem, was direkt oder indirekt von der Schrift abhängt. Es macht beispielsweise wenig Sinn, ein Foto mit em-Größen zu versehen. Überlege Dir also, ob die Länge irgendeinen Zusammenhang zur Schrift besitzt.

Also kann man theoretisch beinahe alles mit em auszeichnen, weil sowohl Breite, Höhe, padding u. margin-Werte von Schriftgröße abhängen. Während

border:1em solid blue;

demnach wohl wenig Sinn machen würde, weil der Rand nicht von der Schrift abhängig ist.

Ist das alles soweit korrekt?

Grüße,
Fabian St.

[Cheatah]

Hi,

Also kann man theoretisch beinahe alles mit em auszeichnen, weil sowohl Breite, Höhe, padding u. margin-Werte von Schriftgröße abhängen.

frage Dich, in welchem Maße. Die Breite eines Textbereiches kann ggf. "zu groß" sein, um realistisch betrachtet zur Schrift zu gehören.

Während
border:1em solid blue;
demnach wohl wenig Sinn machen würde,

Auch das kann man anders entscheiden (wobei etwas wie 0.1em vermutlich passender wäre).

Ist das alles soweit korrekt?

Es ist immer eine Entscheidungsfrage, ein klares Ja oder Nein kann man selten geben.

Cheatah

[MudGuard]

Hi,

Also kann man theoretisch beinahe alles mit em auszeichnen, weil sowohl Breite, Höhe, padding u. margin-Werte von Schriftgröße abhängen. Während

Ich gehe anders vor:

Alles, was nicht direkt von Pixelmaßen (also von Bildern u.ä.) abhängt, wird mit em gemacht.

Also auch:

border:1em solid blue;

Ich halte es durchaus für sinnvoll, bei größerer Schrift auch dickere borders zu haben. Wobei 1em mir schon sehr dick vorkommt ;-)

cu,
Andreas

[Marc]

Moin moin

Bei allem, was direkt oder indirekt von der Schrift abhängt. Es macht beispielsweise wenig Sinn, ein Foto mit em-Größen zu versehen. Überlege Dir also, ob die Länge irgendeinen Zusammenhang zur Schrift besitzt.

Also kann man theoretisch beinahe alles mit em auszeichnen, weil sowohl Breite, Höhe, padding u. margin-Werte von Schriftgröße abhängen. Während

border:1em solid blue;

demnach wohl wenig Sinn machen würde, weil der Rand nicht von der Schrift abhängig ist.

Ist das alles soweit korrekt?

Jein - auch bei Abständen macht es IMHO wenig Sinn - hier setze ich in der Regel auf Prozent-Angaben.

1 em ist die Größe des Buchstabens "M" - d. h., wenn Du die Schrift vergrößerst (Strg und + im Mozilla), dann werden auch die Abstände größer. Das ist ein Problem, weil dann weniger Platz für die größere Schrift bleibt.

Breiten vom Menü sollten in em sein, da sonst die Schrift schnell aus dem Menü herauswächst, der (in der normal-Einstellung meistens) recht große Inhaltsbereich sollte dann schrumpfen - erreicht man dadurch, dass man einen entsprechenden Rand (margin) mittels em definiert.

Ein ganz einfaches Beispiel:

div#menu {
  position:absolute;
  top:0;
  left:0;
  width:10em;
}

div#main {
  position:absolute;
  top:0;
  left:10em;
  margin-left:5%;
}

So erhält man ein Menü, das mit der Schrift wächst, einen Hauptbereich, der entsprechend schrumpft und man hat einen Abstand zwischen beiden von 5% der Fensterbreite - d. h. einen kleinen Abstand bei Leuten die wenig Platz, weil ein schmales Fenster haben und einen etwas größeren Abstand bei Leuten, die ein entsprechend breites Fenster öffnen.

Diesen Abstand könnte man vielleicht auch absolut angeben (also px) würde ich aber nicht machen...

Am besten mal ausprobieren!

Gruß,
Marc.

[Fabian St.]

Hi!

Hier noch mal eine kleine Rückmeldung, zu meinem bisher ungelösten ersten Problem:

Ich habe jetzt auf Cheatahs Rat hin, Google nach einigen IE Bugs befragt, aber keiner (bis auf den Double Float Margin Bug) scheint so wirklich mein Problem zu treffen:

• Box-Modell-Bug: Ich habe kein pixelgenaues Design, die falsche Berechnung von padding, width, border-width trifft nicht zu, zumal der IE 6.0 sich bei mir Standard-Mode befindet (laut document.write("Darstellungsmodus:" + document.compatMode);).

• Three Pixel Jog Text: Diesen Bug kann ich auch nicht bestätigen.

• Über google habe ich folgenden Link gefunden: http://spotlight.de/zforen/web/m/web-1091031259-14156.html

Der Fragesteller hatte - wie ich nach dem Betrachten der Seite feststellen konnte - genau das gleiche Problem. Aber leider findet sich hier auch keine Lösung.

Ich habe jetzt mal aus reinem Interesse dem content-div ein float:right; zugewiesen. Aber dann schauts im Mozilla genauso aus wie jetzt im IE.

Ich komme einfach nicht weiter :-( Hat noch jemand einen Tipp?

Grüße,
Fabian St.

[Cheatah]

Hi,

• Über google habe ich folgenden Link gefunden: http://spotlight.de/zforen/web/m/web-1091031259-14156.html

http://www.positioniseverything.net/explorer.html ist ein Quell der Freude[tm]. Mein Lieblingsbug ist der Creeping Text Bug ;-)

Cheatah

[Fabian St.]

Hi!

Jetzt, nach genau 5h 10min, habe ichs geschafft. Ich habe meinen ganzen bisherigen Code umgeworfen und alles komplett neu geschrieben und siehe da - jetzt funktionierts :-)

Eine kleine Frage hätte ich da noch. Folgenden Aufbau habe ich:

_______________________________________________________________

---------------+ +--------------------
               | |
#menu{         | |#content
 float:left;   | |
 width:16em;   | |
}              | |
               | |
               | |
               | |
               | |
---------------+ +---------------------

Bei content muss ich jetzt margin-left:17em; angeben, um das content-div 1em von dem anderen zu positionieren. Ist das so gedacht, oder ein Bug?

Grüße,
Fabian St.

[Cheatah]

Hi,

Bei content muss ich jetzt margin-left:17em; angeben, um das content-div 1em von dem anderen zu positionieren. Ist das so gedacht,

ja. Ohne dies verläuft der Content-Bereich unterhalb des gefloateten Elements.

Cheatah