Peter: Flot Problem

Hallo Zusammen

Ich habe folgenden Code:

  
<div class="elem">  
	 <div class="elem_pic"><img alt="" src="/images/bild.gif">/div>  
	 <div class="elem_price"><span>26.25</span><div class="wahrung">EUR</div></div>  
     <div class="elem_priceReduziert">30.90</div>  
</div>  

Die sollte danach so aussehen;
BILD
30.90 EUR 26.25

Dies geht auch im FF und IE8, im IE6 und IE7 habe ich aber ein Abstand zwischen 30.90 und EUR.

Mittels CSS mache ich ein Float:

  
.elem_pic{  
	float:right;  
}  
elem_price.{  
	float:right;  
  
}  
.elem_priceReduziert{  
	float:right; (oder left)  
}  

Was mache ich falsch?

P.s. im Chrome und Safari ist es auch korrekt...

Vielen Dank
Peter

  1. Ich habe folgenden Code:

    <div class="elem">
    <div class="elem_pic"><img alt="" src="/images/bild.gif">/div>
    <div class="elem_price"><span>26.25</span><div class="wahrung">EUR</div></div>
         <div class="elem_priceReduziert">30.90</div>
    </div>

      
    
    > Was mache ich falsch?  
      
    Vergiss mal CSS und verwende sinnvolles Markup.  
    Die Logik deiner Aussage sollte mit deaktiviertem CSS vollkommen klar bleiben.  
      
    Eventuell suchst du inline-block.  
      
    mfg Beat
    
    -- 
    
    ><o(((°>           ><o(((°>  
    
       <°)))o><                     ><o(((°>o  
    Der Valigator leibt diese Fische
    
    1. Hallo

      Merci, sorry kannst du dass erklären?
      Wie kann ich machen, dass der reduzierte Preis immer neben (links) der Währung steht, egal wie gross der Preis ist?

      Vielen Dank
      Peter

      1. Wie kann ich machen, dass der reduzierte Preis immer neben (links) der Währung steht, egal wie gross der Preis ist?

          
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
         "http://www.w3.org/TR/html4/strict.dtd">  
        <html>  
        <head>  
        <title>Example</title>  
        <style type="text/css">  
        <!--  
        .angebot .preis { display:inline-block; width:5em; height:2em; }  
        .angebot .normal{}  
        .angebot .sonder{ float:left; }  
        .angebot .waehrung{}  
        .angebot img { display:inline-block; width: 5em; }  
        -->  
        </style>  
          
        </head>  
        <body>  
          
        <dl class="angebot">  
          <dt>Angebotstitel</dt>  
          <dd>  
          <!-- andere Elemente hier -->  
            <span title="Normal-Preis" class="normal preis">100  
              <var class="waehrung">EUR</var>  
            </span>  
            <span title="Sonder-Preis" class="sonder preis">99.0  
              <var class="waehrung">EUR</var>  
            </span>  
            <img src="" alt="">  
          </dd>  
          
        </dl>  
          
        </body>  
        </html>  
        
        

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        1. @@Beat:

          nuqneH

          <var class="waehrung">EUR</var>

          Nein, 'var' ist kein geeignetes Element, eine Maßeinheit auszuzeichnen. [HTML401 §9.2.1, HTML5 §4.6.10]

          Ein solches gibt es nicht (außer 'span').

          Und für Preisangaben würde ich auch nicht "EUR" verwenden, sondern "€".

          Qapla'

          --
          Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
        2. <dl class="angebot">
            <dt>Angebotstitel</dt>
            <dd>
            <!-- andere Elemente hier -->
              <span title="Normal-Preis" class="normal preis">100
                <var class="waehrung">EUR</var>
              </span>
              <span title="Sonder-Preis" class="sonder preis">99.0
                <var class="waehrung">EUR</var>
              </span>
              <img src="" alt="">
            </dd>

          </dl>

          Hallo

          Vielen Dank.

          Soweit verstanden, aber warum funktioniert bei mir dies im IE7 und IE6 nicht?

          <div class="priceOrginal">  
          <span>31.45</span><div class="currency">CHF</div></div>  
          <div class="priceDiscount">44.90</div>
          

          Das Problem ist, soweit ich das herausfinden konnte, das priceOrginal-div. Dieses ist immer zu gross. Obwohl ich ihm kein oder auto Breite gebe.

          Vielen Dank
          Peter

          1. Soweit verstanden, aber warum funktioniert bei mir dies im IE7 und IE6 nicht?

            Weil diese inline-block noch nicht verstehen.
            Man kann ihnen aber das gleiche Verhalten mit display:inline beibringen.

            <div class="priceOrginal">

            <span>31.45</span><div class="currency">CHF</div></div>
            <div class="priceDiscount">44.90</div>

              
            
            > Das Problem ist, soweit ich das herausfinden konnte, das priceOrginal-div. Dieses ist immer zu gross. Obwohl ich ihm kein oder auto Breite gebe.  
              
            Dieser Code ist Schrott. Schalte CSS aus und du weisst, warum.  
              
            mfg Beat
            
            -- 
            
            ><o(((°>           ><o(((°>  
            
               <°)))o><                     ><o(((°>o  
            Der Valigator leibt diese Fische
            
            1. Hallo Beat

              Vielen Dank.

              Wie kann ich dies über display:inline machen?
              Betrifft dies das div, das span oder die Wahrung?

              Bzgl. Code. Ja ich habs gemerkt, muss nun aber eine andere Variante finden-

              Vielen Dank
              Peter

              1. Wie kann ich dies über display:inline machen?
                Betrifft dies das div, das span oder die Wahrung?

                In meinem Code ist es die Alternative zu display:inline-block (bitte in einer eigenen Regel nach der Regel mit dem inline-block.)

                Wie du das machst, ist deine Sorte. entweder über CSS Hacks
                *html some_selector { }
                oder über via Conditional-Comments eingefügte spezielle IDs
                #msie7 some_selector { }

                Ich bevorzuge die CC-ID Methode und bin bei den CS-Hacks nicht fit.

                mfg Beat

                --
                ><o(((°>           ><o(((°>
                   <°)))o><                     ><o(((°>o
                Der Valigator leibt diese Fische
                1. Hallo Beat

                  Das Problem ist, dass du für den Preis eine fixe Breite verwendest. Dies geht bei mir so auch (ohne inline).

                  Ich möchte aber, dass die Preise dynamisch neben einander stehen
                  36.80 EUR 36.20
                  -> 36.80 soll immer links neben der Währung stehen. Die Währung und 36.20 sind in meinem Preis Div. Sobald ich diesem eine fixe Breite gebe ist es ok. Doch ansonsten ist dieses DIV immer 100% Breit und der Preis 36.80 geht auf die neue Zeile...

                  Ich habe das mit dem Inline Versucht, geht aber leider nicht....

                  Thx Peter

                2. Beat,

                  Wie du das machst, ist deine Sorte. entweder über CSS Hacks
                  *html some_selector { }
                  oder über via Conditional-Comments eingefügte spezielle IDs
                  #msie7 some_selector { }

                  Ich bevorzuge die CC-ID Methode und bin bei den CS-Hacks nicht fit.

                  hau mich, wenns nicht stimmt: soweit ich weiss, ist der IE 6 durchaus in der Lage, Code und Styles gleich darzustellen, wie der IE7, nämlich ohne den Windows Bug. Dies aber nur, wenn der verwendete Code gegen ein strict DTD validiert wurde; dieses DTD muss natürlich auch ganz oben im Prolog stehen.

                  Gruss
                  Gina

                  --
                  X-Self-Code: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:° ss:| de:] js:| ch:| sh:) mo:| zu:)
                  X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html