Absätze sehen im IE, FF oder Safari unterschiedlich aus

    Guten Tag zusammen,
    ich habe einer Freundin eine Internetseite gebaut, da sehen die Abstände, die ich lassen will

    - bzw. auch irgendwie muss, weil sonst der Text mit dem Bild nicht gerade steht -

    im Safari, FF aber vor allem im IE sehr komisch aus:

    :-) FF: http://tinyurl.com/6b6wlco
    :-) Safari: http://tinyurl.com/6xbm6cn

    :-( IE: http://tinyurl.com/5vjhoyf

    Die Seite: http://tinyurl.com/ybvhuqf

    Der Quelltext der Seite an sich:

    [size=8]
    Habe die Namen mal rausgenommen und mit ... gekürzt. [/SIZE]

    Wie kann ich das schöner gestalten, so dass sich nicht im IE so große Lücken ergeben?

    Ich danke Euch für die Hilfe.

    • Gerade eben
    • 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

    Könnte schon alleine daran liegen, dass du den <br /> falsch schreibst:

    Code
    <img class="autor" title="EB" src="/wp-[URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=content"]content[/URL]/uploads/2010/03/emili.jpg" alt="" width="125" height="156" /><strong>EB</strong>


Fachlehrerin für MLD/KPE ... Schule
[COLOR=Red]<br />
<br />
<br />
<br />[/COLOR]

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

    Zitat von BobAndrews

    Wenn ich den <br /> -Tag richtig setze, springt das Bild hoch

    Das kommt daher, dass WP überflüssige br-Tags löscht. Das br-Tag wurde nämlich nicht zum Generieren von Abständen erfunden, sondern dazu einen einfachen Zeilenumbruch zu erzeugen. Zeilenumbruch ≠ Absatz. Abstände zwischen einzelnen Absätzen werden per CSS festgelegt.

    Einmal editiert, zuletzt von mfitzen (24. Januar 2011 um 13:45)

    Hi infected,
    vielen Dank für Deine Antwort!

    Gut, dann füge ich

    Code
    p [COLOR=#00aa00]{[/COLOR][COLOR=#000000][B]margin-bottom[/B][/COLOR][COLOR=#00aa00]:[/COLOR] [COLOR=#993333]20px[/COLOR][COLOR=#00aa00];[/COLOR][COLOR=#00aa00]}[/COLOR]

    Nur wo genau muss man das in der CSS einsetzen? Bei Page?

    Danke Dir

    CSS: http://tinyurl.com/4e3qsx5

    Einmal editiert, zuletzt von BobAndrews (24. Januar 2011 um 19:50)

    Hi inffected,
    danke für Deine Tipps, ich gehe mal chronologisch durch:

    1) ich habe in der CSS nun

    Code
    img.autor{float:left;margin:5px;}

    mit dem (fehlenden) Zusatz

    Code
    p und clear both

    aus Deinem Link-Tipp ergänzt (DANKE!)
    Nun sieht es so aus:

    Code
    p img.autor{float:left; margin:5px; clear:both; width:128px;}

    Das hat den Erfolg gebracht, dass die Bilder nun schick untereinander angeordnet werden, wenn man ein

    Code
    <br />

    dazwischen setzt.

    http://tinyurl.com/486s8o2

    2) Leider ist aber der Text nicht "umgebrochen" worden, sondern hochgezogen worden. Was kann ich hier noch tun. Egal wo ich Dein

    Code
    content p{margin: 0  0 20px 0;}

    oder

    Code
    p [COLOR=#00aa00]{[/COLOR][COLOR=#000000][B]margin-bottom[/B][/COLOR][COLOR=#00aa00]:[/COLOR] [COLOR=#993333]20px[/COLOR][COLOR=#00aa00];[/COLOR][COLOR=#00aa00]}[/COLOR]

    einfüge, bringt es mir nicht den gewünschten oder gar keinen Erfolg.

    Vielleicht hast Du noch einen Tipp.

    Ich bin Code-teschnisch nicht so bewandert, aber wenn ich erklären sollte, was ich da gemacht hab, würde ich sagen, das

    Code
    <br />

    macht im Post einen Zeilenumbruch, durch das ergänzte

    Code
    clear:both;

    werden die Bilder untereinander platziert.

    Jetzt müsste ich doch vielleicht nur ein clear-both irgendwo für den Text einbauen, oder geht / verstehe ich das nicht?

    Danke Dir sehr!


    PS

    bitte wundere dich nicht, habe mir wieder mit

    Code
    <br></br>
<br></br>
<br></br>
<br />

    beholfen, übergangsweise.

    Einmal editiert, zuletzt von BobAndrews (25. Januar 2011 um 19:47)

    Sorry, wegen der späten Antwort. Ich hab noch einen anderen Lösungsweg für Dich. Dazu musst Du die style.css um ein paar Angaben ergänzen (falls noch nicht vorhanden):


    Die Absicht ist folgende: Die Bilder links neben dem Text anordnen, also beim Upload "Ausrichtung links" auswählen. Dadurch wird den Bildern die Klasse .alignleft hinzugefügt. Durch die entsprechende CSS Definition für .alignleft, schiebt sich das Bild links in den Textfluss. Bei den kurzen Texten für Dich also eigentlich passend. Hinter der letzten Beschreibung fügst Du dann im HTML Editor das Div clearfix ein, wodurch das Floating wieder aufgehoben wird und das nächste Element in eine neue Zeile rutscht.

    Der Code sieht dann würde dann beispielsweise so aussehen:

    Code
    <p><a href="http://www.example.com/wp-content/uploads/2011/01/423-96147.png"><img class="alignleft size-thumbnail wp-image-56" title="423-96147" src="http://www.example.com/wp-content/uploads/2011/01/423-96147-150x150.png" alt="" width="150" height="150" /></a>Person 1</p>
<p>Beschreibung 1</p>
<div class="clearfix"></div>
<p><a href="http://www.example.com/wp-content/uploads/2011/01/817-53308.png"><img class="alignleft size-thumbnail wp-image-57" title="817-53308" src="http://www.example.com/wp-content/uploads/2011/01/817-53308-150x150.png" alt="" width="150" height="150" /></a>Person 2</p>
<p>Beschreibung 2</p>
<div class="clearfix"></div>
<p><a href="http://www.example.com/wp-content/uploads/2011/01/1250-64196.png"><img class="alignleft size-thumbnail wp-image-58" title="1250-64196" src="http://www.example.com/wp-content/uploads/2011/01/1250-64196-150x150.png" alt="" width="150" height="150" /></a>Person 3</p>
<p>Beschreibung 3</p>
<div class="clearfix"></div>

    Wie gesagt, funktioniert das solange die Texte kurz bleiben. Bei längeren Texten, rutschen diese eventuell unter das Bild (von der Bildhöhe und dem padding/margin der Bilder abhängig).

    Teste es einfach mal.

    Hallo infected,
    ja, kein Problem, ich bin dankbar für Deine Hilfe und kann auch gern mal warten ;-) !!

    Ich pflege das gleich mal ein, erstmal Mittag und so.
    Melde mich dann später wie es klappt.
    Danke
    Bob

    Wow! Ich bin erleichtert.

    [size=8]http://tinyurl.com/6a68mdf[/SIZE]

    Habe es mit Deiner Hilfe nun wie folgt gemacht:

    1) Alte img-Angaben im CSS ausgeklammert:

    Code
    /*  p img.autor{float:left; margin: 5px; clear:both; width:128px; margin-right: 5px}
  */

    2) Deine Hinweise eingebaut:

    3) Die Image-Angaben im HTML Mode angepasst:

    Code
    <p><img class="alignleft" title="EB2" src="/wp-content/uploads/2010/03/EB2.jpg" alt="" width="125" height="156" /></a><strong>E B</strong></p>
