Discussion :

[S~C]

Salut à tous,

Voilà que je codes un site avec deux CSS différents, l'un pour Firefox et l'autre pour IE...

Voici le site en question : http://www.xi-tech.info/mise_en_page/index.php

Avant tout, petit précision, le design n'est pas complet !

Bref, entrons sans attendre le sujet vif

Testez sous Internet Explorer et remarquez "inscripition" se place à "gauche" du zone identification... Alors qu'il est censé d'être collé avec son voisin nommé "mur-droite", comparez avec Firefox vous comprendrez mieux... Chez Firefox, l'inscripition est à l'endroit d'où il devrait être !

Dans le css, j'ai codé à cette façon pour Internet Explorer :

Code :

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

1
2
3
4
5
6
7
8
.inscripition
    {
    width: 112px;
    height: 31px;
    margin-right: -200px;
    background-image: url(images/inscripition.png);
    float: right;
    }

Normalement chez Firefox, cela se règle avec margin-right, mais chez Internet Explorer, il y a un petit souci...

Merci de vos parts !

[Swoög]

Salut !

essaie d'ajouter un display : block à ton image

ou de jouer sur le padding-right ^^

[S~C]

Cela ne marche pas avec padding parce qu'il fait "repeter" l'image...

Quant à display: block; je ne le connais pas et j'ai essayé d'ajouter, il ne s'est rien passé !

[Swoög]

si padding fait répétter l'image, décale le padding-left d'autant...

heu sinon, tu as quelque chose qui pourrait faire que ton div est décalé ?
essaie d'ajouter un peu de margin-top pour le faire descendre un peu et éventuellement passer une autre image en float...

Ou encore de jouer sur le margin-left (m'étonnerais...)
essaie d'ajouter position : relative (ça le motive sur IE des fois)

[if_zen]

et background-repeat: no-repeat; ?

[S~C]

J'ai essayé et cela ne marche pas...

J'aimerais bien vous préciser que l'inscripition peut déplacer jusqu'à un moment et il est resté bloqué, je ne peux pas lui déplacer encore "à droite"...

Je pense que ce serait bien s'il y a des volontaires qui voudraient bien regarder mon index.php avec css_ie.css, je suis presque sur que vous pourrez trouver ce qui ne va pas...

[Swoög]

ça ressemble beaucoup à ce pourquoi je te conseillais le margin-top...
essaie de voir s'il n'y a pas de problème de ce côté, au pire essaie de jouer avec left et right

[bavibavi]

Hummm j'ai essayé de sauver ta page en local mais c pas gagné lol.

essaye ca :

Code :

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

1
2
<div style="clear:both;"></div>
<div class="inscripition"></div>

[S~C]

Swoög, je ne maitrise pas trop bien les margin-top, left etc...
Je risque de faire une grosse connerie...

bavibavi, c'est pas mal, cependant, j'ai ajouté clear: both; uniquement dans la css d'IE...

C'est de mieux mais il reste encore un petit souci c'est que sous IE, il est trop "bas" pour mieux comprendre, comparez avec Firefox...

Je n'ai pas réussi à faire approcher "inscripition d'ie" avec le groupe d'identification...

Si quelqu'un sait, merci de me faire savoir...

Au cas d'où vous avez besoin le fichier, je pourrai vous faire un package en zip

Bonne soirée les amis, une journée très dure m'attend demain

[Swoög]

ouai... donc c'est bien un flottant qui bloquait...

bien, maintenant, pour le faire remonter, tu as trois choix :

1. appliquer le clear : both directement sur le div inscription (je ne suis pas sûr que ce sera suffisant)
2. donner une valeurs négative à margin-top pour le faire remonter
3. mettre position : relative puis donner une valeur négative à top pour le faire remonter (c'est la méthode qui me semble la plus prometteuse

[S~C]

J'aimerais bien utiliser la méthode 3, mais comme que je n'ai pas trop compris avec relative...

Sinon, j'ai utilisé la méthode 2 margin-top: -19px; et le problème est passé...

Je vous remercie énormement à vous tous...

Je mets résolu, mais Swoög, si tu veux bien m'expliquer pour relative, ce sera sympa

[Swoög]

position est une propriété qui permet de dire comment sont positionné les blocs

il y a plusieurs valeurs possibles : "relative", "absolute", "fixed"
les propriétés de positionnement (top, bottom, left et right) ne sont interprétées que si position a une valeur explicite, et la valeur explicite qui ne trouble pas le flux d'affichage est "relative"

[S~C]

ha d'accord, merci pour m'avoir expliqué un petit peu

je vais me reseigner encore en détail ces propietés...