Différence de juxtaposition/superposition entre IE7 et FF

Invité · 29/03/2008, 13h37

Bonjour à tous,

J'en suis à mes balbutiements en CSS, et j'essaie de rendre mon site identique dans Firefox et Internet Explorer.

Dans une en-tête d'une rubrique de mon site, j'essaie de créer un bloc div "ContextIcons" aligné à droite, dans lequel je rajoute des boutons et des panels en fonction de mon code.

Voici deux captures qui montrent le résultat dans Internet Explorer 7 et dans Firefox: dans Firefox, mon icône "crayon" se retrouve sous le bloc Div qui affiche une date, alors qu'IE affiche tout comme je veux.

Voici ma feuille de style:

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
div.ContextIcons
{
    float: right;
    right: 20px;
    padding: 0;
    top: -38px;
    display: block;
    position: relative;
    margin-right: 10px;
}
div.Date
{
    background: url(Images/date_bg.gif) no-repeat left top;
    color: white;
    margin: 0;
    padding: 0;
    width: 45px;
    height: 45px;
    position: relative;
    display: block;
    top: -16px;
}

...et mon code HTML généré par Visual Studio:

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
<div class="ContextIcons">
        <div id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_pnlEdit">
 
            <input type="image" name="ctl00$MasterContentPlaceHolder$Repeater1$ctl00$UcActualiteHeader$btnEdit" id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_btnEdit" title="Editer cette actualité" src="../../App_Themes/Common/iconEdit.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MasterContentPlaceHolder$Repeater1$ctl00$UcActualiteHeader$btnEdit&quot;, &quot;&quot;, false, &quot;&quot;, &quot;../../Edit/EditActualite.aspx?ID=c9681969-51f4-4111-9db2-1657e785fd67&quot;, false, false))" style="height:16px;width:16px;border-width:0px;" />
 
</div>
        <div id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_DatePanel" class="Date">
 
            <p class="Day">
                <span id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_ActualiteDateJourLabel" class="Day">1</span></p>
            <p class="Month">
                <span id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_ActualiteDateMoisLabel" class="Month">janv.</span></p>
 
</div>
    </div>

Comment dire à Firefox que les éléments dans mon bloc div doivent se juxtaposer ?

Merci de votre aide

**Erwan31** · 29/03/2008, 21h19

Bonsoir,
pour ce genre de demande, il vaut mieux mettre à disposition une page en ligne ou alors fournir la totalité du code.

Tu as des déclaration superflues dans tes 2 règles de styles:

Tu peux les remplacer par ça

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
div.ContextIcons
{
    position: relative;
    right: 30px;
    top: -38px;
    float: right;
}
div.Date
{
    position: relative;
    top: -16px;
    width: 45px;
    height: 45px;
    background: url(Images/date_bg.gif) no-repeat left top;
    color: white;
}

Les DIV sont déja de type bloc, donc le display:block inutile
et les div n'ont pas de margin ou padding par default.

Invité · 30/03/2008, 15h49

Salut Erwan31,
Merci de m'avoir répondu.

Oui, en effet: j'ai remplacé mes CSS par les tiennes, tu as raison. Je me le garde dans un coin de la tête.

Va la complexité de ma page, pas sûr que tout le code te soit vraiment utile. Mais je peux te filer le code complet d'une "rubrique" avec le résultat que j'attends en pièce jointe:

Feuilles de style:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
div.ContextIcons
{
    position: relative;
    right: 30px;
    top: -38px;
    float: right;
}
div.Date
{
    position: relative;
    top: -16px;
    width: 45px;
    height: 45px;
    background: url(Images/date_bg.gif) no-repeat left top;
    color: white;
}
div.Date p.Day
{
    background-color: transparent;
    color: white;
    margin: 8px 0px 0px;
    padding: 0 0 0 1px;
    font-family: "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    width: 41px;
    text-align: center;
    line-height: 0.7em;
}
div.Date p.Month
{
    background-color: transparent;
    color: white;
    margin: 2px 0px 0px;
    padding: 2px 0 0 1px;
    font-family: "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    width: 41px;
    text-transform: uppercase;
    text-align: center;
    line-height: normal;
}
#ContentHeader
{
    margin-top: 10px;
    padding-top: 0px;
    width: 100%;
    background-image: url(Images/background-contentheader.png);
    background-repeat: repeat-x;
    background-position-y: 10px;
    line-height: normal;
}
#ContentHeader:hover
{
 background-color:White;
 }
#ContentHeader input
{
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    width: 150px;
    height: 150px;
}
 
