Besoin de faire fonctionner les pages basées sur div et css dans IE 7

Je travaille sur un projet où j'ai besoin de construire les pages en utilisant les balises div et css. Les pages vont bien dans Firefox, Opera, Safari et IE 8, mais mon client qui utilise IE7 se plaint de problèmes de mise en page dans IE 7. Quelqu'un peut-il jeter un oeil et me dire comment corriger le code de sorte qu'il fonctionnera dans tous les navigateurs, en particulier IE 7? Les liens et le code CSS sont ci-dessous. Merci.Besoin de faire fonctionner les pages basées sur div et css dans IE 7

Page d'accueil est ici: (le code est ci-dessous) http://www.danieldicenso.20m.com/citybeams/

/* HOME PAGE CSS CODE */ 
body {font-size:12px; font-family:"trebuchet MS", verdana, arial, sans-serif; background: #CCCCCC; word-wrap:break-word;} 

#wrapper { 
    text-align: left; 
    margin: 0px auto; 
    padding: 0px; 
    border:0; 
    width: 1000px; 
    background: #FFFFFF; 
} 

#header { 
    margin: 0 0 15px 0; 
    background: #ffffff; 
} 

#side-a { 
    float: left; 
    width: 300px; 
} 

#side-b { 
    float: right; 
    width: 300px; 
} 

#content { 
    float: left; 
    width: 400px; 
} 

#footer { 
    clear: both; 
    background: #ffffff; 
} 

.curvy2 { 
    position:relative; 
    width:250px; 
    color:#000; 
    margin-top: 1em; 
    margin-right: auto; 
    margin-bottom: 1em; 
    margin-left: auto; 
    background-color: #99FF99; 
    background-image: url(bl.gif); 
    background-repeat: no-repeat; 
    background-position: left bottom; 

} 
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#327734; background:#fff; background-image:url(metalgreen2.jpg); overflow:hidden; font-style:normal; z-index:1;} 
#ctl {top:0; left:0;} 
#cbl {bottom:0; left:0;} 
#ctr {top:0; right:0;} 
#cbr {bottom:0; right:0;} 
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#327834; line-height:40px; font-weight:normal;} 
#ctl b {left:-8px;} 
#ctr b {left:-25px;} 
#cbl b {left:-8px; top:-17px;} 
#cbr b {left:-25px; top:-17px;} 
.curvy p {position:relative; z-index:100; padding:5px 10px;} 

.bl { 
    width: 330px; 
    background-color: #99ff99; 
    background-image: url(bl.gif); 
    background-repeat: no-repeat; 
    background-position: 0 100%; 
} 
.br {background: url(br.gif) 100% 100% no-repeat} 
.tl {background: url(tl.gif) 0 0 no-repeat} 
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px} 
.clear {font-size: 1px; height: 1px} 


.bl2 { 
    width: 330px; 
    background-color: #ffffff; 
    background-image: url; 
    background-repeat: no-repeat; 
    background-position: 0 100%; 
} 
.br2 {background: url100% 100% no-repeat} 
.tl2 {background: url 0 0 no-repeat} 
.tr2 {background: url 100% 0 no-repeat; padding:10px} 
.clear2 {font-size: 1px; height: 1px 
} 

#navmenu { 
    position: relative; 
    left: 16px; 
    top: 0px; 
    width: 712px; 
    height: 22px; 
    z-index: 2; 
    background: #99FF99; 
    text-align: center; 
    padding: 0px; 
    } 

body,td,th { 
    color: #000000; 
} 
a:link { 
    color: #003333; 
} 
a:visited { 
    color: #000066; 
} 
a:active { 
    color: #FF0000; 
} 

-------------------- 

Sign-up page is here: (CSS Code below) 
http://www.danieldicenso.20m.com/citybeams/signuppage.html 

/* SIGNUP PAGE CSS CODE */ 
body {font-size:12px; font-family:"trebuchet MS", verdana, arial, sans-serif; background: #CCCCCC; word-wrap:break-word;} 

#wrapper { 
    text-align: left; 
    margin: 0px auto; 
    padding: 0px; 
    border:0; 
    width: 1000px; 
    background: #FFFFFF; 
} 

#header { 
    margin: 0 0 15px 0; 
    background: #ffffff; 
} 

#side-a { 
    float: left; 
    width: 100px; 
} 

#side-b { 
    float: right; 
    width:100px; 
} 

#content { 
    float: left; 
    width: 800px; 
} 

#footer { 
    clear: both; 
    background: #ffffff; 
} 

