Проблема CSS в IE6 - PullRequest
Новая
       11

Проблема CSS в IE6

1 голос
/ 21 июля 2009

Я был вокруг и в кругах с этим, почти закончил свою веб-страницу и все хорошо в большинстве браузеров, кроме неизбежного IE6! Я провел некоторое исследование и обнаружил, что есть проблема с отступами и полями в CSS, и пытался безрезультатно. Есть ли кто-нибудь, кто мог бы помочь?

www.theclubnetwork.co.uk 

body {
    background: #ebf5fc url('../Images/body_bg.jpg') repeat-x 0 0;
    margin: 0px 0px 0px 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: blue;
        margin:0;
        padding:0;    
}
#env {
    position: relative;
    margin: 0 auto;
    width: 934px;
    background: url('../Images/env_bg.jpg') repeat-y 0 0;
    margin-top: 10px;
    padding: 125px 0 0 0;
}
#main {
    width: 934px;
    background:  transparent url('../Images/main_bg.jpg') no-repeat 0 0;
    z-index: 10;
}
#promo {
    position: absolute;
    top: 0;
    left: 0;
    width: 934px;
    background: url('../Images/promo_bg2.jpg') no-repeat 0 0;
}
#bor {
    position: relative;
    margin: 0 auto;
    top: 5px;
    width: 633px;
    background: url('../Images/bor_bg.gif') repeat-y 0 0;
    padding: 0 0 0 0;
}
#foot {

    height: 49px;
    width: 912px;
    background: url('../Images/foot_bg.png') no-repeat 0 100%;
    padding: 0 11px 8px 11px;
    color: #506273;
    font-size: 11px;
    clear: both;
    text-align: center;
}
h4 {
    font-family: Arial, Helvetica, sans-serif;
}
#foot a {
    font-weight: normal;
    color: #506273;
    padding-left: 0;
    background-image: none;
}
#foot div {
    padding: 8px 0 0 10px; /*top right bottom left*/
    line-height: 16px;
}
#logo {
    position: relative; 
    float: left; 
    width: 279px;
    padding-right:20px;
    top:20px;
    left: 10px; 
    text-align: center;
    z-index: 6;
    background-color: #ffa500;
}
#slow {
    position: relative; 
    text-align: center;
    z-index: 6;
}
.nav {
    position: relative; 
    float: left;
    width: 125px;
    height: 125px;
    background-color: #fff;
    text-align: center;
    z-index: 25;
}
* html #welcome {
    margin-left: 0px;
}
#welcome {
    position: relative;
    margin-left: 2px;
    float: left;
    width: 297px; 
    height: 150px; 
    background-color: #fff;
    z-index: 6;
    text-align: center;
    vertical-align: middle;
}
a.slogan {
    width: 150px;
    color: blue;
    font-size: 17px;
    clear: both;
    text-align: center;
    text-transform: uppercase;
}
a.mainslogan {
    width: 150px;
    color: #ffa500;
    font-size: 48px;
    clear: both;
    text-align: center;
    text-transform: uppercase;
}
a.sloganmiddle {
    width: 150px;
    color: #ffa500;
    font-size: 21px;
    clear: both;
    text-align: center;
    text-transform: uppercase;
}
a.bottomslogan {
    width: 150px;
    color: #fff;
    font-size: 21px;
    clear: both;
    text-align: center;
    text-transform: uppercase;
}
a.welcome_text {
    position : relative;
    top: 10px;
    color: blue;
    font-size: 30px;
    vertical-align: top;
    z-index: 6;
    display: block;
}
.our_web {
    position : relative;
    color: #ffa500;
    top: 10px;
    font-size: 20px;
    padding-bottom:7px;
    display:block;
}
a.form {
    font-size: 13px;
    padding-top:10px;
    padding-bottom: 10px;
    color: blue;
}
a.first_web {
    position : relative;
    color: #0d7acf;
    top: 0px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0px;
    text-align: middle;
    display: inline;
}
p.statement {
    position : relative;
    top: 0px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 0px;
    text-align: justify;
}
p.allocated {
    text-align: right;
}
* html .clubreg {
    padding-right: 0px;
    padding-left: 0px;
}    
.clubreg {
    position: relative; 
    float: left; 
    width: auto; 
    height: auto; 
    background-color: #fff;
    overflow: hidden;
    z-index: 10;
    padding-top: 12px;
    padding-right: 13px;
    padding-left: 12px;
    text-align: left;
}
.memreg {
    position: relative; 
    float: left; 
    height: auto; 
    background-color: #fff;
    overflow: hidden;
    text-align: center;
    z-index: 10;
    padding-bottom: 10px;
    padding-top: 12px;
    text-align: left;
}
.clubform {
    position: relative; 
    float: left; 
    width: auto; 
    height: auto; 
    background-color: #fff;
    z-index: 10;
    padding-bottom: 10px;
    padding-top: 12px;
    padding-right: 12px;
    padding-left: 12px;
    text-align: left;
}
div.box335 { 
    width: 220px; 
    float: left;
    background: transparent url('../Images/box220_bg_top.gif') no-repeat 0 0; 
}
div.box335in { 
    background: transparent url('../Images/box220_bg_btm.gif') no-repeat bottom left;
    padding: 0px 0px 5px 0px; /*top right bottom left*/
}
div.box220 { 
    width: 220px;
    float: left;
    padding-top: 5px;
    background: transparent url('../Images/box220_bg_top.gif') no-repeat 0 0; 
}
div.box220in { 
    background: transparent url('../Images/box220_bg_btm.gif') no-repeat bottom left; 
    padding: 0px 0px 30px 30px; /*top right bottom left*/
}
div.box267 { 
    width: 267px;
    float: left;
    padding-top: 5px;
    background: transparent url('../Images/box267_bg_top.gif') no-repeat 0 0; 
}
div.box267in { 
    background: transparent url('../Images/box267_bg_btm.gif') no-repeat bottom left; 
    padding: 0px 0px 10px 10px; /*top right bottom left*/
}
#news {
    position: relative; 
    float: left; 
    margin-left: 2px;
    width: 287px; 
    height: 165px; 
    background-color: #fff;
    z-index: 6;
    text-align: left;
    color: #0d7acf;
    padding-left: 12px;
    padding-right: 0px;
    padding-top: 13px;
}
div.box454 { 
    width: 454px;
    height: auto;
    float: left;
    background: transparent url('../Images/box454_bg_top.gif') no-repeat 0 0; 
}
div.box454in { 
    background: transparent url('../Images/box454_bg_btm.gif') no-repeat bottom left;
    padding: 10px 10px 30px 10px; /*top right bottom left*/
}
div.box609 { 
    width: 609px;
    min-height: 340px;
    height: auto;
    float: left;
    background: transparent url('../Images/box609_bg_top.gif') no-repeat 0 0;
    padding: 0px 0px 15px 0px; /*top right bottom left*/
}
div.box609in { 
    background: transparent url('../Images/box609_bg_btm.gif') no-repeat bottom left; 
    min-height: 478px;
    padding: 0px 40px 10px 15px; /*top right bottom left*/
}
div.member_title {
    color: blue;
    width: 100%;
    padding-top: 10px;
    padding-right: 40px;
    padding-bottom: 10px;
    font-weight: bold;
    text-align: center;
}
div.regreasons {
    text-align: center;
    font-weight: bold;
    padding-left: 10px;
    padding-right:10px;
}
div.box145 { 
    width: 145px;
    float: left;
    padding-top: 5px;
    padding-right: 0px;
    background: transparent url('../Images/box145_bg_top.gif') no-repeat 0 0;
}
div.box145in { 
    background: transparent url('../Images/box145_bg_btm.gif') no-repeat bottom left; 
    min-height: 100px;
    padding: 0px 10px 0px 10px; /*top right bottom left*/
}
* html .advertising {
    left: 0px;
}
div.advertising {
    position: relative; 
    float: right;
    width: 150px;
    height: 168px;
    left: -2px; 
    padding-right: 5px;
    padding-left: 0px;
    padding-bottom: 0px;
    text-align: left;
    padding-top: 12px;
    background-color: #fff;
}
.memreg2 {
    position: relative; 
    float: left; 
    width: auto; 
    height: auto; 
    background-color: #fff;
    overflow: hidden;
    text-align: center;
    z-index: 10;
    padding-bottom: 0px;
    padding-top: 12px;
    padding-left: 12px;
    text-align: center;
}
li {
    padding-bottom: 8px;
}
div.buttonreg {
    text-align: center;
    vertical-align:bottom;
}
#faq {
    position : relative;
    top: 0px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 20px;
    text-align: justify;
    text-align:center;
}
* html #sales {
    margin-left: 0px;
}
#sales {
    position: relative; 
    float: left; 
    margin-left: 2px;
    width: 297px; 
    height: 367px; 
    background-color: #666666;
    z-index: 6;
    text-align: center;
    color: #fff;
}
#joining {
    position: relative; 
    float: left; 
    margin-left: 2px;
    width: 297px; 
    height: 535px; 
    background-color: #666666;
    z-index: 6;
    text-align: center;
    color: #fff;
    overflow: auto;
}
#control_panel {
    position: relative; 
    float: left; 
    margin-left: 2px;
    width: 297px; 
    height: 480px;
    background-color: #666666;
    z-index: 6;
    text-align: center;
    color: #fff;
    overflow: auto;
}
#minimnu {
    position : relative;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    text-align: left;
}
#focusContainer {
    width: 190px;
    margin: auto;
    background-color: #71707f;
    padding: 17px 17px 10px 10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}
