CSS, float, et IE6 pour Windows

[Gwenhiver]

Bon, alors voilà : j'ai une page en XHTML 1.0 Strict qui utilise des CSS. Si vous allez voir un peu à quoi ça ressemble, il y a en gros une section DIV à droite en float:right (c'est là où il y a le changements de version), et tout le reste (d'autres sections DIV) est positionné sur la gauche (dans le flot du texte, il n'y a pas de positionnement précis, là).

Ca marche très bien sous l'ensemble des navigateurs Mac qui supportent les CSS (Safari, Internet Explorer, Chimera). Mais sur IE6 sous Windows, ça foire.

En fait, il y a un bloc sur fond jaune, au milieu de la page, si je le définis comme ça :

div.accentednote {
clear: none;
width: 410px;
margin-left: 0px; margin-right: auto; margin-top: 0px; margin-bottom: 0px;
padding: 10px;
font-size:90%;
background-color:#ffc;
}

, IE6 le positionne (et le reste du texte avec), *en-dessous* du bloc en float sur la droite. Le clear:none ne change rien, d'ailleurs.

Si je le mets comme ça :

div.accentednote {
clear: none;
margin-left: 0px; margin-right: auto; margin-top: 0px; margin-bottom: 0px;
padding: 10px;
font-size:90%;
background-color:#ffc;
}

Ca s'affiche au bon endroit, mais le fond jaune déborde (il s'étend en fait en-dessous de la section grise flottante). Ce qui n'est pas chouette.

Bon, j'espère que vous avez compris quelque chose...

Sinon ben... en gros, il suffit d'avoir IE6 (5 aussi, peut-être ?) pour voir le problème. Enfin, je viens de faire une copie d'écran.

Si vous avez une idée...

 

[minime]

J'ai le même résultat dans IE/5.5... A ta place je commencerais par entourer les 3 divs de texte de la colonne de gauche dans un grand div "texte" (avec float:left), qui serait le pendant du div "sidebar".

 

[Gwenhiver]

Euh... Ca marche pas...

Enfin, ça s'affiche correctement sous IE/Windows, mais plus sur Mac, alors bon...

 

[minime]

Faut continuer à bidouiller ta feuille de style. Tu n'as plus besoin de définir de marge, largeur, etc... dans les div "blockitem" et "accentednote", par exemple. Celui-là a besoin d'un peu de padding, c'est tout. Tu indiques la largeur de cette colonne dans le div parent, celui que tu as ajouté et qui maintenant contient "blockitem" et "accentednote".

Les largeurs de ce div + du div "sidebar" doivent être inférieures à la largeur du div "content".

Genre comme ça.

 

[Rogntudju]

C'est marrant, je suis en train de construire un site dont la structure du design ressemble à la tienne: Golden Rocket

Seule la page d'accueil est aujourd'hui presque finalisée...

J'ai pas utilisé les calques, mais les classiques tableaux imbriqués, ce qui rend la chose 100% compatible.

Par contre, il faudra vraiment que je me penche sur les possibilités offertes par les Div, car elles sont assez séduisantes.

Le principal souci semble être la compatibilité inter-navigateurs... A propos, à partir de quelle génération de browsers les calques sont ils supportés?