28172 sujets

CSS et mise en forme, CSS3

Opéra Wc3 doctype = problème (cellule table border)

Alors voilà je vous colle le bout de code qui dysfonctionne en WC3; il suffit d'enlever le doctype pour que le problème soit résolu mais j'ai un menu dynamique en wc3 qui en a besoin, que je vous ai pas rajouté pour pas encombré ce post de code inutile. Vous pourrez constatez que le problème se produit seulement sur opéra car j'ai essayé dans 5 navigateurs différent. Le problème est que des bords de cellule transparente apparaissent à chaque titre de table. Merci de votre aide.

Code supprimé car inexploitable.
Modifié par Florent V. (26 Nov 2009 - 10:48)
La suite du code :

Code supprimé car inexploitable.
Modifié par Florent V. (26 Nov 2009 - 10:48)
Bonjour aussi...

Quelle jolie bouillie de code tu nous présente là... J'espère que tu te rend compte que c'est illisible ?

Première chose à faire, respecter une des règles du forum et mettre en forme le code aves les balises [ code] et [ /code] (sans espaces) histoire de le rendre un peu (ne nous leurons pas, ici, ce sera vraiment très peu) plus lisible.
Utilise un doctype HTML 4.01 au lieu d'un doctype XHTML 1.0 (vu la présence de balises comme <br> ou <img> qui ne sont pas auto-fermées selon la syntaxe XHTML). Autrement dit, remplace tes deux premières lignes par celles-ci :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

Soit dit en passant, l'organisme qui met au point les standards HTML et XHTML, entre autres, s'appelle le W3C, et non le WC3. Smiley cligne
Modifié par Victor BRITO (26 Nov 2009 - 09:14)
Laurie-Anne a écrit :
Quelle jolie bouillie de code tu nous présente là... J'espère que tu te rend compte que c'est illisible ?

Je partage cet espoir...

Pour la mise en forme du code, je m'en occupe. J'en profite pour sabrer ce code illisible qui n'apprendra rien à personne car personne ne pourra le lire. À partir de là, je recommanderais:
- soit une correction du code pour qu'il devienne lisible;
- soit fournir un lien vers une page en ligne, qui sera au moins analysable avec des outils tels que Firebug à défaut d'avoir un code décent.
Bonjour,

ça ressemble un vieux bug d'opéra mais je ne l'ai encore jamais vu apparaitre de cette façon , ni sur un tableau.

Tu peut generalement forcé un reflow sur l'affichage a l'aide du pseudo :after ou :before .
Avec un repositionnent en relatif de ce nouveau élément créer a la volée par css puis par son déplacement , cela force le navigateur a recalculé precisement la zone d'affichage .

L'ideal est de ciblé au plus prés les balises incriminée .

je serais tenter de te proposer :



td:after {
content:'';/* creer un element vide */
position:relative;/* reflow */
left:-150%;/* deplacement */
}


GC
Smiley biggrin Résolu
Merci Gc-nomade
Ca marche

Par contre ton code cause un nouveau problème dans IE.
Smiley biggol IE rencontre un problème de lenteur dans le chargement puis après dans le scroll.

Smiley rolleyes Donc je sais qu'il y a des endif pour que IE lise des code mais est-ce que peut faire le contraire ??
bonjour,

En effet le css proposé oblige le navigateur a de nombreux calcul pour chaque td de ta page . C'est une correction plutot brutale .

ah zut , tes codes ne sont plus la Smiley lol
(de memoire tu utilises des id a plusieurs reprise , transformes ceux-ci en class , ton css est redondant , optimise le pour une meilleur lecture , le html n'est pas indenté , etc ... )

Avant de continuer la chasse au bugs , as tu suivis les quelques conseils donnés plus haut ?

Choisir le doctype approprié , proposé un code indenté lisible facilement ...

Le W3c dispose aussi d'outils trés utiles : des vérificateurs (validator) http://www.w3.org/QA/Tools/.
Cela peut t'aider a rendre ton code valide en te detaillant les erreurs trouvés.
pour le html par exemple http://validator.w3.org/#validate_by_input
pour la feuille de style : http://jigsaw.w3.org/css-validator/#validate_by_input

En éliminant les erreurs , cela suffit souvent a faire disparaitre quelques bugs . Les navigateurs tentent toujours et a leur sauce de compensé les erreurs.

Enfin , si aprés tes corrections ton défaut apparait toujours dans opera , il te suffirait d'un reset via les cc pour IE (8 j'imagine): td:after{position:static;display:none;}
ou de détourné l'usage d'un media querie.

GC
Sujet clos
Aller à