[marcel schumann]

hi,

ich bin gerade dabei meine hp von tabellen auf boxenmodell umzustellen.
im IE7 und FF2 sieht auf meinem pc auch alles so aus, wie ich es haben möchte.

nur auf anderen pc's mit FF2 und IE6 sind viele boxen nach rechts verschoben,
die div's mit dem dunklen hintergrund wie roter balken kommen in falscher größe,
die dunkle fläche ist nur eine zeile hoch statt 100% höhe, die rote linie ist hier zeilenhoch.

http://atelier-schumann.de/test/

würde mich über tipps freuen,...

danke.

[rob]

Oha!
Mal wieder so eine Sache...
Ich könnte ja jetzt schreiben: "Der Code ist fehlerhaft. Benutze einen Validator."
Darauf läuft es im Endeffekt auch drauf hinhaus... *g*
Aber trotzdem haue ich jetzt mal in die Tasten und schreibe was zu den Fehlern, die mir so ins Auge springen...

Also...

Der Quellcode der Site enthält noch einige Fehler.
Diese würde ich als allererstes mal korrigieren.
Wenn der Code dann fehlerfrei ist, kann man sich um die Darstellungsfehler kümmern.

Gut ist schon mal, daß du den Browser per Doctype-Switch in den standardkompatiblen Modus geschaltet hast.
Im Quirks-Mode setzt der MSIE das Box-Modell noch weniger korrekt um...

Da der MSIE 6 einige Probleme (Bugs) bezüglich der CSS-Darstellung hat, sollte man diesem ein anderes Stylesheet zu futtern geben.
Dazu kann man gut mit Conditional Comments arbeiten.
SelfHTML führt hier einige Möglichkeiten (CSS-Hacks) auf, die du einsetzen kannst.

Dann hast du ein weiteres Problem in deinem Code.
Die Krankheit nennt sich Divits.
Du mußt nicht jedes Element in ein Div fassen.
Du kannst deine Elemente doch direkt formatieren...

Außerdem würde ich davon abraten, überall Inline-Styles einzusetzen.
Lager diese komplett in einem externen Stylesheet aus.
So hast du eine übersichtliche Trennung zwischen Markup und Design.
Ganz schlimm sind die von dir eingesetzen Font-Tags.
Die solltest du in gar keinem Fall verwenden, weil diese ausschließlich für die Darstellung da sind und das sollte alles per CSS gemacht werden.
Das Element Font hat semantisch gesehen, gar keinen Auszeichnungssinn...
Außerdem wurde es in HTML 4.0 und in XHTML 1.0 als deprecated eingestuft.
Verwende es nicht mehr. Nutze CSS!
Gleiches für deine Center-Tags.
Und Ähnliches gilt für deine Hintergrund-Formatierungen (z.B. bgcolor). Nutze CSS!

Gruselig ist es auch, daß du Tabellen für Layoutzwecke mißbrauchst.
Früher war das in HTML notwendig. Aber jetzt, wo du das alles mit CSS machen kannst, ist das wirklich unschön.
Tabellen sind für tabellarische Inhalte gedacht. Für anderes solltest du sie nicht mehr einsetzen.
Und das gilt ganz besonders für XHTML.


Und dann bekommst du Probleme, wenn ein Parser wirklich ganz korrekt arbeitet.
In XHTML müssen Attributwerte zwingend in Anführungszeichen gesetzt werden, währen das in HTML nicht nötig ist.

[marcel schumann]

vielen dank an rob,

super tips , super hilfe . . . probiere das gleich mal aus.

[marcel schumann]

hallo,

habe soweit alles geändert wie vorgeschlagen, aheb aber noch folgendes problem:
warum wird die höhe bei style class a126 richtig dargestellt, aber bei a6 und a901 vom IE6 ignoriert ?
(http://www.atelier-schumann.de/test/layout.css)
und warum geht die class aktuell nicht bei den select optionen im FF2? (selected soll eine andere farbe haben)

ich verwende ein kleines jav-script (http://www.atelier-schumann.de/test/show_image.js),
um das bild zu vergrößern - im FF2 und IE7 ist alles o.k. und
im IE6 wird top und left an die curserposition gesetzt. wie kann ich das verhalten umgehen.

an IE6 - Anpassungen arbeite ich noch ...


wäre dankbar für tips ...

[magicslider]

hi,

id="a6" erweiter den body um height:100%;
mach statt dem png ein gif für die transparenz

id="a126" erweiter hier um line-height:5px;
und mach ein   in den div

das mit der bildposition muss ich mir noch ansehen,...