Piet: CSS Debugging

Wie überprüft ihr in Zweifelsfällen auf Windows die Box-Abmessungen? Im Mozilla ist der Dom-Inspector ja sehr hilfreich, aber nicht immer und auch nicht immer sehr bequem. Screenshot in Photoshop laden und nachmessen geht ja ganz gut aber es muss doch noch was performanteres und weniger kostspieleriges geben. Beim IE gibt es zudem keinen Dom-Inspector obwohl er da am dringensten benötigt werden würde.

Wichtige Features wären die Möglichkeit zur Vergrößerung um die Maus Pixelgenau ansetzen zu können. Nice to have die Möglichkeit mehrere Versionen mit etwas Transparenz übereinanderlegen zu können. Vor allem aber müsste alles sehr einfach, komfortabel und sehr schnell gehen können.

Für Anregungen wäre ich sehr dankbar.

  1. Hallo Piet

    Für Anregungen wäre ich sehr dankbar.

    Ich binde zum Test folgende Grafik vorübergehend als Hintergrund ein.
    <img src="http://d-graff.de/demos/selfhtml/lineal.gif" border="0" alt="">

    MFG
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    1. Ich binde zum Test folgende Grafik vorübergehend als Hintergrund ein.

      Ja, die Idee mit den Hintergrundgrafiken ist nicht verkehrt. Setzte ich auch öfter ein. Allerdings hilft das nicht weiter, wenn man pixelgenaue einen Abstand mitten im Geschehen ermitteln will. Ein Hintergundraster wäre eine andere Möglichkeit, aber das muss man natürlich erst mal einbinden und dann eventuell die im Weg liegenden Hintergrundfarben entfernen.

      Trotzdem Danke für die Antwort.

  2. Moin!

    Wie überprüft ihr in Zweifelsfällen auf Windows die Box-Abmessungen?

    Wieso prüfen? Man schreibt das CSS, und dann sind die Boxen da, wo man sie hinhaben wollte, inklusive der gewünschten Abmessung. Oder nicht?

    Wenn die Schachtelung unklar ist: Rahmen oder Hintergrundfarbe auffällig setzen, dann sieht man meist mehr.

    - Sven Rautenberg

    --
    Among the maxims on Lord Naoshige's wall, there was this one: "Matters of great concern should be treated lightly."
    Master Ittei commented, "Matters of small concern should be treated seriously."
    (Hagakure: The Way of the Samurai)
    1. Hallo,

      Wie überprüft ihr in Zweifelsfällen auf Windows die Box-Abmessungen?

      Kaum. So wichtig ist mir pixelgenaues Positionieren nicht mehr. Aber
      das bin bloß ich.

      Wenn die Schachtelung unklar ist: Rahmen oder Hintergrundfarbe auffällig
      setzen, dann sieht man meist mehr.

      Aber eine schnelle Angabe wie border:1px solid red; gehört zu den von
      am häufigsten getippten Dingen in Stylesheets.

      Tim

    2. Wieso prüfen? Man schreibt das CSS, und dann sind die Boxen da, wo man sie hinhaben wollte, inklusive der gewünschten Abmessung. Oder nicht?

      OK, dann oute ich mich jetzt als nicht-Geek. So virtuos beherrsche ich leider komplexes CSS unter Berücksichtigung aller Browsereigenheiten und Hacks nicht. Mit komplex meine ich dann schon die Pixelgenaue Umsetzung von Layouts von Screendesignern (nicht immer ein Traumjob). Das heißt oft mehrfach verschachtelte und gefloatete Divs, Listen etc. Alles mit (leider) festen Breiten, Paddings, Margins und den damit verbundenen Schwierigkeiten.

      Wenn die Schachtelung unklar ist: Rahmen oder Hintergrundfarbe auffällig setzen, dann sieht man meist mehr.

      Mein Tipp hier (für Mozilla) die Webdeveloper Tools. Spart die mühervolle Handarbeit: http://www.chrispederick.com/work/firefox/webdeveloper/

  3. Hallo,

    Wie überprüft ihr in Zweifelsfällen auf Windows die Box-Abmessungen?

    Wie wärs mit einem kleinen JavaScript, welches die Maus-Koordinaten in der Statuszeile anzeigt ? Oder sich vielleicht beim Left-Click die Koordinaten merkt und beim Right-Click die Differenz ausrechnet und in der Statuszeile ausgibt...

    Kochrezept hier http://selfhtml.teamone.de/javascript/objekte/anzeige/event_x_y.htm

    CU Christoph