Une chute en redimentionnant: Opera 9

Bonjour à tous,

Ah! les joies du CSS. Décidemment.

Je suis en train de travailler la prochaine mouture de mon Weblog sous Wordpress, avec un thème en phase d'être publié, Fauna. Je collabore présentement avec son concepteur.

J'ai corrigé, et identifié plusieurs problèmes dans la feuille de style, mais là, je m'adresse aux meilleurs d'entre vous car je ne vois pas où se situe le problème.

Le site temporaire pour mes tests est celui-ci:
http://baudesign.ca/ksl

Donc voici. La mise en page est presque terminée, à quelques détails près. Sous Firefox, tout est à mon goût, et fonctionnel.

Mais sous Opera... Lorsqu'on redimentionne la fenêtre, aux alentours de 990 pixels en largeur, le titre en haut chute subitement. Je sais qu'il s'agit d'une histoire de "float", du moins je le pense. Mais où?

En testant sous IE7 (bêta), c'est le bouton "Search" qui tombe.

Si quelqu'un peut m'aiguiller, et peut-être me dire ce qu'il en est sous OS X avec les fureteurs Safari ou Camino, ce serait fort apprécié.

D'ici là, je continue la chasse aux bugs.

Merci

Patrick
Modifié par Baudesign (06 Oct 2006 - 03:22)

salut

#wrapper {
width: 80%;
width: expression(document.body.clientWidth < 1000? "780px" : "80%" ); 
}

syntaxe incorrecte, deux width dans la même règle, c'est une de trop.

le compteur explose

Erreurs
URI :  http://baudesign.ca/ksl/wp-content/themes/fauna/style.css
 

    * Ligne: 29 Contexte : html

      La propriété overflow-y n'existe pas. : scroll
    * Ligne: 105

      Le pseudo-élément ::after ne peut apparaitre dans le contexte css2
    * Ligne: 105

      Le pseudo-élément ::after ne peut apparaitre dans le contexte css2
    * Ligne: 206

      Le pseudo-élément ::before ne peut apparaitre dans le contexte css2
    * Ligne: 212

      Le pseudo-élément ::after ne peut apparaitre dans le contexte css2
    * Ligne: 329 Contexte : span.edit a:focus, a.quote

      Erreur lors de l'analyse grammaticale. - -moz-outline-style: none;
    * Ligne: 330 Contexte : span.edit a:focus, a.quote

      Parse error - Unrecognized : }
    * Ligne: 408

      Le pseudo-élément ::before ne peut apparaitre dans le contexte css2
    * Ligne: 408

      Le pseudo-élément ::before ne peut apparaitre dans le contexte css2
    * Ligne: 437 Contexte : #commentform textarea

      Erreur lors de l'analyse grammaticale. - -moz-box-sizing:border-box;
    * Ligne: 440

      Erreur lors de l'analyse grammaticale. - : 100%; } .inputbox
    * Ligne: 595

      Le pseudo-élément ::after ne peut apparaitre dans le contexte css2
    * Ligne: 595

      Le pseudo-élément ::after ne peut apparaitre dans le contexte css2
    * Ligne: 741 Contexte : a.comment-gravatar img, a.comment-favatar img

      Erreur lors de l'analyse grammaticale. - opacity=40)
    * Ligne: 742 Contexte : a.comment-gravatar img, a.comment-favatar img

      La propriété opacity n'existe pas. : 0.4
    * Ligne: 743 Contexte : a.comment-gravatar img, a.comment-favatar img

      Erreur lors de l'analyse grammaticale. - -moz-opacity: .4;
    * Ligne: 744 Contexte : a.comment-gravatar img, a.comment-favatar img

      Parse error - Unrecognized : }
    * Ligne: 750 Contexte : a.comment-gravatar:hover img, a.comment-favatar:hover img

      Erreur lors de l'analyse grammaticale. - opacity=100)
    * Ligne: 751 Contexte : a.comment-gravatar:hover img, a.comment-favatar:hover img

      La propriété opacity n'existe pas. : 1
    * Ligne: 752 Contexte : a.comment-gravatar:hover img, a.comment-favatar:hover img

      Erreur lors de l'analyse grammaticale. - -moz-opacity: 1;
    * Ligne: 753 Contexte : a.comment-gravatar:hover img, a.comment-favatar:hover img

      Parse error - Unrecognized : }
    * Ligne: 777

      Le pseudo-élément ::after ne peut apparaitre dans le contexte css2
    * Ligne: 790

      Le pseudo-élément ::before ne peut apparaitre dans le contexte css2
    * Ligne: 829

      Le pseudo-élément ::before ne peut apparaitre dans le contexte css2
    * Ligne: 829

      Le pseudo-élément ::before ne peut apparaitre dans le contexte css2
    * Ligne: 829

      Le pseudo-élément ::before ne peut apparaitre dans le contexte css2 

