Discussion :

[rems033]

Salut à tous,

J'ai un problème je pense lié à la balise position mal insérée quelque part mais je ne sais où !
Le problème ne se pose que sous IE6 et pas sur IE7 ni FF2 ou 3 !

Pour présenter mon souci, je vous renvoi à l'URL suivante : URL_probleme

Voici le code css responsable je pense :

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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
/*
 
Classe CSS pour le design global graphique du site
 
*/
 
* {
    margin:0px ;
    padding:0px ;
}
 
body {
    background-image:url(../images/kg_01.png) ;
    background-repeat:repeat-x ;
    background-color:#FFFFFF;
    font: 100.01%/1.3 Verdana,Arial,sans-serif;text-align:center
}
 
#global {
    width:898px ;
    position:absolute ;
    left:50% ;
    margin-left: -449px;
}
 
#header {
    width:898px;
    heigjt:151px;
}
 
#spacer_gauche_header {
    float:left ;
    width:25px ;
    height:161px ;
    background-image:url(../images/kg_02.png) ;
    repeat:none ;
    overflow:hidden ;
}
 
#content_header {
    float:left ;
    width:852px ;
}
 
#spacer_droite_header {
    float:left ;
    width:21px ;
    height:161px ;
    background-image:url(../images/kg_05.png) ;
    repeat:none ;
    overflow:hidden ;
}
 
#content1 {
    width:852px ;
    height:132px ;
}
 
#logo {
    float:left ;
    width: 262px ;
    height: 132px ;
    background-image:url(../images/kg_03.png) ;
    overflow:hidden ;
}
 
#logo_left {
    float:left ;
    width: 590px ;
    height:132px ;
}
 
#logo_left_up {
    width: 590px ;
    height:81px ;
    padding-top:3px ;
    padding-left:100px ;
    background-image:url(../images/kg_04.png) ;
    background-repeat:no-repeat ;
    z-index:1000;
    text-align:left ;
    font: bold 10px "Trebuchet MS" ;
    font-size: 10px ;
    color:#FFFFFF ;
    overflow:hidden ;
}
 
#logo_left_down {
    width: 590px ;
    height:81px ;    
    overflow:hidden ;
    text-align:right;
}
 
#content_global {
    width:852px;
    padding-top:5px ;
    background-image:url(../images/kg_08.png) ;
    background-repeat:no-repeat ;
    overflow:hidden ;
}
 
#boxcontent {
    display:block;  
    background:#FFFFFF; 
    border-left:1px solid #999999 ; 
    border-right:1px solid #999999 ;
    font-family:Verdana, Arial, Helvetica, sans-serif ;
    font-size:15px ;
    color:#666666 ;
}
 
#time {
    text-align:center ;
    padding-top:10px;
    width:128px ;
    height:128px ;
}
 
#time_title {
    width:128px ;
    height:34px ;
    background-image:url(../images/calendar_01.png) ;
    background-repeat:no-repeat ;
    overflow:hidden ;
}
 
#time_content {
    width:128px ;
    height:74px ;
    background-image:url(../images/calendar_02.png) ;
    background-repeat:no-repeat ;
    overflow:hidden ;
}
 
#time_footer {
    width:128px ;
    height:20px ;
    background-image:url(../images/calendar_03.png) ;
    background-repeat:no-repeat ;
    overflow:hidden ;
}

et le code HTML de l'index :

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
 
<div id="global">
    <div id="header">
        <div id="spacer_gauche_header"></div>
        <div id="content_header">
            <div id="content1">
                <div id="logo">
                </div>
                <div id="logo_left">
                    <div id="logo_left_up">
                        <form action="#" onsubmit="return validate(this)" method="post">
                        email&nbsp;&nbsp;<input type="text" size="16" id="login" iname="login">
                        &nbsp;&nbsp;
                        Mdp&nbsp;&nbsp;<input type="password" size="16" id="mdp2" name="mdp2">&nbsp;
                        <a href="#"><img src="images/valid1.png" border="0"></a>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="#">mdp oublié?</a>&nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="#">Rejoignez-nous</a>
                        </form>
                    </div>
                    <div class="menu">
                        <ul id="menu">
                            <li><a href="#">Accueil</a></li>
 
                            <li><a href="#">Annonces</a></li>
                            <li><a href="#">M&eacute;tier</a></li>
                            <li><a href="#">R&egrave;glementation</a></li>
                            <li value="1"><a href="#">Liens</a></li>
                            <li><a href="#">Forum</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                        <div id="slide"></div>
                    </div>
                </div>
            </div>
            <div id="content_global">
 
                <div class="raised">
                    <div align="left"><b class="b1"></b>
                        <b class="b2"></b>
                        <b class="b3"></b>
                        <b class="b4"></b>
                    </div>
                    <div id="boxcontent">
                        <table width="95%">
                            <tr>
                                <td width="30%" align="center">
                                    <table width="100%" align="center">
                                        <tr align="center">
                                            <td>
                                                <div id="time">
                                                    <div id="time_title">
                                                        <p><?php echo get_month(); ?></p>
                                                    </div>
                                                    <div id="time_content">
                                                        <p><?php echo get_day(); ?></p>
                                                        <p id="ur" class="time"></p> 
                                                    </div>
                                                    <div id="time_footer"></div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center" class="gauche">
                                            test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center" class="gauche">
                                            test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td width="70%" align="left" valign="top" class="gauche">
                                test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
                                </td>
                            </tr>
                        </table>
 
                    </div>
                    <b class="b4b"></b>
                    <b class="b3b"></b>
                    <b class="b2b"></b>
                    <b class="b1b"></b>
              </div>
 
 
            </div>
        </div>
        <div id="spacer_droite_header"></div>
    </div> 
</div>

J'avoue que je sèche un peu malgré tous les tutos que l'on puisse trouvé sur notre ami gogole !

Merci pour tout vos coups de pouce !

A très bientôt !

[Erwan31]

Bonsoir,
Je t'avais déjà dépanné sur un autre site de taxi dont la structure était excessivement alambiquée, ben là on est pas très loin

Si tu ne simplifies pas d'avantage la structuration de ton code et particulièrement les imbrications excessives de div ainsi que certaines règles CSS, tu te retrouvera vite confrontés à d'autres problèmes de ce type que tu ne maitrisera pas. Lorsque tu ajoutes des déclarations CSS ou un élément HTML, réfléchis bien à leur utilité.

D'autre part je te conseil d'éviter de déclarer systématiquement et inutilement
overflow:hidden, margin:0px, padding:0px et position:relative
sur tes blocs, dans la grande majorité des cas ça ne sert à rien les div n'étant pas pourvu de marges/padding par default et l'overflow:hidden étant source d'inaccessibilité visuelle des contenus, c'est d'ailleurs de là que vient ton problème:

Ton div logo_left passait sous le logo mais comme le bloc parent était en overflow:hidden et que sa hauteur était précisée, tu ne voyais le contenu qui dépassait.

La solution pour le faire passer à droite dans IE6- est d'ajouter un overflow:hidden (non problématique ici) et de réduite sa largeur à 580px.

ce code suffit:

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
#content1 {
	width:852px ;
	height:132px ;
}
 
#logo {
	float:left ;
	width: 262px ;
	height: 132px ;
	background: url(kg_03000.png) ;
}
 
#logo_left {
	overflow:hidden;
	width: 580px ;
	height:132px ;
}

[rems033]

Merci.
En ajoutant uniquement l'overflow:hidden dans le logo_left sans réduire la largeur, tout fonctionne nickel...
Merci encore !