Win-IE: float-Bug?

Dieses Thema im Forum "Web Page Design" wurde erstellt von msslovi0, 07.02.2006.

  1. msslovi0

    msslovi0 Thread Starter MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    Registriert seit:
    20.03.2005
    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
     
  2. catvarlog

    catvarlog MacUser Mitglied

    Beiträge:
    1.468
    Zustimmungen:
    1
    Registriert seit:
    30.01.2005
    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;}
    
    
     
  3. msslovi0

    msslovi0 Thread Starter MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    Registriert seit:
    20.03.2005
    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
     
  4. ThaHammer

    ThaHammer MacUser Mitglied

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

    catvarlog MacUser Mitglied

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

    msslovi0 Thread Starter MacUser Mitglied

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

    Matt
     
  7. msslovi0

    msslovi0 Thread Starter MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    Registriert seit:
    20.03.2005
    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
     
  8. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    Registriert seit:
    01.06.2004
    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!
     
  9. catvarlog

    catvarlog MacUser Mitglied

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

    msslovi0 Thread Starter MacUser Mitglied

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

    Matt
     
Die Seite wird geladen...

Diese Seite empfehlen