Les tabContainer et les navigateurs
Bonjour à tous.
Je suis confronté à un douleureux problème avec les TabContainer. En bas de message je colle du code simple à metre directement dans une page vide pour faire le test et bien voir.
En gros, les Header de mes TabContainer n'ont rien à voir entre IE et FF (ou Chrome) au niveau du Hover et du ActiveTab.
J'ai cherché comme un malade mais je ne trouve pas d'explication (hormis l'éternel : IE ne respecte pas les standards, bla, bla, bla. Bref, le discours que j'ai pas envie d'entendre).
Les AjaxControlToolKit ont été fait par des pros et ils seraient passés à côté d'un truc pareil ? Non, je n'y crois pas. Mais j'ai beau lire et relire la doc, je ne comprend pas pourquoi ça me fait ça.
Si vous aviez la bonté de m'orienter vers l'endroit où je ne suis pas encore allé, ça serait super cool.
Pour faire le test, rien de plus simple : copiez collez le code que je donne, ouvrez la page sur IE (c'est la référence bonne) et ouvrez la même page sur FF et vous verrez la différence sur le Header en baladant la souris dessus et en cliquant.
Je ne sais plus quoi faire.
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
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
|
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.TabPanel
{
padding-left:15px;
padding-right:15px;
padding-bottom:25px;
padding-top:15px;
}
.TabProfil .ajax__tab_header
{
}
.TabProfil .ajax__tab_header .ajax__tab_outer.
{
}
.TabProfil .ajax__tab_outer
{
}
.TabProfil .ajax__tab_outer .ajax__tab_inner.
{
}
.TabProfil .ajax__tab_inner
{
}
.TabProfil .ajax__tab_inner .ajax__tab_tab.
{
}
.TabProfil .ajax__tab_tab
{
background-color:#ffffcc;
color:#ff3333;
font-size:x-large;
font-weight:900;
padding:5px;
padding-left:15px;
padding-right:15px;
margin-right:5px;
margin:5px;
border-collapse:collapse;
}
.TabProfil .ajax__tab_body
{
background-color:#ffffcc;
margin-left:5px;
}
.TabProfil .ajax__tab_hover
{
background-color:#678713;
}
.TabProfil .ajax__tab_hover .ajax__tab_outer.
{
}
.TabProfil .ajax__tab_active
{
background-color:#678713;
}
.TabProfil .ajax__tab_active .ajax__tab_outer.
{
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajax:ScriptManager ID="sm" runat="server"></ajax:ScriptManager>
<div>
<ajaxToolkit:TabContainer ID="tabCont" runat="server" CssClass="TabProfil">
<ajaxToolkit:TabPanel ID="tab1" runat="server">
<HeaderTemplate>Titre tab1</HeaderTemplate>
<ContentTemplate>Contenu du tab 1</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="tab2" runat="server">
<HeaderTemplate>Titre tab 2</HeaderTemplate>
<ContentTemplate>Contenu du tab 2</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="tab3" runat="server">
<HeaderTemplate>Titre tab 3</HeaderTemplate>
<ContentTemplate>Contenu du tab 3</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html> |
