hiho!

ich werkel seit ner gewissen zeit an einer homepage, und hab da ein "kleines" problem bezüglich kompatibilität.
im ie siehts 1a aus (aufbau, nicht design - ist ja geschmackssache) und im firefox nicht.
das ganze ist relativ konform gestaltet (nur kleinere fehler, laut validator), weshalb ich über die großen unterschiede verwundert bin

hier mal der source: http://home.arcor.de/der_exec -> _index.html + styles.css

wäre nett, wenn ihr das mal auseinandernehmen würdet.

äußerungen zu design sollen dabei doch eher hintergründig sein, da es mir vorallem auf eine gleiche darstellung ankommt (logisch)

mfg

"selbermachen rockt am meisten :D" - -LeJean-

Definiert mal die Reihenfolge der divs (z-index: zahl;), dann sollte schonmal das Logo zuoberst liegen. In Opera siehts nochmal anders aus als in Firefox oder IE. Also macht jeder Browser was er will -> css-Eigenschaften haben nicht "feste"/absolute Werte, also z.B. in px sondern welche die Interpretationsspielraum lassen. Denk mal das Ganze muss mit border / margin / padding zusammenhängen.

In Zukunft: am besten während dem coden die Seite in IE & Firefox immer mal wieder testen, dann weis man sofort welche geänderte Eigenschaft Probleme bereitet -> man kann sofort drauf eingehen und es fixen (oder tolerieren).

O o
/¯¯/_o___o___o___o____o__
\__\¯¯o¯¯¯o¯¯¯¯¯¯o¯¯¯¯¯¯o
i'm doctoroctogonnafuckinggonnapus blaaaaaaaaaaargggggg-

Sorry, bin zu faul das ganze durchzulesen, aber ich poste jetzt einfach mal was, was dir helfen könnte, da ich floats entdeckt habe:

Wenn du in nem Div irgendwo zwei Block Elemente hast die sich mit left und right umfloaten, muss ein dritter Div mit clear: both; rein, was bei dir glaube ich nicht der Fall ist.
Beim IE sieht man das Problem nicht beim IE schon.
Ich hoffe ich konnte dir weiterhelfen, wenn nicht, hast vielleicht ja was gelernt :D

ok, das könnte weiterhelfen
probier ich morgen sofort aus

"selbermachen rockt am meisten :D" - -LeJean-

nun, irgendwie bekomm ich das ganze nich hin :\

mit nem tabellen -oder framesetlayout wäre das nicht passiert -_-

"selbermachen rockt am meisten :D" - -LeJean-

1. Der Platzhalter ist vor dem Banner -> z-index setzen.
2. Das Menu links hat ein padding-left von 40px. Auf 0px setzen.
3. Die Liste unter Neu gehört in den <li>-Tag rein
4. Auch diese zweite Liste hat ein padding-left von 40px. Auch auf 0 setzen.
5. Rechts oben ist auch ein padding-Wert für die Verschiebung verantwortlich.

Ich würde allgemein empfehlen, bei allen "missbrauchten" Elementen (ul in deinem Fall) padding und margin explizit zu setzen, da je nach Browser auch noch andere Ränder vorhanden sein könnten. Ausserdem empfiehlt sich für das Debuggen im Firefox der DOM-Inspector, wo man die berechneten CSS-Werte auslesen und ändern kann.

da sieht das doch schon viel besser aus :)

mit den paddings muss ich zwar nicht verstehen, aber wenn ich sie auf 0 setze klappts wunderbar. margin und padding werd ich wohl in zukunft immer auf 0 setzen, wenn ich das auch so möchte

den dom-inspector werd ich mir mal angucken und hoffentlich alle fehler beheben

danke so weit :)

*e*
und die teilweise doppelten borders müssen ja auch irgendwo ihren ursprung haben, doch wo?

"selbermachen rockt am meisten :D" - -LeJean-

Lade doch bitte mal die neue Version hoch, so sieht man ja garnicht, was noch falsch ist...

so, hab die seite mal neu hochgeladen

gefixt:
- banner mit z-index nach oben gesetzt
- paddings auf 0 gesetzt
- lister unter neu in nen <li> gepackt

probleme:
- teilweise doppelte borders (2pt statt 1pt), was das design auch zerschiesst
- kleiner abstandsfehler zw. neu und dem link darunter (wird gefixt)

das mit den borders ist mir bereits früher mal aufgefallen ... das hängt anscheinend damit zusammen, das die werte (width + height) nicht zu 100% passen und dadurch die borders spinnen - ratschläge und tipps erwünscht

der dom-inspector ist, nunja, gewöhnungsbedürftig ... so richtig les ich da nix raus

"selbermachen rockt am meisten :D" - -LeJean-

Ich frage mich ernsthaft, wie man mit so einem simplen Layout derart viele Probleme haben kann.

Sauber geschrieben ist das ein Horizontal Zentrierter Div-Container, darin ein Header, 3 Spalten nebeneinander, wobei die mittlere ne fixe Höhe, und ein overflow: auto; hat.

