Нужно сделать так, чтобы страницы на основе div и css работали в IE 7 - PullRequest
Новая
       8

Нужно сделать так, чтобы страницы на основе div и css работали в IE 7

0 голосов
/ 18 марта 2009

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

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

Ответы [ 6 ]

4 голосов
/ 18 марта 2009

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

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

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

1 голос
/ 18 марта 2009

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

0 голосов
/ 19 марта 2009

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

0 голосов
/ 19 марта 2009

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

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

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

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

0 голосов
/ 19 марта 2009

Не использовать 

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

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

использовать css reset

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

И исправить Распространенные ошибки

0 голосов
/ 18 марта 2009

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

...