#focusContainer a {
    display:block;
    background-color: #383737;
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    border: 1px solid #000000;
    width: 100%;
    margin-bottom: 5px;
    font-weight: 400;
}
#focusContainer a:hover {
    background-color: #ffa500;
    color: blue;
}
#m1 a, #m2 a, #m3 a,#m4 a {
    padding-left: 10px;
    color: #fff;
    width: 100%;
    background-color:#5d5d5d;
    margin-top: -5px;
    padding-top: 5px;
    padding-left: 5px;
    border: 1px solid #000000;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.span {
    padding-left: 10px;
    color: #fff;
    width: 150px;
    background-color:#5d5d5d;
    margin-top: -5px;
    padding-top: 15px;
    border: 1px solid #000000;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
a#selected, a#selected:hover {
    background: #ffa500;
    color: blue;
}
a.newshead  {
    text-decoration: underline;
}
#leftside {
    position: relative;
    float: left;
}
.rbsworldpay {
    position: relative;
    display: block;
    width = 100%;
    text-align: center;
    margin-left: 2px;
}
#clubinfo {
    position: relative; 
    float: left; 
    width: 225px; 
    height: 120px; 
    background-color: blue;
    overflow: hidden;
    color: #000000;
    text-align: center;
    z-index: 11;
    text-align: left;
    padding-left: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
}
#meminfo {
    position: relative; 
    float: left; 
    width: 225px; 
    height: 120px; 
    background-color: yellow;
    overflow: hidden;
    color: #000000;
    text-align: center;
    z-index: 11;
    text-align: left;
    padding-left: 10px;
    padding-right: 0px;
    padding-bottom: 10px
}
.moreinfo {
    float: right;
    padding-right: 10px;
    padding-top: 10px;
}
#bottomlink {
    color: #0d7acf;
    height: 48px;
    padding: 0px;
}
a.club_details {
    color: blue;
    padding-top: 20px;
    padding-left: 20px;
    font-size: 12pt;
    text-decoration: underline;
    text-align: center;
}

