Onepage avec une largeur de 20000px sous IE et Chrome

thybarth
Les bases HTML/CSS

Bonjour,
Avant d'exposer mon souci, 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 devient un pseudo scroll vertical !!!
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 :

*{
    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;
}

Merci pour votre aide...

5 réponses

Leny

Je n'ai pas IE sur mon mac (et ma machine virtuelle est en rade), mais sur ma version de Chrome (18.0.1025.163, mise à jour ce matin), je n'ai aucun souci.
Tu as résolu ton problème entre temps ?

thybarth
Auteur

Merci Leny pour ta réponse, sur ma version Chrome (18.0.1025.162 m) sous Windows c'est une vraie cata !!! Hélas non je n'ai toujours pas réussi à résoudre mon problème.

Leny

Je n'ai rien pour tester sous windows actuellement, mais toutes les fois où j'ai joué avec du scroll horizontal et/ou vertical, je mettais ce style :

html {
    position: relative;
    width: 100%;
    height: 100%;
}

Je n'ai pas la preuve que ça peut aider, mais bon, ça ne coute rien de le tester sur ton design.

thybarth
Auteur

Je viens de tester et ça ne change rien :( mais merci pour le tuyau

Je mets le bout de css correspondant au scroll, des fois que cela puisse faire avancer la chose :

span.footer{
    position:fixed;
    left:10px;
    bottom:10px;
    font-size:12px;
}
span.footer a{
    padding-right:20px;
    text-decoration:none;
}
span.footer a:hover{
    text-decoration:underline;
}
/*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*/
coloo

Connais tu coda slider de Niall Doherty ?
Je ne vois pas ta page donc je ne pourrais t'aider plus :p