URI :  http://baudesign.ca/ksl/wp-content/themes/fauna/styles/ksl/ksl_default.css
 

    * Ligne: 173 Contexte : body

      Propriété érronée : font Erreur lors de l'analyse grammaticale. - , serif 

URI :  http://www.baudesign.ca/ksl/
 

    * Ligne: 86 Contexte : #wrapper

      Propriété érronée : width Erreur lors de l'analyse grammaticale. - document.body.clientWidth < 1000? "780px" : "80%" )

Avertissements
URI :  http://baudesign.ca/ksl/wp-content/themes/fauna/style.css
 

    * Ligne : 761 (Level : 1) Vous n'avez pas de couleur définie avec votre couleur de fond : a.comment-gravatar img
    * Ligne : 806 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : ul#af-ela-tag li.selected
    * Ligne : 806 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : ul#af-ela-tag li.selected
    * Ligne : 806 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : ul#af-ela-tag li.selected
    * Ligne : 806 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : ul#af-ela-tag li.selected
    * Ligne : 838 (Level : 2) Redéfinition de la propriété margin-top : ul#af-ela-category li
    * Ligne : 838 (Level : 2) Redéfinition de la propriété margin-right : ul#af-ela-category li
    * Ligne : 838 (Level : 2) Redéfinition de la propriété margin-right : ul#af-ela-year li
    * Ligne : 838 (Level : 2) Redéfinition de la propriété margin-top : ul#af-ela-year li
    * Ligne : 838 (Level : 2) Redéfinition de la propriété margin-left : ul#af-ela-year li
    * Ligne : 838 (Level : 2) Redéfinition de la propriété margin-right : ul#af-ela-month li
    * Ligne : 838 (Level : 2) Redéfinition de la propriété margin-bottom : ul#af-ela-year li
    * Ligne : 838 (Level : 2) Redéfinition de la propriété margin-left : ul#af-ela-month li
    * Ligne : 838 (Level : 2) Redéfinition de la propriété margin-bottom : ul#af-ela-category li
    * Ligne : 838 (Level : 2) Redéfinition de la propriété margin-bottom : ul#af-ela-month li
    * Ligne : 838 (Level : 2) Redéfinition de la propriété margin-left : ul#af-ela-category li
    * Ligne : 838 (Level : 2) Redéfinition de la propriété margin-top : ul#af-ela-month li
    * Ligne : 842 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : ul#af-ela-month li.selected
    * Ligne : 842 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : ul#af-ela-month li.selected
    * Ligne : 842 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : ul#af-ela-month li.selected
    * Ligne : 842 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : ul#af-ela-month li.selected
    * Ligne : 842 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : ul#af-ela-month li.selected
    * Ligne : 842 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : ul#af-ela-month li.selected
    * Ligne : 845 (Level : 2) Redéfinition de la propriété border-bottom-style : ul#af-ela-month li:hover
    * Ligne : 845 (Level : 2) Redéfinition de la propriété border-bottom-style : ul#af-ela-year li.selected
    * Ligne : 845 (Level : 2) Redéfinition de la propriété border-bottom-style : ul#af-ela-year li:hover
    * Ligne : 845 (Level : 2) Redéfinition de la propriété border-bottom-style : ul#af-ela-category li.selected
    * Ligne : 845 (Level : 2) Redéfinition de la propriété border-bottom-style : ul#af-ela-month li.selected
    * Ligne : 845 (Level : 2) Redéfinition de la propriété border-bottom-style : ul#af-ela-category li:hover
    * Ligne : 848 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : ul#af-ela-category li.selected
    * Ligne : 852 (Level : 2) Redéfinition de la propriété border-bottom-style : ul#af-ela-category li.selected

change ce wrapper, c'est pas bon du tout.

un logiciel gratuit et diablement éfficace pour valider la syntaxe xhtml :

http://alexandre.alapetite.net/

et pour valider les css :

http://jigsaw.w3.org/
Modifié par keran (07 Oct 2006 - 14:36)