Ответы [ 5 ]

4 голосов
/ 21 июля 2009

В ответ на единственный вопрос в вашем посте
«Есть ли кто-нибудь, кто мог бы помочь?»

Да.

2 голосов
/ 21 июля 2009

Убедитесь, что ваш HTML имеет DOCTYPE, чтобы активировать стандартный режим IE6. Это, вероятно, устранит большую часть CSS-сумасшествия (и, возможно, внесет некоторые другие сумасшествия, но их будет меньше, и это произойдет во всех браузерах).

1 голос
/ 21 июля 2009

Чтобы избежать проблем с другим поведением браузера, я рекомендую вам использовать сброс CCS.

Эрик Мейер хорошо объясняет и предлагает бесплатный пример на meyerweb . Это не решит всех ваших проблем, но, безусловно, будет хорошим началом.

0 голосов
/ 21 июля 2009

Я бы больше не беспокоился о совместимости с IE6.

0 голосов
/ 21 июля 2009

Пара вещей, которые я увидел сразу.

У вас не установлен размер шрифта для h2 в div #sales, и IE использует больший размер шрифта. IE6 использует ширину и высоту в качестве предложений и будет расширять div, чтобы соответствовать содержанию.

Ваш .box335in имеет ширину 220px, однако ваш .member_title div имеет ширину 220px плюс правый отступ 40px для общей ширины 260px. И снова IE6 расширяет .box335in, чтобы соответствовать более широкой ширине.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...