<p>Fachlehrerin für MLD/KPE  und ... Schule</p>
<div class="clearfix"></div>
<br />
<p><img class="alignleft" title="UH" src="/wp-content/uploads/2010/03/UH.jpg" alt="" width="126" height="158" /></a><strong>Dr. U H</strong></p>
<p>Internist, Ödematologe, ... Schule</p>
<div class="clearfix"></div>
<br />

    Wobei wichtig ist, dass immer ein <br /> ! zwischen ! den anzuzeigenen Bildern stehen bleibt, damit die Trennung der Abschnitte erkannt werden.

    Nun sieht es so richtig gut aus, unter FF, Safari und dem zickigen IE : [size=8]http://tinyurl.com/5ser43v
    [/SIZE]
    Ich darf mich sehr herzlich bedanken für Deine Hilfe und Geduld. Leider bin ich nicht sooo schlau, dass ich die CSS Sprache selbst spreche, aber ich konnte gut mit Deinen Hinweisen und Tipps alles nötige bearbeiten/ergänzen.

    Vielen Dank für den Support, auch im Namen von Emili, ich werde ihr dann sagen, dass Du eine Massage frei hast (dann haut sie mich bestimmt, denn Physios sind ja keine Masseure! ;) *hust* )

    Wenn Du mal in MS sein solltest, lade ich gern zum Kafffee ein, meine Seite kennste ja durch die Screenshot-Links, mailste mir einfach. 8)

    Grüße
    Bob

    Zitat von BobAndrews

    Wobei wichtig ist, dass immer ein <br /> ! zwischen ! den anzuzeigenen Bildern stehen bleibt, damit die Trennung der Abschnitte erkannt werden.

    Das ist nicht nötig, wenn Du dem .clearfix ein padding mit auf dem Weg gibst:

    Code
    .clearfix{clear: both; padding: 20px 0;}

    Und wie gesagt, ist das br-Tag nicht dazu da um Abstände zu generieren.

    Es gibt bestimmt noch einen anderen Weg (um die divs zu vermeiden), aber auf die schnelle ist das allemal besser als die vorherige Lösung.

    Einmal editiert, zuletzt von mfitzen (26. Januar 2011 um 15:31)

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden