[Résolu] Float et IE font bon ménages : un width pas normal...

Bonjour à tous,

Me voilà parmis vous car j'ai un léger soucis de width sous IE6 :

http://jpwalker.gentoo.free.fr/miscischia/apropos/

Mon code html est le suivant :

<div id="rightpanel">
<h2><span class="first">C</span>oordonn&eacute;es</h2>		
// code
</div>

pour la partie droite et :

<div id="leftpanel">
<h2><span class="first">C</span>urriculum vit&aelig;</h2>
<h3>Parcours scolaire</h3>	
// code
</div>

pour la partie droite. Ceci fonctionne avec le code CSS suivant :

div#rightpanel {
float: right;
width: 39%;
}

div#leftpanel {
width: 60%;
}

La partie sous IE6 à l'air d'hériter de la propriété width... Après plusieurs essais, j'ai la tête en compote et suis quelque peu embrouillé...

Quelqu'un aurait une solution ?

Merci
Modifié par jpwalker (04 May 2006 - 17:18)

Bonjour,

Ton site est plus ou moins respectueux des standards, mais en tête de balisage, le prologue xml fait passer IE en mode Quirks (non standard). En supprimant ce prologue, ça semble régler le problème du contenu du "leftpanel". Sa dimension devient égale à celle sous Firefox.

À moins que le prologue XML serve justement à faire passer IE en mode Quirks, il vaut mieux l'éviter avec un site servi en text/html.

Très bien ! Merci à toi neko !

Concernant le plus ou moins respectueux, y a t-il d'autres points qui te choque dans le code ?

Le premier <li> de mon menu principal est décalé depuis se changement... Est-ce logique ?

PS : les autres avis sur le design/standard sont les bienvenues

[EDIT] Pour le menu c'est résolu
Modifié par jpwalker (04 May 2006 - 17:29)

Oui, mais ce n'est pas grand chose, car en fait je trouve le code très bien personnellement. Il ya juste le contenu du "leftpanel" qui recourt à une balise DL, mais une balise UL serait plus indiquée je crois.
Tu peux toujours créer une seconde classe de liste (un nouvel ID donc), ou alors la sélectionner par rapport à son parent (#leftpanel ul).

a écrit :
PS : les autres avis sur le design/standard sont les bienvenues

Pour ça, le mieux est de le proposer ici : Ergonomie et esthétique générale, demande d'avis et de critique .
Tu y auras plus de réponses (et plus complètes que celle que je vais faire).

Rapidement donc, j'aime assez l'esthétique, bien que je trouve qu'il y a un peu trop de blanc en bas (peut-être à cause du blanc sur le body).
Le code manque un peu de commentaires (permettant de savoir par exemple ce que ferme un </div>), mais il est lisible. Je vois que tu utiliseras des accesskeys et des tabindex, que du bon donc.

Le menu en bas montre qu'il y aura une page politique d'accessibilité, un plan et une page contact... tu pourrais rajouter un lien d'évitement. Comme l'entête du site est volumineux, un lien (couplé à un accesskey) pointant sur le contenu (une ancre située en tête du contenu) serait utile à certains profiles de visiteurs (navigation au clavier...).

Une seule remarque, il y a maintenant un scission dans les bordures gauche et droites entourant la page sous firefox, un peu au dessus de l'escargot. (Rien de tel sous IE.)

Conseil : précharger les images en bas de page, car au premier survol, il y a un blanc le temps que l'image se charge. Il existe des astuces de préchargement sans javascript, avec juste un peu de CSS. (Le but est ici d'afficher une première fois ces images dans le flux normal du document, mais en les cachant au visiteur en décalant leur position très loin de la zone d'affichage du navigateur...).
Alternative : un peu de Javascript.

Edit -- Vu que Raphaël en parle dans son bouquin, je suis sûr qu'on droit trouver ces astuces ici. (mais j'ai un peu la flemme de chercher, pardon).
Modifié par (04 May 2006 - 18:12)

Ok grand merci à toi

Pour la section j'avais pas calculé, je le mettrai quand il sera un peu plus avancé. Pour le moment rien de fixe je peux changer à volonté.

Pour les commentaires cela viendra, dans le temps. Pour le blanc c'est vrai que... J'ai prevu de rajouter un petit quelque chose mais je sais toujours pas quoi.

Pour la scission rien de bien grave... Ca se corrige vite fait

Pour le reste j'ai aussi le bouquin de Raphaël, donc no soucy, je commence tout juste le projet, donc...

Merci pour tes commentaires, ils sont très important (surtout ceux concernant l'accessibilité). Je vais de ce pat dans la bonne section.

Encore merci
++