[CSS] foto verdwijnt bij gebruik float

[bruk]

Onder IE 6.0 verdwijnt de foto op de volgende website:

http://beta.yes2web.nl/groepsfoto/

terwijl hij in firefox wel gewoon wordt weergegeven.
css ziet er zo uit voor dat plaatje:

code:

 img.foto {
   margin: 0px 0px 10px 20px; 
   float: right;
}

Als ik float weg haal, dan komt het plaatje weer te voorschijn, maar dan wordt de tekst naar onder geduwd. Iemand enig idee hoe ik dit in beide browsers werkend krijg?

W3C vindt hem trouwens xhtml 1.1 strict, dus daar ligt t ook niet echt aan dacht ik...

[ZeilDude]

Maak er eens van:

code:

 img.foto {
   margin: 0px 0px 10px 20px; 
   float: right;
    z-index: 2;
}

Je werkt in je stylesheet trouwens met uderscores, dat kun je beter niet doen. Veel browsers kunnen daar niet goed mee over weg.

[crisp]

Je #middenstuk valt er overheen.
Overigens is het niet XHTML1.1 compliant; daarvoor gebruik je het verkeerde mimetype, en er zit nog een klein foutje in

[ZeilDude]

crisp schreef op zaterdag 11 december 2004 @ 18:04:
Je #middenstuk valt er overheen.
Overigens is het niet XHTML1.1 compliant; daarvoor gebruik je het verkeerde mimetype, en er zit nog een klein foutje in

Inderdaad, het is iets met het middenstuk. Je hebt daar geen breedte gedefinieerd. Pas je css eens op deze manier aan:

code:

#middenstuk {
     background: 
     url(../images/layout/balk.gif) 
     repeat-y;
     position: relative;
     margin:0;
     top: 0px;
     padding: 40px;
     width : 700px;
}

Er zitten inderdaad nog wel meer kleine schoonheidsfoutjes in.
Btw, mijn eerdere opmerking over de z-index levert geen soelaas, mijn excuses hiervoor. Bovenstaande code heb ik op mijn eigen computer voor je getest, die werkt wel.