BLOCKQUOTE hat Innen-, aber keinen Außenabstand

  • Folgendes Problem: Manchmal veröffentliche ich Beiträge, bei denen ich rechts (class alignright) ein kleines Bild anordne. Ich scheine aber irgendwie mein <blockquote>-CSS ungut formuliert zu haben. Wenn ein <blockquote> auf eines dieser Bilder trifft, sieht das zum Beispiel so aus:

    [Blockierte Grafik: http://img1.uploadscreenshot.com/images/orig/10/27509204465-orig.png]

    Offenbar scheißt der Rahmen des <blockquote> auf das rechts floatende Bild. Mein <blockquote>-CSS:

    Code
    .post blockquote, .post q {
    	padding:5px 8px 0px 8px;
            margin-left:1em;
    	border:2px solid #ccc;
    	/*font-size:0.9em;*/
    	background-color:#f8f8f8;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    }

    Wo liegt der Fehler?

    Lasst mich Arzt, ich bin durch!

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Offenbar scheißt der Rahmen des <blockquote> auf das rechts floatende Bild. Mein <blockquote>-CSS:

    Wo liegt der Fehler?

    Das ist kein Fehler sondern ein standardkonformes, richtiges Verhalten.
    Statische Elemente erstrecken sich auch unter dem Float, nur der Text weicht dem Float aus. ;)

    edit. Elemente mit overflow:hidden bilden einen eigenen Block Formatting Context , deshalb klappt das (ginge auch mit Float z.B.)

    Einmal editiert, zuletzt von koslowski (2. Februar 2013 um 10:29)

  • Theoretisch könntest Du dem blockquote Element eine fixe Breite übergeben. Das verhindert dann, dass die Grafik daneben rutscht, sieht aber von den Abständen oben und unten her u.U. etwas bescheiden aus.

  • Das ist kein Fehler sondern ein standardkonformes, richtiges Verhalten.
    Statische Elemente erstrecken sich auch unter dem Float, nur der Text weicht dem Float aus. ;)

    edit. Elemente mit overflow:hidden bilden einen eigenen Block Formatting Context , deshalb klappt das (ginge auch mit Float z.B.)

    Ah, besten Dank für die Erläuterung! :) Stecke in den theoretischen Konzepten weniger gut drin als in der Umsetzung.

    Lasst mich Arzt, ich bin durch!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!