Discussion :

[Unusual]

Bonjour,
J'ai un projet ASP.NET/C# et juste (encore) un souci de représentation visuelle sous IE7...tout marchant comme souhaité sous IE8/FF/Chrome/Safari

Même si au départ, j'avais quelque chose de simple qui marchait de la même façon, je suis arrivé après pas mal de tests à ce que je vais présenter...et qui n'est pas trop de loin de l'effet escompté...

Ma page représente un choix entre plusieurs modules (deux pour l'instant, mais cela évoluera dans le temps, le nombre augmentera) représentés sous la forme de boutons...la volonté étant d'avoir un tableau pour que tous ces modules présents sur chaque ligne (pour l'instant une seule) soient espacés proportionnellement verticalement.

J'ai donc un tableau sur une ligne avec deux cellules qui doivent occuper 50% de la largeur...et les boutons doivent être centrés dans chaque cellule. Simple d'un premier abord...mais avec IE, cela n'est jamais simple...

Au départ, j'avais juste des attributs de centrage, alors j'ai cherché des ruses pour centrer des tableaux sous IE et j'ai trouvé une astuce en appliquant une classe CSS comme présentée ci-dessous (positionnement à 50% et application d'une marge gauche négative de 50% la largeur du bouton à centrer dans la cellule)

J'ai une page maitre avec un contentplaceholder comme suit :

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
 
<asp:Content ID="ContentMenuBouton" ContentPlaceHolderID="ContenuClientASP" Runat="Server">
    <div id="Default" style="width:100%;height:100%;vertical-align:middle;">
        <div id="MessageErreur">
        </div>
        <div style="height:100%;vertical-align:middle">
            <table style="width:100%;height:100%;vertical-align:middle;text-align:center">
            <tr style="text-align:center" align="center">
                    <td align="center" style="vertical-align:middle;text-align:center">
 
                       <div class="centrage">
                        <dxe:ASPxButton ID="BtnConsultation" runat="server" 
                            Height="192px" onclick="BtnConsultation_Click" Width="289px" 
                            HorizontalAlign="Center" VerticalAlign="Middle" EnableTheming="True">
                            <Image AlternateText="Consultation" Height="192px" 
                                ToolTip="Module consultation" Url="~/Images/ModuleConsult.png" 
                                Width="289px" UrlHottracked="~/Images/ModuleConsultHover.png">
                            </Image>
                            <Paddings Padding="0px" />
                            <FocusRectPaddings Padding="0px" />
                        </dxe:ASPxButton>
                        </div>
 
                    </td>
                    <td align="center" style="vertical-align:middle;text-align:center">
 
                        <div class="centrage">
                        <dxe:ASPxButton ID="BtnSaisieIntervention" runat="server" Width="289px" Height="192px" 
                            onclick="BtnSaisieIntervention_Click" HorizontalAlign="Center" 
                            VerticalAlign="Middle">
                            <Image AlternateText="Saisie intervention" 
                                ToolTip="Module saisie interventions" Url="~/Images/ModuleInterv.png" 
                                UrlHottracked="~/Images/ModuleIntervHover.png">
                            </Image>
                            <Paddings Padding="0px" />
                            <FocusRectPaddings Padding="0px" />
                        </dxe:ASPxButton>
                        </div>
 
                    </td>
            </tr>
            </table>
        </div>
    </div>    
</asp:Content>

dans mon default.css, j'ai la classe centrage comme suit :

Code :

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

1
2
3
4
5
6
7
8
9
 
.centrage 
{
    text-align: center; /* ne pas mettre pour IE7 */    
    position:relative; /* ne pas mettre pour IE7 */
    left:50%;
    margin-left:-144px; /* mettre à 0 pour IE7 */
    width:290px;
}

J'aurai voulu effectuer les modifications présentées ci-dessus en commentaires RIEN QUE POUR IE7...et cela marcherait (tester sous IE8 en mode compatibilité IE7 et propriétés modifiées via les outils de développement (F12)).

Comment puis-je effectuer cela ?
Aurai-je dû m'y prendre autrement (pour faire du compatible pour tous : IE7, IE8, IE9, FF2, FF3, Chrome, Safari)...car après tout il ne me manque qu'IE7 pour l'instant...

J'ai joint des captures IE8 et IE7 pour bien montrer la différence de rendu en montrant la première cellule entourée à chaque fois d'un liseret bleu. On voit bien la différence sous IE7...et le plus embêtant, au delà du fait qu'il n'y ait pas le centrage, c'est la présence de l'ascenseur horizontal du fait du décalage des boutons hors de leur cellule respective.

Merci d'avance pour vos contributions.

[eckerdecker]

Bonjour

essayes ça :

Code :

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

1
2
3
4
.centrage {
  width:290px;
  margin:0 auto;
}