Probleme de CCS

Bonjour, Voila j'ai un gros problème avec mon css en fait j'ai fait deux feuilles différentes pour mozilla et IE . Mon problème c'est que mon design part complètement en sucette kan on réduit la page par exemple je pourrait avoir une explication svp
Configuration: Windows XP
Firefox 3.0.12

6 réponses

  1. Contributeur
    Bonjour !

    C'est normal, tu n'as peut-être pas utilisé les pourcentages pour width et height...
    1. Mon code est hyper long je suis pas sur que vous voulez tous voir si ?
      1. Mais le voila c'est un peu le fouillie parce que j'essaye de le modifier

        body
        {
        width: 100%;
        height: 100%;
        margin: 0px;
        margin-top: 0px;
        background-color : #ffffff;
        }

        /* L'en-tête */
        .en_tete
        {
        width :200px;
        height :120px;
        border:none;
        margin-top:-75px;
        margin-left:0px;
        background-image:url("img/bandeau.jpg");
        }

        .bandeau
        {
        width: 100%;
        height: 100%;
        margin-left :22px;
        }

        /* Le menu */
        #menu
        {
        margin-top:-47px;
        float: left;
        width: 175px;
        height: 720px;
        background-image :url("img/silWEB.jpg");
        }

        #menu img
        {
        margin-top:-10px;
        }

        .element_menu h2
        {
        color: White;
        font-family: Century,"Times New Roman", Times, serif;
        text-align: center;
        }

        .element_menu a
        {
        font-weight:bold;
        position:relative;
        border : 2px #ffffff;
        color : white;
        display :block;
        margin: 5px ;
        text-align :center;
        font-family : Century,"Times New Roman","Arial Black",Times,sherif;
        LINE-HEIGHT: 50px;
        }

        .element_menu a:hover
        {
        background-repeat:no-repeat;
        border :solid 1px #ffffff;
        color: orange;

        }
        /* Le corps de la page */

        #corps
        {
        width : 59.5%;
        color: Black;
        font-family : Century;
        margin-left:175px;
        }

        .print #corps{
        overflow:hidden;
        }
        /* menu déroulant*/

        #conteneur-bande{
        width: 110.4%;
        background-color: #00488C;
        height:41px;
        margin-left:-28px;
        position:relative;
        margin-top: -28px;
        }

        #bande{
        position:absolute;
        }
        #bande dl{

        height:40px;
        margin:0; padding:0;
        display:block;
        float:left;
        }

        #bande dt{
        font-weight:bold;
        font-family: Century;
        width:182px;
        display:block;
        height:40px;
        color:white;
        line-height:40px;
        text-align:center;
        border-left:dotted 1px #aa6b13;
        border-right:dotted 1px #aa6b13;
        cursor:pointer;
        font-size: 18px;
        }
        #bande dt:hover{
        background-color :#96BC2D;
        color:white;
        }

        #bande dd{
        display:block;
        margin:0;padding:0;
        }
        #bande dd ul{
        margin:0; padding:0;
        text-align:center;
        list-style:none;
        }
        #bande dd ul li a{
        background-color:white;
        color:black;
        display:block;
        text-decoration:none;
        height:30px;
        line-height:30px;
        width: 182px;
        border:solid 1px #aa6b13;
        }
        #bande dd ul li a:hover{
        color:White;
        background-color:#e26719;
        }
        #bande dl dd{
        display:none;
        }
        #bande dl:hover dd{
        display:block;
        }
        .imgcorps
        {
        margin-top:-1px;
        background-image: url("img/fondUVERT.jpg");
        background-repeat : repeat-x;
        width :110.3%;
        margin-left :-28px;
        }
        .texterreur
        {
        text-align : center;
        font-family :Century;
        font-size: 30px;
        }
        .signalerreur
        {
        text-align :center;
        font-family :Century;
        font-size: 15px;
        }
        .retour
        {
        margin-left :440px;
        color : orange;
        }

        /* fleche retour*/
        .img
        {
        margin-left: 440px;
        width :50px;
        height:50px;
        border : none;
        }

        .img2
        {
        margin-left:370px;
        width: 200px;
        height:200px;
        }

        #corps h1
        {
        margin-top : 200px;
        color: #96BC2D;
        text-align: center;
        font-family: Consolas, "Arial Black", "Times New Roman", Times, serif;
        border : 0px solid black;
        }

        #corps h2
        {
        height: 30px;
        background-image: url("img/corps.jpg");
        background-repeat: no-repeat;
        padding-left: 30px;
        color: #a832c3;
        text-align: left;
        border : 0px solid black;
        }

        /* image accueil*/
        #img1
        {

        position : absolute;
        margin-top:400px;
        left : -230px;
        margin-left : 480px;
        }
        #img1 img
        {
        width : 18%;
        height : 16%;
        border : none;
        }
        #img1 img:hover
        {
        width :20%;
        height : 18%;
        border: 3px solid green;
        }

        #img2
        {
        position : absolute;
        margin-top:100px;
        left : -230px;
        margin-left : 480px;
        }

        #img2 img
        {
        width : 18%;
        height : 10%;
        border : none;
        }
        #img2 img:hover
        {
        width :20%;
        height : 18%;
        border: 3px solid orange;
        }
        #img3
        {
        position : absolute;
        margin-top:100px;
        left : 230px;
        margin-left : 494px;
        }
        #img3 img
        {
        width : 20%;
        height : 18%;
        border : none;
        }
        #img3 img:hover
        {
        width :100%;
        height : 98%;
        border: 3px solid blue;
        }
        #img4
        {
        position : absolute;
        margin-top:400px;
        left : 230px;
        margin-left : 480px;
        }
        #img4 img
        {
        width : 18%;
        height : 16%;
        border : none;
        }
        #img4 img:hover
        {
        width :20%;
        height : 18%;
        border: 3px solid black;
        }

        /*formulaire */

        .form {
        padding:1px;
        font-family : Century;
        width:500px;
        }

        .text
        {
        margin-left :50px;
        font-family:Comic sans MS;
        }

        .input {
        width: 184px;
        font-weight:bold;
        font-family: Century, "Arial Black", "Times New Roman", Times, serif;
        border:1px solid black;
        background-color:#A6BEDE;
        }

        .select {
        width :188px;
        font-weight: bold;
        font-family: Century, "Arial Black", "Times New Roman", Times, serif;
        background-color:#A6BEDE;
        }

        .option
        {
        width :185px;
        }

        .select :hover
        {
        background-color : green;
        }

        .textarea {
        border:1px solid black;
        font-family: Century, "Arial Black", "Times New Roman", Times, serif;
        background-color:#A6BEDE;
        overflow : scroll;
        }

        .submit
        {
        font-family: Century;
        font-weight:bold;
        display:block;
        margin-left:100px;
        width:110px;
        line-height:10px;
        text-align:center;
        color:black;
        }

        #tableau1
        {
        border :solid 1px #000000;
        margin-left : 200px;
        }
        #tableau
        {
        border :solid 1px #000000;
        margin-left : 100px;
        }

        .caption
        {
        font-weight:bold;
        color:#00488C;
        font-size:x-large;
        margin-top :40px;
        font-family:Century, "Arial Black", "Times New Roman", Times, serif;
        margin-bottom: 20%;
        }

        .th
        {
        font-size : large;
        color : black;
        font-family : Bauhaus 93, "Arial Black", "Times New Roman", Times, serif;
        }

        .td
        {
        font-family:Century, "Arial Black", "Times New Roman", Times, serif;
        text-align : center;
        border :dotted 1px #000000;
        background-color :#96BC2D;

        }

        .td1
        {
        font-family:Century, "Arial Black", "Times New Roman", Times, serif;
        text-align : center;
        border :dotted 1px #000000;
        background-color : #DCDCDC;

        }

        #pagination
        {
        color:#00488C;
        font-size: 15px;
        font-family:Comic sans MS;
        font-weight:bold;
        margin-left:50%;
        margin-top:4%;
        }

        .pagination:hover
        {
        color: orange;
        font-size: 15px;
        font-family:Comic sans MS;
        font-weight:bold;
        }

        .pagination1
        {
        color:#00488C;
        font-size: 15px;
        font-family:Comic sans MS;
        font-weight:bold;
        margin-left:0%;
        margin-top:4%;
        }
        .pagination1:hover
        {
        color: orange;
        font-size: 15px;
        font-family:Comic sans MS;
        font-weight:bold;
        }

        /*partie droite */
        #partiedroitehaut
        {
        margin-top :-47px;
        text-align:center;
        float : right;
        font-family : Century,"Times New Roman","Arial Black",Times,sherif;
        width : 21%;
        border-style: double;
        border-color : black;
        }
        .marquee
        {
        text-align: center;
        font-family : Century,"Times New Roman","Arial Black",Times,sherif;
        }
        .imageactu
        {
        margin-top :1px;
        float : right;
        width :100%;
        background-image :url("img/actualité.jpg");
        }

        #partiedroitebas
        {
        text-align :center;
        font-family : Century,"Times New Roman","Arial Black",Times,sherif;
        float : right;
        margin-right :-26%;
        margin-top : 22%;
        width : 21%;
        height: 21%;
        border-style: double;
        border-color : black;
        }
        .imagepartenaire
        {
        float:right;
        width : 100%;
        background-image:url("img/partenaires.jpg");
        }

        /* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

        #pied_de_page
        {
        margin-bottom :-20px;
        height: 50px;
        text-align: center;
        color: white;
        background-color: #00488C;
        margin-top: -2px;
        border: 0px solid black;
        }

        #pied_de_page a
        {
        color : white;
        }

        #pied_de_page a:hover
        {
        color : orange;
        }
        #peid_de_page a:visited
        {
        color :black;
        }
        .element_pied_de_page
        {
        background-image :url("img/bandebas.jpg");
        text-align : center;
        }
        1. Contributeur
          Je vois que tu as utilisé les pourcentages !
          C'est mieux comme ça.

          Au fait, préciser la largeur et la hauteur de body est inutile...