Webdesign mit CSS

Webdesign mit CSS

Posts 1-2 of 2
  • Dietrich Koch
    Dietrich Koch
    The company name is only visible to registered members.
    IE Probleme mit div und float
    Hallo CSS-Fans,
    ich dachte immer der IE kann float, aber...folgender Code wird vom IE (6 und 7) m. E. falsch interpretiert:
    <div id="products_price" class="products_price">
    <div id="gm_attr_calc_price"> 99,90 EUR</div>
    <div id="dk_tax_shipping">
    (inkl. 19% MwSt. zzgl.
    <a class="gm_shipping_link" target="_blank" href=..... style="text-decoration: none;">
    </a>
    )
    </div>
    </div>
    #product_info #products_price {
    float:right;
    }
    #gm_attr_calc_price {
    float:right;
    }
    #dk_tax_shipping {
    float:right;
    }
    Das übergeordnete div floatet ordnungsgemäß nach rechts, die beiden eingeschachtelten auch, aber das zweite setzt sich nicht unter das erste, wie wegen der block-Eigenschaft zu erwarten wäre, sondern vor das erste. Firefox und Opera machen das erwartungsgemäß. Hat jemand eine Idee wie ich das patchen kann. haslayout steht auf -1.
    Viel Spaß und Dank
    Dietrich
    • 29 Jan 2009, 09:31 am
  • Dietrich Koch
    Dietrich Koch
    The company name is only visible to registered members.
    Re: IE Probleme mit div und float: gelöst
    Da liegt wohl ein Missverständnis bei mir und das Problem woanders. Der IE floatet richtig und der FF auch. Allerdings bricht der IE den Text im zweiten div solange um bis der div vor das erste floaten kann. Durch width-Einstellungen kann ich zwar erzwingen, dass der Text (zzgl. MwSt usw.) unter dem Preis steht, aber kann nicht verhindern, dass er umbricht und er rechts gefloatet in einer Zeile unter dem Preis steht. Nun ergfibt sich die Frage:
    Wie kann ich den Umbruch verhindern? Hier ist die Antwort::
    #dk_tax_shipping{
    display: inline-block;
    float:right;
    text-align:right;
    width: 160px;
    }
    Das Zusammenspiel von inlin-block und width erzwingt nun, dass die Zeile ohne Umbruch dargestellt wird. Wird die Breite zu klein gewählt, entsteht die gleiche Situation wie vorher, allerdings nun auch für den FF.
    Bleibt nur noch die Frage, welches Verhalten bzgl. Zeilenumbruch ohne inline-block CSS-konform ist. Aber man kann so leben.
    • 29 Jan 2009, 11:16 am