Alignement d'éléments

Bonjour à tous,

Je viens de mettre en ligne mon site internet, et vient de repérer un mauvais alignement d'élément dans ma page de musiques, qui visiblement est dépendant du navigateur. (bien sur Opéra, Firefox, IE, et pas sous Chrome, ou l'inverse ...)

Pour être plus clair, voici une image :


Chaque soundtrack est une div avec une class "soundtrack".
Chaque soundtrack contient :

un span pour le titre, de classe "song-title", contenant un span de classe "text" :

Code:

---

1 2 3 4 5 6 7 8

.soundtrack .song-title .text { left: 5px; }   .text { display: inline-block; position: relative; }

---

Une div contenant le lecteur :

Code:

---

1 2 3 4 5 6 7 8

.sound-player { display: inline-block; height: 20px; margin-bottom: 5px; position: relative; top: -10px; width: 250px; }

---

Un élément "a" pour les "likes" :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.cliker-button { display: inline-block; position: relative; top: 4px; }   .cliker-button { color: #FFFFFF; display: inline-block; font-size: 14px; height: 20px; text-decoration: none; width: 20px; }

---

Auriez vu une idée de la raison de cette différence ?

Merci d'avance

Bonjour,

Avez-vous créer un reset css?

Qu'est-ce qu'un reset css ?

Voici un lien

J'ai essayé mais malheureusement rien y fait.

Ça me parait un peu rapide pour intégrer un reset après avoir conçu le site...

Mais bon, avez-vous un lien vers votre site? Cela sera plus simple à résoudre.

Il me semblait qu'il y avait juste à inclure le reset CSS avant tous les autres CSS pour vérifier à quel niveau si situent les différences entre les navigateurs, non ?

L'adresse de mon site internet est la suivante : http://dooxe-creative.net/

J'ai continué à chercher au niveau des styles appliqués à chaque élément, mais toujours rien trouvé d'anormal.

Bonjour,
pourquoi une construction aussi farfelue, un conteneur et tout mettre dedans me semble plus indiqué, d'autant qu'il traine tout plein de décalage aléatoire comme un top:-12px; qui ne facilite pas la mise en page.

En fait, c'est le moyen que j'ai trouvé pour gérer la position verticale d'un texte dans un conteneur ... Y a t'il des moyens plus simple ?

Bonjour,

Pourquoi ne pas mettre un display: table sur le conteneur et placer les enfants (play, barre défilement, étoile, compteur) en table-cell

Je viens d'essayer en local, et en effet cette technique du

Code:

---

display:table

---

et

Code:

---

display:table-cell

---

est plus compatible entre navigateurs que les positionnement relatifs. Je vais continuer mes tests.

Merci beaucoup :ccool:

Citation:

---

Envoyé par Dooxe

est plus compatible entre navigateurs que les positionnement relatifs

---

Oui mais non...
Table et table-cell sont moins cross browers que le positionnement relatif.
Dans ce cas vous limitez les problèmes liés aux différences entre les navigateurs concernant les marges par défaut des éléments.

Je vous remercie pour vos réponses. Je pense faire un css à part pour Chrome, ce sera plus simple.

Citation:

---

Je pense faire un css à part pour Chrome, ce sera plus simple.

---

:calim2: Je ne suis pas sûr que tu empruntes la bonne voie.

salut,
d'abord c'est juste pour ne pas mettre un nouveau css pour chrome donc à
vérifier:

• mettre 270px dans le width pour .sound-player
• rentrer le lien avec la classe cliker-button qui contient ton étoile et le 0 dans
  la div .sound-player qui contient tout le block

j’espère que ça va aider.

Bonjour,

Citation:

---

Citation:

---

Je pense faire un css à part pour Chrome, ce sera plus simple.

---

Je ne suis pas sûr que tu empruntes la bonne voie.

---

Je finis par me dire que ce sera la solution du futur : un css par navigateur.
Avec tous les styles par défaut et tout le tralala, on y arrivera :)

Citation:

---

salut,
d'abord c'est juste pour ne pas mettre un nouveau css pour chrome donc à
vérifier:

mettre 270px dans le width pour .sound-player
rentrer le lien avec la classe cliker-button qui contient ton étoile et le 0 dans
la div .sound-player qui contient tout le block

j’espère que ça va aider.

---

Merci pour cette réponse, je n'ai pas encore eu le temps d'essayer, mais je vous dit quoi dès que c'est fait ;)