Hi, also ich hab bisher immer mit dem IE gesurft und heut vom Release des FireFox 1.0 gelesen und gedacht ich probier ihn doch mal, obwohl ich bisher nur gehört hatte, dass der IE zwar schlecht sei, aber die anderen was CSS usw angeht auch nicht besser, eher schlechter wären.

Hab ihn also drauf gemacht und dann mein derzeitiges Projekt angeschaut und da fiel ich schon aus allen Wolken

also, anschauen könnt ihr die seite hier.
Am besten is es natürlich wenn ihr nen IE und nen FireFox drauf habt, also beim IE siehts so aus wies aussehen soll, die Höhe der <div> container ist niedrig bis gar nicht angesetzt, bei mehr text vergößert sich der div automatisch nach unten und mit ihm auch das hintergrund bild (beim IE).
Beim FireFox hab ich hingegen festgestellt (mit border) das sich da die div's nicht (zumindest nicht einfach so) vergrößern, der text ging dann weiter, aber der begrenzungsrahmen von dem div in dem der text steht (mitte) is da wo er auch bei gar keinem text wäre
ich hab mal nen weißen rahmen eingeblendet, da sieht mans sehr gut.
Außerdem is mir noch aufgefallen das der FireFox mit padding anders umgeht als der IE. Beim IE hats so geklappt wie ich mir padding immer vorgestellt hab (als innenabstand), dh der div ist gleich groß geblieben nur der text hat weiter "innen" angefangen, aber beim FireFox scheints andersrum zu sein (außenabstand?), der text is wo er war und der rahmen is weiter nach außen
Deshalb is beim IE auch ein größerer Abstand zwischen den 2 Rahmen, sonst häts nämlich beim firefox nimmer neben einander gepasst (is mit float gemacht)
Der dicke weiße Rahmen ist von dem Div in dem die anderen (außer footer) alle drin sin und sich beim IE auch richtig vergrößert

Desweiteren: Vergleicht mal die "Menü Titel", da nimmt der firefox des text-align:center; nich an und macht die hintergrundfarbe auch nicht über die ganze breite

Kann mir da jemand helfen wie ich des alles auch beim FireFox richtig hinbekomm? (hoffe mein text is einigermaßen verständlich)

achso, hier noch der css code, hab ich ja extern:
(Sowohl der CSS Code als auch der HTML Code is validiert und CSS2.0 bzw. xHMTL 1.0 Strict)

Die anderen sind alle wesentlich besser!

Dass der Mozilla/Firefox die Container nicht mitzieht, hat einen einfachen Grund. Du floatest die Innencontainer, und nimmst sie damit aus der normalen Position raus. Damit der äußere Container mitkommt, mußt Du clear benutzen, um das floaten wieder aufzuheben. Dann kommt der Container auch mit runter. Das der IE das auch so macht, liegt an seiner falschen CSS-Interpretation. Der behandelt divs eher wie Tabellenzellen.

Boxmodellbug des IE! - Durch den XML-Prolog schickst Du den IE6 in den Quirksmode, in dem er das Boxmodell genauso falsch berechnet, wie sein Vorgänger, der IE5! Der zieht padding und border immer vom Inhalt ab, laut W3C soll padding und border aber hinzuberechnet werden!

Die Feinheiten im Code schau ich mir jetzt nicht mehr an.

Tipp fürs Entwickeln mit CSS: immer erst mit einem Browser entwickeln, der CSS kann (Mozilla/Firefox oder Opera z.B.). Danach erst für den IE anpassen.....(der IE hängt 4 Jahre in der Entwicklung hinterher - ist so!)
Und halt CSS lernen. Boxmodell, Positionierungsarten und die Sache mit dem Doctype und den Rendermodi sind Pflicht.

Und wenn Du das verstanden hast, wirst Du den IE mit seinen Bugs hassen - verspreche ich Dir.

aaah.
Hab mich jetzt mal über die Modi usw über css4you informiert und ich beginne zu verstehen was du meinst *g*

Das mit float hab ich hinbekommen, danke dafür, hab mir sowas in der richtung schon gedacht, wusste nur nich was ich dagegen tun soll.


zum Quirks-Modus:
Hab mir mal ein paar Workarounds angeschaut, aber die sin ja letztendlich auch nich so des wahre, am simpelsten wäre ja natürlich die <?xml ?> zeile zu entfernen, dann würde ja auch der IE 6 im Standards-Mode bleiben, die 5.5er hätten dann ja immer noch die probleme...
oder natürlich ich lass es einfach so und die IE user müssen sich dann damit begnügen, wobei die meisten die "lücke" die entsteht, vermutlich nichmal bemerken werden...

Wow - sieht ja schon ganz anders aus. Herzlichen Glückwunsch!

Das machen die meisten - auch die CSS-Gurus. Ist auch erlaubt.


Bei Dir siehts jetzt im IE eigentlich ganz vernünftig aus. Kann man so lassen. Auch den IE5 darf man ja nie ganz vergessen, und der berechnet immer falsch. Es gibt da allerlei Tricks und Workarounds für den IE - aber wenn die nicht nötig sind, umso besser.

hmm, ich hab schon wieder ein problem mit IE vs. Rest (Netscape, Opera, FireFox), diesmal gehts um <img /> tags...


so wie rechts siehts im IE aus, eigentlich optimal und wie ichs will, links siehts so aus wie in den anderen, zwischen jedem bild is da ein abstand, border margin und padding hab ich mal vorsichtshalber auf 0 gesetzt, bringt aber auch nichts, was muss ich denn ins css schreiben damit auch bei opera & co. kein abstand zwischen den bildern is?

der css code:
und der betreffende html code:

ohne es ausprobiert zu haben:

"class="img" ist nicht definiert! das bringt den ie meiner erfahrung nach aus dem takt!

probiers mal mit "a.img {...}, vielleicht gehts dann

kadees

ach, ähm, hab nur vergessen class="img" wieder raus zu tun, habs damit mal probiert, hat aber auch nichs geholfen

mach mal da wo die Bilder sind ins css: line-height: 1px;

rein spekulativ könnte das helfen. Allerdings sollteste das nur machen wenn da nirgendwo text ist.

habs inzwischen anders gelöst:
die 4 Bilder sind jetzt alle absolut in einem relativ positionierten <div>-Container positioniert und es funktioniert in allen gängigen Browser (FireFox, Opera, Netscape und IE)