Необходимо, чтобы страницы на основе div и css работали в IE 7

Я работаю над проектом, где мне нужно создавать страницы, используя теги div и css. Страницы отлично смотрятся в Firefox, Opera, Safari и IE 8, но мой клиент, который использует IE7, жалуется на проблемы с макетами в IE 7. Может кто-нибудь взглянуть и рассказать мне, как исправить код, чтобы он работал во всех браузеров, особенно IE 7? Ссылки и код css приведены ниже. Благодарю.Необходимо, чтобы страницы на основе div и css работали в IE 7

Главная страница здесь: (код ниже) 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; 
}

источник

2009-03-18 Anonymous

IE7 имеет различные значения по умолчанию и поведение для поля и отступы, чем другие браузеры. Быстрый просмотр страницы в IE7 предполагает, что, вероятно, большинство проблем вы найдете.

источник

2009-03-18 16:53:41

Итак, что мне изменить, чтобы заставить его работать? – 2009-03-18 16:57:30

@ Даниэль: Я так понимаю, вы не веб-разработчик? –

@ Gortok: согласно его веб-сайту, он веб-разработчик; просто очень плохо. – Welbog

Если по умолчанию поле и отступы действительно ваша проблема, как Райано так услужливо предложили, вы можете заставить каждый элемент, чтобы иметь те же самые базовые поля и отступы со следующим утверждением:

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

Обратите внимание, что это, вероятно, сломаться ваш макет в других браузерах тоже, но по крайней мере все они будут разбиты точно так же.

источник

2009-03-18 17:09:06 Welbog

Так ли это исправить элементы или просто настроить их для исправления (Как в добавлении значения px до тех пор, пока оно не выровняется справа)? – 2009-03-18 17:13:31

Это не исправит их. Это сделает все одинаковым во всех браузерах, поэтому вам все равно придется это исправить.Но как только вы его исправляете один раз, он должен быть исправлен для всех. * ЕСЛИ * это проблема. – Welbog

Ну, это проблема. Мой клиент говорит, что некоторые вещи «отключены» в IE7, в то время как они отлично смотрятся во всех других браузерах. – 2009-03-18 17:17:08

Вы можете попробовать использовать прокладку для смещения navmenu вместо использования положения: относительное и левое.

источник

2009-03-18 17:09:58 Geoff

Не используйте

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

U не хотите переписать весь сайт для HTML элементов, которые на самом деле нуждаются в значение по умолчанию.

использование css reset

Использование XHTML и CSS действительный код

И исправить common bugs

источник

2009-03-19 08:46:56

Вы можете заставить свой IE8, чтобы сделать страницы как IE7 и проверить макет самостоятельно. Читал, что: http://blogs.msdn.com/ie/archive/2008/08/27/introducing-compatibility-view.aspx

Использование:

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

но только для отладки

источник

2009-03-19 08:52:33 quark

Чтобы проверить, как ваша страница выглядит в IE7 без уловок мета-тегов или подобное, вы можете загрузить виртуальную песочницы браузер от здесь: http://www.xenocode.com/browsers/ Отлично подходит для тестирования веб-приложений.

источник

2009-03-19 08:58:34 simon

Необходимо, чтобы страницы на основе div и css работали в IE 7

ответ

Смежные вопросы