Propriété de CSS juste pour IE7
Bonjour,
J'utilise VS2008 et j'ai un souci avec une application ASP.NET/C# sur des pages comportant des tableaux de boutons (n lignes, n colonnes). J'aimerais que les boutons soient centrés dans les cellules du tableau, verticalement tout est ok, mais le problème se situe horizontalement.
J'y arrive bien pour IE8, Firefox, Safari, Chrome...mais dans ce cas là, c'est IE7 qui fait n'importe quoi....les boutons partent sur la droite...
Si je le fais bien pour IE7, ce sont les autres navigateurs qui ont des soucis de présentation.
Un tableau se trouve à chaque fois dans un contentplaceholder, j'ai une page maitre, un fichier CSS pour l'application.
Je donne ici le code ASP.NET le plus simple...juste deux boutons (1 ligne, 2 colonnes) ...même si j'ai fait pleins d'essais en variant les attributs de placement, dimensionnement...
Code:
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
|
<asp:Content ID="ContentMenuBouton" ContentPlaceHolderID="ContenuClientASP" Runat="Server">
<div id="Default" style="width:100%;height:100%;vertical-align:middle;">
<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> |
Actuellement, j'ai une classe CSS dans le fichier CSS pour faire le centrage :
Code:
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'utilise une ruse pour centrer chaque bouton (placement horizontal à 50% et marge gauche négative de la moitié de la largeur du bouton).
En commentaires, j'indique comment cela peut s'avérer correct pour IE7 (cad en enlevant text-align et position et en spécifiant margin-left à 0px).
D'où plusieurs questions :
a) Y a-t-il une méthode plus universelle que celle employée car c'est un peu de la bidouille (pas trouvé mieux tout seul) ?
b) Peut-on faire des déclarations CSS conditionnelles en fonction du navigateur ou d'une version de navigateur ? Si oui, où et comment (dans le CSS, dans la page maitre,...) ?
Même s'il y a une réponse à la question a) la réponse à la question b) m'intéresse aussi. Merci !
N.B. : J'ai bien essayé des astuces CSS qui marchent dans des fichiers HTML simples pour n'appliquer des propriétés CSS qu'à IE7 dans mes classes CSS, mais Visual Studio y fait une allergie à la compilation :aie:
