Codierung ohne Tabellen - nichts für FF?

  • Hallo ihr lieben Helfer,

    erstmal wünsche ich ein Frohes Fest gehabt zu haben und nun übergangslos zum Wesentlichen Wink

    Ich versuche mich in tabellenloser Codierung und habe erstmal probeweise ein Boxenmodell erstellt. Im html editor (phase5) und im ie wird es schön sauber dargestellt. Im ff liegen die 5 Boxen (div-container) aber irgendwie schräg durcheinander.

    Guckst Du

    Bitte nicht über das "Design" oder die Frage warum ich diese Boxen so haben möchte diskutieren, es dient für mich als "alter Tabellenfreak" nur zum Lernen von css u. ausprobieren neuer Möglichkeiten.

    Danke schon mal

    Blue

  • AAAlso:

    1) Warum du die Box0 floatest, versteh ich nicht ganz, die ist ja die umschließende Box und wird nicht umflossen. Kannste weglassen.

    2) Ich habe ein bisschen geedited (Web Developer Tools) und festgestellt, dass es funktioniert, wenn du die ganzen padding-Angaben rausnimmst. Wie es dann im IE ausschaut, weiß ich allerdings nicht. Das hängt mit folgendem Problem des IE zusammen:

    Standardgemäß berechtnet sich die Gesamtbreite eines Elements (z.B. div) folgendermaßen: margin + border + padding + width. So macht es auch der FF. Der IE hingegen interpretiert die width-Angabe als Gesamtbreite. Deswegen sind die Elemente im FF breiter als im IE, wenn du padding und width gleichzeitig verwendest, und passen deswegen nicht mehr nebeneinander. Um das vernünftig zu umgehen gibt es ein paar Tricks/Grundregeln (z.B. eben das nicht gleichzeitig verwenden, umschließende Boxen verwenden etc.), die du mit googeln findest (denke ich) und auch sehr bald verinnerlichen wirst, wenn du dich ne Weile damit beschäftigst.

    Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

    Eine Theorie sollte so einfach wie möglich sein, aber nicht einfacher. (A. Einstein)

  • Danke erstmal.

    padding allein rausnehmen hat nichts genutzt, auch die Maße anders zu addieren brachte nur einen geringen unterschied zur 1. Version.

    Jetzt habe ich alle Maße entfernt u. statt dessen pixel.gif in entsprechender Breite u. Höhe eingefügt.
    Nun geht das optisch - ist aber mit Sicherheit nicht die richtige Lösung, weil ich jetzt je keinen Inhalt mehr reinschreiben kann.
    Irgendwie hab ich das Gefühl dicht dran zu sein, aber ich seh es nicht.

    guckst du nochmal bitte

    Danke

  • Also wie gesagt. padding+border und width/height müssen getrennt werden. ein alter Trick dabei ist das verschachteln von <div>s:

    Code
    <div style="border:5px; padding:5px;">
     <div style="width:100px; height:100px;">
      Content
     </div>
    </div>


    Alternativ kann man auch mit einem HTML4.01/XHTML1.x Strict-DocType den IE dazu bringen den "richtigen" Modus fürs BoxModell zu verwenden.

    Was allerdings nicht alle Probleme beseitigt. IE hat davon ja reihenweise... z.B wäre ich vorsichtig mit dem margin. Zum einen, weil der IE nicht rechnen kann (http://www.positioniseverything.net/explorer/doubled-margin.html), zum anderen, weil man damit den IE nicht dazu bringt, boxen z.B. zu zentrieren (was margin:auto eigentlich bewirkt und jeder Browser ausser IE auch kann.... IE will dann unbedingt ein text-align:center... dabei ist ne box gar kein "text". andere browser ignorieren das z.B. weil eh unsinn). Mit Float hat er auch sonst so seine probleme....

    Es mag für den Anfänger wirklich so ausschauen, als wenn der IE alles richtig macht und andere browser und chaotischen murks produzieren, aber lass es dir gesagt sein... dem ist nicht so... ganz und gar nicht so. ; )

    http://www.howtocreate.co.uk/wrongWithIE/
    http://www.positioniseverything.net

  • So langsam dämmert es.

    Erst mal vielen Dank @ bugcatcher für die links, alle sehr informativ und auch für newbies ganz gut zu verstehen.
    Ich glaube, das mit den verschachtelten Boxen neben- u. untereinander geht gar nicht.
    Derweil teste ich ein wenig weiter und mir ist schon ein einfaches Layout gelungen, welches in allen (mir bekannten) Browsern identisch aussieht.

    klein aber fein

    Sollte mir das Boxding doch noch gelingen - melde ich mich.

    Blue

  • Oh, doch doch. Das geht schon. Aber es gibt für solche Lösungen unterschiedlichste Herangehensweisen. Man kann es alles mit floats regeln. Alternativ kann man auch mit position arbeiten (aber bitte auch mit relative und nicht nur mit absolut. Das ist eine Unsitte!). Gibt auch eine andere Version auf die ich gleich eingehe... aber egal was für einen Weg man einschlägt, man muss ihn vom ersten <tag> konsequent durchplanen. Das ist auch die eigentliche (geheime) Kunst des tabellenfreien Designs. Die Planung. Man muss wissen, was man will und wie man unterschiedliche Problemstellungen angehen kann. Das braucht wirklich viel viel Übung und Erfahrung. Aber das kommt mit der Zeit zwangsläufig, weil die Browser CSS teils sehr unterschiedlich interpretieren (natürlich vor allem der IE).

    Du musst vor allem erst einmal verstehen was die einzelnen befehle eigentlich wirklich bewirken und bedeuten, bevor man damit anfangen kann, sie zu mischen. Wer z.B. float benutzt, muss zwangsweise auch clear verstehen. Sonst wird er unangenehme überraschungen kennen lernen. Auch muss er verstehen, was die einzelnen display-werte bedeuten. Und ja, der IE stellt einges falsch dar. Normales "ausprobieren" alleine reicht da nicht. Man sollte sich ruhig etwas anlesen. Häufig gibt es kniffe, die was schwer zu verstehen sind.

    Du magst Tabellen? Na dann schau dir mal das hier an....:
    http://de.selfhtml.org/css/eigenschaf…ung.htm#display
    Da gibt es einen Wert für display der heisst table... rate mal was man damit machen kann. Da es sich um css handelt, ist der Einsatz auch absolut legitim um Layouts damit zu erstellen.

    Und dann schau mal nach der Kompatibilität und du wirst erkennen, warum es trauriger Weise nie benutzt wird.

    Die Leute glauben das der IE eigentlich alles viel sinnvoller macht, dabei wissen sie nicht was für ein Mühlstein am Bein der Webentwicklung er ist.

    http://css.fractatulum.net/sample/layout4format.htm
    http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

  • dear friends ,, this is my first time with Fire Fox.
    i need help to read msgs in Arabic characters( Codeing) when i right mouse cklick. this function available in MS Explorer , but failed with me in Fire Fox .

    thanks all for help

    Richter

    Business,transport,Export/Import,Travel,History