[css] Affichage de div imbriquées

Résolu/Fermé
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 - 5 juil. 2007 à 10:22
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 6 juil. 2007 à 10:23
Bonjour.

Je rencontre un léger bug pour l'affichage de mes div imbriquées.

Voici la page de test: http://site.abibois.com/test/fiche_foret.html

sur FF: ok, sur IE7: ok, sur IE6: pas ok ^^

J'ai une bordure grise, c'est donc ma propriété css "border: solid 1px transparent !important;" qui joue les trouble-fêtes.
Si je retire cette ligne, sur IE, c'est parfait, mais sur FF il y a un décalage (c'est d'ailleurs pour ça que j'avais rajouté cette propriété).

Si quelqu'un a une idée sur la question :)

Merci d'avance
A voir également:

5 réponses

s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
5 juil. 2007 à 14:20
Salut,

Tu peut supprimer les bordur et jouer sur le padding du div contenu.

<div class="T12 clr_n" style="padding: 5px 50px 5px 5px;

Dans l'ordre les chiffres correspondent à :

haut
droite
bas
gauche

Je ne pas vraiment tester tous moi même, donc je ne garantis pas que ça sera bon.


A tien je viens de penser à un truc, tu peux aussi utiliser un hack IE (spécifique pour le 6), il y en plusieurs type, tu les trouvera facilement sur google. Ca permet de mettre des propriété CSS uniquement pour un IE.

La propriété !important n'est pas comprise par IE6 mais le reste est interprété (border: solid 1px transparent), mais pas prioritairement s'il y a un boublon, enfin normalement.

Donc tu peux mettre :

padding: 5px 5px 5px 5px !important; 
padding: 5px 50px 5px 5px; 
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
5 juil. 2007 à 14:34
mmh non ça ne change rien avec le padding.

voici ce que j'obtiens sans la bordure "transparente": http://site.abibois.com/test/bad.html (à regarder sous FF surtout)
0
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
5 juil. 2007 à 16:49
Tu sais pour le peu d'élément qu'il a dans la page je trouve qu'il beaucoup de chose, les tableaux sont selon moi sont inutiles. Bien qu'il est sûrement une solution, j'ai du mal à chercher, et j'ai pas vraiment envi d'y passer une heure, à ce compte la j'ai plutôt envi de tous refaire à ma façon ! Donc désolé.
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
5 juil. 2007 à 17:02
http://site.abibois.com/test/bad2.html

C'est moins chargé là.
0
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
5 juil. 2007 à 17:16
Essais de mettre après border: solid 1px transparent !important; :
border: solid 0px ;


C'est le but de l'attribut !important comme je l'ai dis plus haut, IE6 ne devrait pas l'interpréter (et le 7 heu ...).
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
6 juil. 2007 à 09:11
De cette façon, ça fonctionne.
Je ne pense pas trop savoir pourquoi, mais ce n'est pas le principal ^^

Merci de votre aide.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
6 juil. 2007 à 10:23
salut,

je n'ai pas suivi les modifications et tonproblème est résolu mais si tu veux comprendre pourquoi il faut t'intéresser au "poids" des styles aussi appelé "priorité".
l'utilisation de '!important' devrait à mon avis pouvoir être évité en utilisant mieux les sélecteurs.

 • poids = 100
#conteneur{
border:none;
}

 • poids = 101
div#conteneur{
border:none;
}

 • poids = 102
div#conteneur div{
border:none;
}

 • poids = 200
#conteneur #contenu{
border:none;
}

 • poid = 201
div#conteneur #contenu{
border:none;
}

 • poid = 202
div#conteneur div#contenu{
border:none;
}

enfin si ton style est imbriqué dans une balise ou dans l'en-tête du document (j'ai vu que tu en utilises) le poids vaut 1000 de plus et devient donc prioritaire sur tous les autres (puisque interprété en dernier). le différents types de règles sont affichées par WebDevelopper pour FF.

le poids donne la priorité au plus lourd pour l'héritage des propriétés, tu peux le voir en action grâce à FireBug pour FF.
0