Float Problem

[Twilo]

Hallo,

Beispiel
warum fängt der Internet Explorer linksbündig an?
wie kann ich den Abstand zwischen der Bilkdunterkante un div-Ende veringern?

Opera und Firefox zeigen es beide relativ gleich an.

Ist das ein Bug des IE oder ist mein CSS-Code fehlerhaft?

getestet mit Internet-Explorer 7, Firefox 2.0.0.x, Opera 9.24 und Operea 9.5

mfg
Twilo

[Stahli]

Hi,

warum fängt der Internet Explorer linksbündig an?
Ist das ein Bug des IE oder ist mein CSS-Code fehlerhaft?

Ein Bug im IE. Zumindest der IE <=6 zentriert Block-Elemente nicht mit margin:auto (wie eigentlich vorgesehen), sondern mit text-align:center (was eigentlich nur Inline-Elemente zentrieren sollte). AFAIK ist das Problem im IE7 behoben worden, aber ich hab ihn jetzt nicht zur Verfügung um zu testen.

Lösung:
Gib dem übergeordnetem Element (in deinem Fall body) einfach die CSS-Eigenschaft text-align:center. Da der innere Text an sich ja wieder links ausgerichtet werden soll, musst du den Wert im inneren Element wieder überschreiben.

#script div div{  
  text-align:left;  
  [...]  
}  

wie kann ich den Abstand zwischen der Bilkdunterkante un div-Ende veringern?

Indem du entsprechende Innen- und Außenabstände setzt..

Grüße,
Felix

[Twilo]

Hallo,

warum fängt der Internet Explorer linksbündig an?
Ist das ein Bug des IE oder ist mein CSS-Code fehlerhaft?
Ein Bug im IE. Zumindest der IE <=6 zentriert Block-Elemente nicht mit margin:auto (wie eigentlich vorgesehen), sondern mit text-align:center (was eigentlich nur Inline-Elemente zentrieren sollte). AFAIK ist das Problem im IE7 behoben worden, aber ich hab ihn jetzt nicht zur Verfügung um zu testen.

Lösung:
Gib dem übergeordnetem Element (in deinem Fall body) einfach die CSS-Eigenschaft text-align:center. Da der innere Text an sich ja wieder links ausgerichtet werden soll, musst du den Wert im inneren Element wieder überschreiben.

wenn es daran liegen sollte, frage ich mich, warum der Text beim richtigen Abstand anfängt.

das Problem tritt nur da auf, wo weniger Text als Bild vorhanden ist.
neues Beispiel

mfg
Twilo

[Antipitch]

Hi Twilo,

wenn du floats wieder entfernen willst, musst du das innerhalb des Eltern-Elements tun, in dem du sie auch generiert hast (daher das Verhalten der IEs). Im Übrigen könntest das alles auch etwas einfacher erreichen (z.B. das mittlere div einsparen).

#script {
      margin:          5px auto;
      padding:         5px 5px 0 5px;
      border:          1px solid #f00;
      width:           500px;
    }
    #script * {
      margin:          0;
      padding:         0;
    }
    #script div {
      margin:          0 0 5px 0;
      border:          1px solid #D1D1D1;
      padding:         5px;
    }
    #script p img {
      margin:          0 0 0 20px;
      border:          1px solid #000;
      float:right;
    }

<div id="script">
    <div>
      <h2>Überschrift</h2>
      <p><img src="./noBild.gif" alt="Test-Bild" width="100" height="72" />
        Hier steht etwas Text. Hier steht etwas Text. Hier steht etwas Text. Hier steht etwas Text.
        <span style="clear:both; display:block"></span>
      </p>
    </div>
    <div>
      <h2>Überschrift</h2>
      <p><img src="./noBild.gif" alt="Test-Bild" width="100" height="72" />
        Hier steht etwas Text. Hier steht etwas Text. Hier steht etwas Text. Hier steht etwas Text.
        <span style="clear:both;display:block""></span>
      </p>
    </div>
</div>

Gruß
Antipitch

[Twilo]

Hallo,

neues Beispiel

wenn du floats wieder entfernen willst, musst du das innerhalb des Eltern-Elements tun, in dem du sie auch generiert hast (daher das Verhalten der IEs).

ok

Im Übrigen könntest das alles auch etwas einfacher erreichen (z.B. das mittlere div einsparen).

das mittlere div benötige ich um mehrere innere divs zusammenzufassen

#script {
      margin:          5px auto;
      padding:         5px 5px 0 5px;
      border:          1px solid #f00;
      width:           500px;
    }
    #script * {
      margin:          0;
      padding:         0;
    }
    #script div {
      margin:          0 0 5px 0;
      border:          1px solid #D1D1D1;
      padding:         5px;
    }
    #script p img {
      margin:          0 0 0 20px;
      border:          1px solid #000;
      float:right;
    }

<div id="script">
    <div>
      <h2>Überschrift</h2>
      <p><img src="./noBild.gif" alt="Test-Bild" width="100" height="72" />
        Hier steht etwas Text. Hier steht etwas Text. Hier steht etwas Text. Hier steht etwas Text.
        <span style="clear:both; display:block"></span>
      </p>
    </div>
    <div>
      <h2>Überschrift</h2>
      <p><img src="./noBild.gif" alt="Test-Bild" width="100" height="72" />
        Hier steht etwas Text. Hier steht etwas Text. Hier steht etwas Text. Hier steht etwas Text.
        <span style="clear:both;display:block""></span>
      </p>
    </div>
</div>

nur wie löse ich das, wenn das Bild über mehrere p's gefloatet werden soll?

mfg
Twilo

[Antipitch]

Hi Twilo,

nur wie löse ich das, wenn das Bild über mehrere p's gefloatet werden soll?

du kannst ohne Probleme auch mehrere p's nebeneinander nach links floaten. Das Bild dann im letzten p oder alleine (weiterhin nach rechts floaten). Breiten der p's dann evtl. anpassen/ festlegen.

Gruß
Antipitch

[Twilo]

Hallo,

nur wie löse ich das, wenn das Bild über mehrere p's gefloatet werden soll?

du kannst ohne Probleme auch mehrere p's nebeneinander nach links floaten. Das Bild dann im letzten p oder alleine (weiterhin nach rechts floaten). Breiten der p's dann evtl. anpassen/ festlegen.

das Bild soll, wenn man kein CSS hat, oberhalb des Textes sein.

+----------+
|          |
|   Bild   |
|          |
+----------+
Text Text Text
Text Text Text
Text Text Text
Text Text Text

mfg
Twilo