Onepage avec une largeur de 20000px sous IE et Chrome

**thybarth** · 18/04/2012, 14h45

Bonjour,
Avant d'exposer mon problème, j'aimerai savoir si IE et Chrome gèrent les pages avec un width de 20000 pixels ?
En effet je développe un site onepage en scroll horizontal voir ici, le CSS passe bien sous Firefox, Safari et Opéra, mais hélas la mise en page sous IE et Chrome n'est pas respectée et le scroll horizontal disparait pour une lecture normale en verticale !!!
A mon avis, mais je me trompe peut être, le problème vient du CSS plus que de l'élément jquery.

Voici le CSS correspondant à la largeur de la page :

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
*{
    margin:0;
    padding:0;
}
 
body{
    background-image:url(../images/back.jpg);
    background-repeat:repeat;
    font-family: 'Voltaire', sans-serif;
    color:#ccc;
    width:20000px;
    height: 100%;
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    overflow-x: hidden;
}

et le CSS correspondant au scroll horizontal :

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
/*scroll*/
.slide{
    margin:0px;
    bottom:0px;
    width:4000px;
    float:left;
    height:100%;
}
 
.slide h1{
    font-family: 'Voltaire', sans-serif;
    text-shadow:1px 1px 1px #f0f0f0;
    margin:20px 0 30px 80px;
}
 
.slide p{
    font-family: 'Voltaire', sans-serif;
    font-size:18px;
    margin:20px 0 30px 80px;
    width:600px;
}
 
.blue{  
    background: url(../images/blue.jpg) no-repeat top right;
}
 
.slide ul{
    list-style:none;
    margin:20px 0px 0px 550px;
}
 
.blue ul li{
    float:left;
    padding:5px;
    margin:5px;
    color:#aaa;
}
 
.blue ul li a{
    display:block;
}
 
.blue ul li a:hover{
    text-decoration:none;
    color:#fff;
}
/*fin scroll*/