#ContentHeader h1
{
    color: White;
    font-family: Candara, Verdana, Tahoma, Sans-Serif;
    padding-bottom: 1px;
    font-size: 1.3em;
    margin-bottom: 1em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 10px;
    border-bottom: #cbcec5 1px;
    display: block;
}
#ContentHeader a
{
    text-decoration: none;
    color: White;
}
 
#ContentHeader a:hover
{
    text-decoration: none;
}
#ContentHeaderDetails
{
    font-size: x-small;
    line-height: normal;
    display: block;
    padding-bottom: 5px;
}
#ContentHeaderDetails a
{
    color: highlight;
}
#ContentSummary
{
    font-style: italic;
    clear: both;
    margin-top: 3px;
}
#ContentFooter
{
    font-size: x-small;
    text-align: right;
    margin-right: 70px;
}
#ContentFooter a
{
    color:Highlight;}

Mon extrait HTML:

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
<div id="ContentHeader">
    <img id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_imgPole" class="SmallImage" src="App_Themes/Common/Empty48.png" style="border-width:0px;" />
    <h1>
        <a id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_lblTitre" href="Pages/Actualites/Actualite.aspx?ID=c9681969-51f4-4111-9db2-1657e785fd67">Bonne année 2008!</a>
    </h1>
    <div class="ContextIcons">
        <div id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_pnlEdit">
 
            <input type="image" name="ctl00$MasterContentPlaceHolder$Repeater1$ctl00$UcActualiteHeader$btnEdit" id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_btnEdit" title="Editer cette actualité" src="App_Themes/Common/iconEdit.png" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MasterContentPlaceHolder$Repeater1$ctl00$UcActualiteHeader$btnEdit&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Edit/EditActualite.aspx?ID=c9681969-51f4-4111-9db2-1657e785fd67&quot;, false, false))" style="height:16px;width:16px;border-width:0px;" />
 
</div>
        <div id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_DatePanel" class="Date">
 
            <p class="Day">
                <span id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_ActualiteDateJourLabel" class="Day">1</span></p>
            <p class="Month">
                <span id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_ActualiteDateMoisLabel" class="Month">janv.</span></p>
 
</div>
    </div>
    <div id="ContentHeaderDetails">
 
        Posté par
        <a id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_LinkMembre" href="Pages/Membres/Membre.aspx?ID=e13eb417-a821-4bd7-89b9-6f112e4511d8">ilag</a>
        le
        <span id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_LabelDate">07/01/2008 à 15:02</span><br />
 
            <span id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_lblPageSeen">Cette page a été vue 38 fois</span>
    </div>
    <div id="ContentSummary">
        <div id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_SummaryPanel">
 
            <span id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_lblResume">Tous les membres de l'association vous souhaitent une excellente année 2008</span>
 
</div>
    </div>
    <div id="ContentFooter">
        <a id="ctl00_MasterContentPlaceHolder_Repeater1_ctl00_UcActualiteHeader_lblDetails" title="Voir l'actualité: Bonne année 2008!" href="Pages/Actualites/Actualite.aspx?ID=c9681969-51f4-4111-9db2-1657e785fd67">Lire la suite...</a>
    </div>
</div>

Si tu as une idée...
Merci!

Invité · 01/04/2008, 19h06

Personne n'a jamais eu ce problème...?

**Erwan31** · 01/04/2008, 19h09

Tu n'aurais pas une page en ligne ça faciliterait les choses.

Invité · 02/04/2008, 00h21

Salut,

Le site n'est pas encore en ligne...
...mais la page html est accessible ici: http://www.marseille.archi.fr/Arch%5...lites.aspx.htm

Dans Firefox, l'icône "Crayon" se glisse sous le pavé de la date. C'est évident quand on rend le bloc div de la date transparent...

Merci de ton aide

Question bonus:
En vérifiant le résultat dans Firefox, j'ai visiblement un problème de codage que je n'ai pas en développant en local... alors que pour IE, tout se passe bien.
Quelle est la différence ?!

**Erwan31** · 02/04/2008, 01h24

Donnes une largeur suffisante à ton div conteneur .ContextIcons,
supprimes display:inline-block puisque la propriété float fait que la
valeur de la propriété display est ignorée (excepté pour la valeur none).
Ensuite fais flotter ton bloc date à droite:

Code :

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

1
2
3
4
5
6
7
8
9
10
div.Date
{
    float: right;
    position: relative;
    top: -16px; 
    width: 45px;
    height: 45px;
    background: url(date_bg0.gif) no-repeat left top;
    color: white;
}

Différence de juxtaposition/superposition entre IE7 et FF

CSS

Discussions similaires

Partager

Partager