[CSS/IE] float laat tekening verdwijnen

[-Klimaks-]

Ik heb een <div> waar wat tekst en een img moet instaan. De image heb ik gepositioneerd met float:left, zodat de tekst er mooi rond wrapt. Dit alles werkt goed in Firebird getuige de volgende screenshot:



In IE (WinXP, IE6.0)wordt de ruimte voor de image wel gereserveerd en werkt de link rond de tekening ook, maar is er echter niks te zien:



De css van de omvattende div

Cascading Stylesheet:

.music{
    background: url(images/bg.gif) no-repeat bottom left;
    padding: 5px 30px 31px;
    margin:0;
    word-wrap:break-word;
    /*verberg overflow voor andere dan ie */
    voice-family: ""}"";
    voice-family:inherit;
    overflow:hidden;
}

HTML:

<div class="music">
        <a href="music/<?=$musicFile?>">
            <img src="images/music.gif" width="32" height="32" 
style="float:left;margin-right:10px">
        </a>
        <p><?=$musicInfo?></p>
    </div>

Wat loopt er hier juist mis?

[ Voor 22% gewijzigd door -Klimaks- op 24-11-2003 15:21 . Reden: layout verneuking fix ]

[OkkE]

Lijkt een beetje op dit topic, maar dan gaat het daar om de tekst die juist weg is.

Anyways, als ik die twee voice dingen weg laat heb ik hier in Internet Explorer 6 op Win2000 geen problemen.

[-Klimaks-]

Het is opgelost: een simpele position:relative op de tekening lost heel het probleem op.

Geen idee waarom

[Clay]

Dat is een bug. position:relative; lost als het fout gaat vaak een heleboel troep in IE op.

[Verwijderd]

Je kunt ook _overflow:hidden; gebruiken voor alleen IE Windows. Lijkt me wat simpeler. Daarnaast blijft de CSS dan wel well-formed (ongelijk valid)

[creative8500]

Of nog beter: _over\flow: hidden, dat is voor IE6 alleen _{found out that one myself}

[Woudloper]

Jaja, zelf gevonden Alle twee de oplossingen (door Anne en Creative) zijn hier terug te vinden:

http://web-graphics.com/mtarchive/001085.php

Overigens staat dit haaks op de suggestie welke PPK heeft gedaan om CSS simpel te houden, dus zonder hacks e.d.

[creative8500]

quote: http://gathering.tweakers...message/19326416#19326416

Woudloper: Beide oplossingen zijn hier terug te vinden:
webgraphics - CSS: The Underscore MSIE-Only Hack

Vergelijk dan die comment:

quote: http://web-graphics.com/mtarchive/001085.php#chatty002232

Robbert Broersma Posted…
Internet Explorer 6 for Windows only: _property: value;

...eens met mijn profiel:

quote: http://gathering.tweakers.net/forum/user_profile/36501

Echte naam: Robbert

...of mijn signature:

quote: http://gathering.tweakers...message/19325834#19325834

_{Ave,
Robbert Broersma}

Aan mijn eerlijkheid hoeft niet getwijfeld worden, lijkt mij zo.

[ Voor 15% gewijzigd door creative8500 op 24-11-2003 17:47 ]