Discussion :

[Tarnaud]

Salut tout le monde,

Je rencontre un soucis de compatibilité au niveau des navigateurs ie et Chrome sur la page suivante au niveau des cartouches :
http://rct.madeinsomewhere.com/les-marques

Sur ie7, le masque ne s'affiche pas et le texte s'affiche en décalé. Sur chrome Mozilla... tout fonctionne très bien.
Je débute tout juste en CSS, et je n'arrive pas à comprendre ce qui pourrait coller. Un regard d'expert et des remarques sur mon travail serait TOP!

Voici le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="brands">
<div id="brands">
<div class="brand"><img src="{{media url="wysiwyg/SmallBrands/dagobear-small-brand.jpg"}}" alt="Dagobear" width="316px" height="180px" />
<div><a href="/marque/dagobear"><span><img src="{{media url="wysiwyg/LogosBrands/dagobear.jpg"}}" alt="" width="60px" /></span>
<h2>Dagobear, cale&ccedil;ons et chaussettes pour homme</h2>
<p><strong>Dagobear</strong> est une jeune marque qui va apporter de la couleur sous votre pantalon ! Elle propose <strong>cale&ccedil;ons et chaussettes color&eacute;es</strong>, dans un beau coffret : le <strong>cadeau pour homme</strong> id&eacute;al !</p>
</a></div>
</div>
.....

et les CSS associés :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/*********** < BRANDS */
.brands div.brand {
    width: 316px;
	height: 180px;
    position: relative;
	float: left;
}
.brands div.brand div {
    background-color: rgba(0, 0, 0, 0.7);
    width: 316px;
	height: 180px;
	display:none;
    position: absolute;
    bottom: 0;
}
.brands div.brand div:hover {
    display: block;
}
.brands div.brand h2 {
    font-size: 20px;
	font-weight: bold;
    padding: 10px 0 10px 40px;
}
 
.brands div.brand span {
	color: white;
    padding: 40px 0 0 5px;
	margin: 10px;
	float: left;
}
 
.brands div.brand p {
    font-size: 12px;
	font-family: Arial, serif;
	color: white;
	font-weight: bold;
    padding: 0 0 30px 90px;
}
.brands div.brand h2, .brand div.brand p {
    color: white;
    margin: 0;
}

Le but serait bien évidemment que tout fonctionne sur tous les navigateurs.
Merci d'avance pour vos retours.

Tarnaud

[Invité]

Houlà,
Manifestement, tu as aussi un souci de compatibilité avec la langue française.
Le site est truffé de fautes (des truffes de Noël ?).
(ca vient sûrement d'un autre que toi, puisque ton message ci-dessus est plutôt correctement écrit !)

Veuillez nous excusez...
La page précédante
<cliquer ici> et tappez votre Nom
Vous devez comp et tappez votre Nomous devez renseigner tous les champs, et renseigner une adresse mail valide.

A corriger avant de mettre en ligne.

[Tarnaud]

Merci pour ton retour,
Pour l’orthographe, effectivement ce n'est pas moi , il va falloir que l'on fasse une grosse relecture.

Sinon concernant mon CSS?? :-D
Est-ce que mon masque n'apparaitrait pas derrière l'image?
Est-ce que je pourrais utiliser un z-index?

=> Je ne vois pas pourquoi le masque n'est pas visible sous IE...

Merci d'avance.

Tarnaud

[NoSmoking]

Bonjour,
les textes apparaissent mais pas au bon endroit, il sont à la gauche des zones survolées, du moins sous le IE7 que j'ai sous la main.

[Tarnaud]

Bonjour,
les textes apparaissent mais pas au bon endroit, il sont à la gauche des zones survolées, du moins sous le IE7 que j'ai sous la main.

Tout à fait, et je ne comprends pas pourquoi justement....
Any idea?

[NoSmoking]

Il y a fort à parier que cela provienne d'une déclaration CSS qui fait foirer ton script, mais difficile à dire comme cela.

Tu devrais créer un exemple simple avec le strict minimum, il sera alors plus aisé de voir le problème.

[JefReb]

Bonjour,
Il y a quelque chose qui me gène dans les déclarations html.
D'une part l'utilisation du même nom pour une classe (.brands) et pour un id (#brands)
Mais peut être que je me trompe. Et je ne vois pas la définition de #brands dans le css

...

[NoSmoking]

D'une part l'utilisation du même nom pour une classe (.brands) et pour un id (#brands)

C'est vrai que le choix des noms est un peu limite, voire maladroit, mais bon...

Tu devrais créer un exemple simple avec le strict minimum, il sera alors plus aisé de voir le problème.

en fait il y est en début de discussion

Je pense que tu peux régler le problème en rajoutant left:0 dans le CSS des DIVs masquées

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.brands div.brand div {
  background-color: rgba(0, 0, 0, 0.7);
  width: 316px;
  height: 180px;
  display:none;
  position: absolute;
  left:0; /* AJOUT */
  bottom: 0;
}