.curvy2 { 
    position:relative; 
    width:250px; 
    color:#000; 
    margin-top: 1em; 
    margin-right: auto; 
    margin-bottom: 1em; 
    margin-left: auto; 
    background-color: #99FF99; 
    background-image: url(bl.gif); 
    background-repeat: no-repeat; 
    background-position: left bottom; 

} 
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#327734; background:#fff; background-image:url(metalgreen2.jpg); overflow:hidden; font-style:normal; z-index:1;} 
#ctl {top:0; left:0;} 
#cbl {bottom:0; left:0;} 
#ctr {top:0; right:0;} 
#cbr {bottom:0; right:0;} 
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#327834; line-height:40px; font-weight:normal;} 
#ctl b {left:-8px;} 
#ctr b {left:-25px;} 
#cbl b {left:-8px; top:-17px;} 
#cbr b {left:-25px; top:-17px;} 
.curvy p {position:relative; z-index:100; padding:5px 10px;} 

.bl { 
    width: 330px; 
    background-color: #99ff99; 
    background-image: url(bl.gif); 
    background-repeat: no-repeat; 
    background-position: 0 100%; 
} 
.br {background: url(br.gif) 100% 100% no-repeat} 
.tl {background: url(tl.gif) 0 0 no-repeat} 
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px} 
.clear {font-size: 1px; height: 1px} 


.bl2 { 
    width: 330px; 
    background-color: #ffffff; 
    background-image: url; 
    background-repeat: no-repeat; 
    background-position: 0 100%; 
} 
.br2 {background: url100% 100% no-repeat} 
.tl2 {background: url 0 0 no-repeat} 
.tr2 {background: url 100% 0 no-repeat; padding:10px} 
.clear2 {font-size: 1px; height: 1px} 

#navmenu { 
    position: relative; 
    left: 16px; 
    top: 0px; 
    width: 712px; 
    height: 22px; 
    z-index: 2; 
    background: #99FF99; 
    text-align: center; 
    padding: 0px; 
} 
.signupfield { 
    float: none; 
    width:480px; 
    color:#000; 
    margin-top: 1em; 
    margin-right:1 em; 
    margin-bottom: 1em; 
    position: relative; 
    left: 75px; 
    background-color: #99FF99; 
    background-image: url(bl.gif); 
    background-repeat: no-repeat; 
    background-position: left bottom; 
} 
---------------------------------- 

Reviews page example is here: (CSS code below) 
http://www.danieldicenso.20m.com/citybeams/reviewers.html 

/* REVIEW PAGE CSS CODE */ 
body {font-size:12px; font-family:"trebuchet MS", verdana, arial, sans-serif; background: #CCCCCC; word-wrap:break-word;} 

#wrapper { 
    text-align: left; 
    margin: 0px auto; 
    padding: 0px; 
    border:0; 
    width: 1000px; 
    background: #FFFFFF; 
} 

#header { 
    margin: 0 0 15px 0; 
    background: #ffffff; 
} 

#side-a { 
    float: left; 
    width: 50px; 
} 

#side-b { 
    float: right; 
    width: 200px; 
} 

#content { 
    float: left; 
    width: 750px; 
} 

#footer { 
    clear: both; 
    background: #ffffff; 
} 

.curvy2 { 
    position:relative; 
    width:250px; 
    color:#000; 
    margin-top: 1em; 
    margin-right: auto; 
    margin-bottom: 1em; 
    margin-left: auto; 
    background-color: #99FF99; 
    background-image: url(bl.gif); 
    background-repeat: no-repeat; 
    background-position: left bottom; 

} 
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#327734; background:#fff; background-image:url(metalgreen2.jpg); overflow:hidden; font-style:normal; z-index:1;} 
#ctl {top:0; left:0;} 
#cbl {bottom:0; left:0;} 
#ctr {top:0; right:0;} 
#cbr {bottom:0; right:0;} 
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#327834; line-height:40px; font-weight:normal;} 
#ctl b {left:-8px;} 
#ctr b {left:-25px;} 
#cbl b {left:-8px; top:-17px;} 
#cbr b {left:-25px; top:-17px;} 
.curvy p {position:relative; z-index:100; padding:5px 10px;} 

.bl { 
    width: 330px; 
    background-color: #99ff99; 
    background-image: url(bl.gif); 
    background-repeat: no-repeat; 
    background-position: 0 100%; 
} 
.br {background: url(br.gif) 100% 100% no-repeat} 
.tl {background: url(tl.gif) 0 0 no-repeat} 
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px} 
.clear {font-size: 1px; height: 1px} 


.bl2 { 
    width: 330px; 
    background-color: #ffffff; 
    background-image: url; 
    background-repeat: no-repeat; 
    background-position: 0 100%; 
} 
.br2 {background: url100% 100% no-repeat} 
.tl2 {background: url 0 0 no-repeat} 
.tr2 {background: url 100% 0 no-repeat; padding:10px} 
.clear2 {font-size: 1px; height: 1px} 