Der Rest sind ein paar Listenelemente fürs Menü, 4-5 Bilder mit Float oben rechts, und 3 Bilder untereinander in der rechten Leiste.

Dinge wie einen z-index braucht man auf der Seite überhaupt nicht...

Rambo Engineer @ Drippy's 2fort - finest TFC 1.5 || Bild Upload || The world's most advanced open source database

könnte z.b. daran liegen, dass man noch lernt ._.

"selbermachen rockt am meisten :D" - -LeJean-

Jetzt wird man mich wieder verfluchen, aber warum erstellt man "professionelle" Seiten während man noch lernt?

Erst lernen, dann schaffen, beides zur selben Zeit ging selten gut...

Rambo Engineer @ Drippy's 2fort - finest TFC 1.5 || Bild Upload || The world's most advanced open source database

weil ich das nicht verkaufe, sondern für unsere videothek mache ... prinzipiell hast du natürlich recht

"selbermachen rockt am meisten :D" - -LeJean-

Ich denke in deinem Fall ist das für nen guten Zweck, und nem alten ThW'ler muss man doch helfen.

Hab deshalb die letzten 2 Stunden geopfert, und dir den Code komplett neu und diesmal sauber gecodet.

Die Seite validiert nun XHTML 1.0 Strict, und sieht beinahe bis aufs Pixel in den aktuellen FF, IE, und Opera Versionen gleich aus.
Nur der IE buggt mal wieder, und zaubert einen schönen Effekt in die Navigation, wo eigentlich keiner gedacht war.

http://www.sro.at/ablage/exec/

Ein paar Dinge weichen evtl. von deinem Layout ab, weil ich nicht wusste, ob das Bug oder Feature war.

Rambo Engineer @ Drippy's 2fort - finest TFC 1.5 || Bild Upload || The world's most advanced open source database

das ist wirklich nett von dir :)
ich werd mir das natürlich genau auseinander nehmen

ich war die letzten stunden aber auch nicht untätig und hab alles nochmal neu geschrieben, diesmal hab ich die ratschläge so gut wie möglich umgesetzt.

ergebnis hier: http://home.arcor.de/der_exec/hp2 (aktueller status, daher teilweise noch unsauber)

farben etc. zu meiner verdeutlichung

sooo und im ff hab ich da ne pixelreihe zu viel zw. main und right - im ie siehts ok aus.

ich muss sagen, wie's jetzt geschrieben ist, gefällt mir das auch viel besser :)

was für ne maßeinheit würdet ihr empfehlen? du hast ja px genommen, ich pt, manche nehmen em - gmrpf, was ist nun am besten? pt hab ich mir rausgepickt, weil ein punkt ja immer ein punkt ist ... pixel hängen ja von dem ausgabegerät/os ab

mfg

"selbermachen rockt am meisten :D" - -LeJean-

http://www.virtualuniversity.ch/software/css/7.html
dort werden die absoluten/relativen Einheiten ganz anschaulich erklärt.

O o
/¯¯/_o___o___o___o____o__
\__\¯¯o¯¯¯o¯¯¯¯¯¯o¯¯¯¯¯¯o
i'm doctoroctogonnafuckinggonnapus blaaaaaaaaaaargggggg-

soo, hier mal wieder ein kleines update: http://home.arcor.de/der_exec/hp2 -> _index.html

nochmal komplett neu geschrieben und parallel (mit ff und ie) gearbeitet .. funktioniert das ganze doch viel besser :)

und sauberer is der code auch *e* hoffe ich

"selbermachen rockt am meisten :D" - -LeJean-

Zitat:

was für ne maßeinheit würdet ihr empfehlen? du hast ja px genommen, ich pt, manche nehmen em - gmrpf, was ist nun am besten? pt hab ich mir rausgepickt, weil ein punkt ja immer ein punkt ist ... pixel hängen ja von dem ausgabegerät/os ab

Das wirft aber einiges an Problemen auf (Unlesbare Darstellung auf Bildschirmen mit hoher pixeldichte, keine Möglichkeit für sehschwache User, die Schriftgröße anzupassen (ohne dabei das Design zu zerschiesen, etc...). Dieses Problem löst man mit nicht-pixelgenauem Design. Dann werden die Maßeinheiten pt und em interessant - wobei wohl keine von beiden die "ultimative Wahrheit" darstellt. EM verwendet man einfach bei Elementen, deren Größe von der Schriftgröße abhängen soll (schön zu sehen auf wikipedia.de - einfach im Firefox strg gedrückt halten und das Mausrad benutzen. Die Menügröße passt sich dabei automatisch der Schrift an). Pt eben, wenn man das nicht will.
Nicht pixelgenaues Design ist aber etwas schwieriger, da du dir ein Layout konzipieren musst, dass eben auch mit diesen Größenänderungen zurecht kommt. Dafür sparst du dir aber dieses pixelgefummel mit den einzelnen Browsern.

"tsuji-giri" (japanisch) - ein neues Schwert an einem Passanten ausprobieren