Benutzerdefinierte Suche

Win-IE: float-Bug?

  1. msslovi0

    msslovi0 Thread StarterMacUser Mitglied

    Mitglied seit:
    20.03.2005
    Beiträge:
    2.714
    Zustimmungen:
    115
    Hi!

    Man lernt ja mit der Zeit, mit den Macken des IE zu leben bzw. durch gesonderte Anweisungen das Verhalten zu erreichen, das andere Browser von Haus aus können.
    Das Problem hier ist aber so strange, das kann man kaum noch toppen. Ich habe mir heute einen abgegoogelt, aber nichts dazu gefunden. Vielleicht hat ja hier jemand nich eine Idee.

    Zunächst die Aufgabe:
    [​IMG]

    Nicht weiter schwer eigentlich. Man nehme eine Handvoll Tags, schüttle die gut durch und schon hat man ein passendes Markup:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link href="styles.css" rel="stylesheet" type="text/css"/>
      </head>
    
      <body>
        <div id="page">
          <h1>Willkommen</h1>
          <blockquote>
            <p>
              <img src="portrait.png" alt="Vorname Nachname" />
              &bdquo;Lieber Kunde und Leser, falls Sie keine Probleme haben, diesen Blindtext schnell und z&uuml;gig zu lesen, k&ouml;nnen Sie sich gl&uuml;cklich sch&auml;tzen. Der verantwortliche Art Director, der Ihnen h&ouml;chstwahrscheinlich gerade diesen Entwurf pr&auml;sentiert, versteht sein typografisches Handwerk par excellence.&rdquo;
              <cite>Vorname Nachname<br /><small>Position</small></cite>
            </p>
          </blockquote>
        </div>
      </body>
    </html>
    
    Dann nimmt man etwas css, kippt das auch noch mit ran und rührt kräftig durch:
    Code:
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      background: #F7F3DB;
      padding: 15px 0;
      font: 75% Verdana, Arial, Helvetica, sans-serif;
      color: #000;
      text-align: center;
    }
    
    #page {
      width: 500px;
      text-align: left;
      margin: 0 auto;
    }
    
    h1 {
      margin-top: 10px;
      font-size: 100%;
      color: #fff;
      background: #229017;
      line-height: 18px;
      height: 18px;
      padding-left: 10px;
    }
    
    blockquote {
      padding: 10px;
      border: 1px solid #229017;
      background: #F6DA93;
      color: #424242;
    }
    
    blockquote p {
      font-style: oblique;
      border: none;
    }
    
    blockquote img {
      padding-right: 10px;
      float: left;
    }
    
    cite {
      display: block;
      clear: both;
      text-align: right;
      font-style: normal;
      font-weight: bold;
    }
    
    cite small {
      font-size: 75%;
      font-weight: normal;
    }
    
    Fertig.

    Tja, typischer Fall von "Die Rechnung ohne den Wirt gemacht". Der IE zeigt nämlich das an:
    [​IMG]

    Das Zitat fehlt. Aber auch nicht wirklich. Wenn man beim Laden genau aufpasst sieht man, dass der Text kurz aufblitzt. Mit Strg+A läßt er sich zwar nicht markieren:
    [​IMG]

    Aber der Mauszeiger verwandelt sich beim Überfahren in das Markierungswekrzeug und der Text läßt sich dann auch markieren:
    [​IMG]

    Ich habe jetzt alles mögliche versucht, den Text sichtbar zu bekommen, dabei aber nur folgende Erkenntnisse gewonnen:

    Es ist egal, ob das <blockquote>-Element den Container bildet oder ein (beliebiges) anderes (mit <div> getestet).
    Es ist egal, ob der float: left direkt auf das Bild angewandt wird oder auf einen dieses Bild umgebenden Container.
    Es ist egal, ob ich <cite> in einen eigenen <p>-Tag stecke oder nicht.
    So richtig lustig wird es aber eigentlich erst, wenn der Zitattext länger läuft (auf die Höhe betrachtet), als das Bild hoch ist (entweder weil mehr Text da ist oder man die Schriftgröße ändert), denn dann funktioniert es auch: http://byodkm.de/ie/lang.html
    Entferne ich 'display: block' oder 'clear: both' für <cite>, wird der Text angezeigt, aber dann kommt es nicht mehr an die Vorlage heran.

    So langsam aber sicher gehen mir die Ideen aus. Vielleicht hat hier noch jemand eine.

    Matt
     
    msslovi0, 07.02.2006
  2. catvarlog

    catvarlogMacUser Mitglied

    Mitglied seit:
    30.01.2005
    Beiträge:
    1.468
    Zustimmungen:
    1
    ich erinnere mich an ein ähnliches problem aber leider nicht mehr an die lösung.

    evtl. ein text-align an das image hängen?

    ansonsten das als anregung:

    Code:
    <div class="floatImageRight">
    	<div class="text">
    		<h4>Headline</h4>
    			<p>
    				Text
    			</p>
    	</div>
    	<div class="image">
    		<img alt="Abbildung" src="" />
    	</div>
    	<div class="clear"></div>
    </div>
    
    
    div.floatImageRight div.text{float:left;width:250px;}
    div.floatImageRight div.image{width:200px;float:right;}
    div.clear{clear:both;margin:0px;padding:0px;}
    
    
     
    catvarlog, 08.02.2006
  3. msslovi0

    msslovi0 Thread StarterMacUser Mitglied

    Mitglied seit:
    20.03.2005
    Beiträge:
    2.714
    Zustimmungen:
    115
    Nein, das bringt auch keine Änderung.

    Sorry, aber das ist keine Anregung, das ist Divitis. Das unterscheidet sich nur in den eingesetzten Tags von einem ebenso verwerflichen Tabellenlayout. Darüber hinaus gibt es keinerlei semantisch relevante Tags und aufgrund der div-Suppe zahlreiche unnötige class-Attribute, die den Quelltext nur unnötig aufblähen.

    Matt
     
    msslovi0, 08.02.2006
  4. ThaHammer

    ThaHammerMacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    enteweder wars ein display:block oder ein position:relative das man einfügen muss um den Mist loszuwerden.
     
    ThaHammer, 08.02.2006
  5. catvarlog

    catvarlogMacUser Mitglied

    Mitglied seit:
    30.01.2005
    Beiträge:
    1.468
    Zustimmungen:
    1
    sicher ist das nicht schmal. in dem beispiel wird der text nicht umflossen. hast du dafür einen eleganteren weg?
     
    catvarlog, 08.02.2006
  6. msslovi0

    msslovi0 Thread StarterMacUser Mitglied

    Mitglied seit:
    20.03.2005
    Beiträge:
    2.714
    Zustimmungen:
    115
    Mit position: relative für blockquote p funktioniert es. Danke!

    Matt
     
    msslovi0, 08.02.2006
  7. msslovi0

    msslovi0 Thread StarterMacUser Mitglied

    Mitglied seit:
    20.03.2005
    Beiträge:
    2.714
    Zustimmungen:
    115
    Verstehe das Problem aktuell nicht. Wie soll der Text umflossen werden? Und selbst wenn es dafür eine Lösung gibt - es ändert nichts daran, dass das Markup schexxe ist.

    Matt
     
    msslovi0, 08.02.2006
  8. ThaHammer

    ThaHammerMacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    Das ist ein doofer clipping Bug im IE. Das kann Dir mit jedem Element passieren. Meist aktualisiert man die Seite und auf einmal ist wieder alles da!
     
    ThaHammer, 08.02.2006
  9. catvarlog

    catvarlogMacUser Mitglied

    Mitglied seit:
    30.01.2005
    Beiträge:
    1.468
    Zustimmungen:
    1
    ich habe dich gefragt, ob es für den Quelltext, den ich gepostet habe, einen eleganteren Weg gibt. Sprich: Wie geht das besser?
     
    catvarlog, 09.02.2006
  10. msslovi0

    msslovi0 Thread StarterMacUser Mitglied

    Mitglied seit:
    20.03.2005
    Beiträge:
    2.714
    Zustimmungen:
    115
    Das es am Ende so aussieht wie meine Vorlage?

    Matt
     
    msslovi0, 09.02.2006
Die Seite wird geladen...
Ähnliche Themen - Win float Bug
  1. markusch
    Antworten:
    0
    Aufrufe:
    507
    markusch
    17.10.2009
  2. Fabi87
    Antworten:
    6
    Aufrufe:
    829
    JoeSixpack
    17.03.2009
  3. LuMac_2
    Antworten:
    6
    Aufrufe:
    694
    falkgottschalk
    17.02.2009
  4. ulik
    Antworten:
    5
    Aufrufe:
    383
    rm -r *
    05.02.2009
  5. marcusstiehler
    Antworten:
    1
    Aufrufe:
    1.636