#navmenu { 
    position: relative; 
    left: 16px; 
    top: 0px; 
    width: 712px; 
    height: 22px; 
    z-index: 2; 
    background: #99FF99; 
    text-align: center; 
    padding: 0px; 
    } 
.signupfield { 
    position:relative; 
    width:480px; 
    color:#000; 
    margin-top: 1em; 
    margin-right: auto; 
    margin-bottom: 1em; 
    margin-left: -120px; 
    background-color: #99FF99; 
    background-image: url(bl.gif); 
    background-repeat: no-repeat; 
    background-position: left bottom; 

} 


body,td,th { 
    color: #000000; 
} 
a:link { 
    color: #003333; 
} 
a:visited { 
    color: #000066; 
} 
a:active { 
    color: #FF0000; 
} 
#selectionbar { 
    position: relative; 
    left: 0px; 
    top: 0px; 
    width: 750px; 
    height: 22px; 
    z-index: 2; 
    background: #ffffff; 
    padding: 0px; 
} 
#selectionbartwo { 
    position: relative; 
    left: 0px; 
    top: -10px; 
    width: 750px; 
    height: 22px; 
    z-index: 2; 
    background: #ffffff; 
    padding: 0px; 
} 

#selectionbarthree { 
    position: relative; 
    left: 0px; 
    top: -10px; 
    width: 750px; 
    height: 22px; 
    z-index: 2; 
    background: #ffffff; 
    padding: 0px; 
} 

#dividerline { 
    position: relative; 
    left: 0px; 
    top: -4px; 
    width: 750px; 
    height: 1px; 
    z-index: 2; 
    background: #ffffff; 
    padding: 0px; 
} 
#results { 
    position: relative; 
    left: 55px; 
    top: -14px; 
    width: 600px; 
    height: 1px; 
    z-index: 2; 
    background: #ffffff; 
    padding: 0px; 
}

Source

2009-03-18 Anonymous

IE7 a des valeurs par défaut et le comportement de marge et le rembourrage que les autres navigateurs. Une visualisation rapide de la page dans IE7 suggère que c'est probablement là où la majorité de vos problèmes sont.

Source

2009-03-18 16:53:41

Alors qu'est-ce que je change pour le faire fonctionner? –

@Daniel: Je suppose que vous n'êtes pas un développeur web? –

@Gortok: selon son site Web, il est un développeur Web; juste un très mauvais. – Welbog

Si les marges par défaut et le remplissage sont en effet votre problème comme Ryan si obligeamment suggéré, vous pouvez forcer tous les éléments à avoir la même marge de base et le rembourrage avec la déclaration suivante:

* { 
    margin: 0px; 
    padding: 0px; 
}

Notez que ce sera probablement briser votre disposition dans les autres navigateurs, mais au moins, ils seront tous brisés de la même manière.

Source

2009-03-18 17:09:06 Welbog

Donc, est-ce que cela fixerait les éléments ou simplement les régler pour être corrigés (comme pour ajouter une valeur px jusqu'à ce qu'elle soit alignée à droite)? –

Il ne les réparera pas. Cela rendra tout pareil dans tous les navigateurs, donc vous devrez toujours le réparer.Mais une fois que vous le réparez une fois, il devrait être réparé pour tous. * SI * c'est le problème. – Welbog

Eh bien, c'est le problème. Mon client dit que certaines choses sont "hors" dans IE7 alors qu'elles ont l'air bien dans tous les autres navigateurs. –

Vous pouvez essayer d'utiliser le remplissage pour décaler le menu nav au lieu d'utiliser la position: relative et gauche.

Source

2009-03-18 17:09:58 Geoff

Ne pas utiliser

*{margin: 0px;padding: 0px;}

U ne veux pas réécrire votre site entier pour les éléments HTML qui ont besoin réellement la valeur par défaut.

utilisation css reset

utilisation et xhtml css code valide

Et fixer common bugs

Source

2009-03-19 08:46:56

Vous pouvez forcer votre IE8 à afficher les pages comme IE7 et vérifier la mise en page vous. Vous avez bien lu: http://blogs.msdn.com/ie/archive/2008/08/27/introducing-compatibility-view.aspx

Utilisation:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

mais seulement pour le débogage

Source

2009-03-19 08:52:33 quark

Pour tester la façon dont votre page ressemble dans IE7 sans trucs méta-tag ou similaire, vous pouvez télécharger un navigateur sandbox virtuel ici: http://www.xenocode.com/browsers/ Idéal pour tester des applications web.

Source

2009-03-19 08:58:34 simon

Besoin de faire fonctionner les pages basées sur div et css dans IE 7

Répondre

Questions connexes