Müssen div und CSS-basierte Seiten arbeiten in IE 7

Question

Ich arbeite an einem Projekt, wo ich die Seiten mit div Tags und CSS erstellen muss. Die Seiten sehen in Firefox, Opera, Safari und IE 8 gut aus, aber mein Klient, der IE7 benutzt, klagt über Layoutprobleme in IE 7. Kann jemand einen Blick darauf werfen und mir sagen, wie man den Code repariert, damit er in allen funktioniert Browser, vor allem IE 7? Links und CSS-Code ist unten. Vielen Dank.

Homepage ist hier ein: (-Code unten ist) 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; 
} 

Answer 1

IE7 verschiedene Voreinstellungen und Verhalten für margin und padding als die anderen Browsern hat. Eine schnelle Betrachtung der Seite in IE7 deutet darauf hin, dass wahrscheinlich die meisten Ihrer Probleme vorliegen.

Answer 2

Wenn Standardränder und Polsterung sind in der Tat das Problem, wie Ryan so hilfreich vorgeschlagen, können Sie jedes Element zwingen, den gleichen Basis-Marge und Polsterung mit der folgenden Aussage zu haben:

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

Beachten Sie, dass dies wahrscheinlich brechen Ihr Layout auch in den anderen Browsern, aber zumindest werden sie alle genauso gebrochen.

Answer 3

Sie könnten versuchen, mit dem Padding das navmenu zu versetzen, anstatt position: relative und left zu verwenden.

Answer 4

Sie

nicht

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

U wollen verwenden Sie nicht Ihre gesamte Website für HTML-Elemente neu zu schreiben, die den Standardwert tatsächlich benötigen.

Verwendung css reset

Verwenden XHTML- und CSS-Code gültig

Und fix common bugs

Answer 5

Sie Ihre IE8 zwingen können Seiten wie IE7 zu machen und das Layout selbst überprüfen. Lesen Sie, dass: http://blogs.msdn.com/ie/archive/2008/08/27/introducing-compatibility-view.aspx

Verwendung:

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

aber nur für Debug-

Answer 6

Um zu testen, wie Ihre Seite in IE7 sieht ohne Meta-Tag-Tricks oder ähnliches, können Sie einen virtuellen Sandbox-Browser herunterladen von hier: http://www.xenocode.com/browsers/ Ideal zum Testen von Webanwendungen.