IE6でのCSSの問題

私は周りを回っていて、このウェブサイトでほとんどウェブページを完成させました。私はいくつかの調査をしていて、CSSのパディングとマージンに問題があることを知り、役に立たなかった。助けることができる人がいるのですか？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; 
}

出典

2009-07-20 Anonymous

「赤いボックスに10pxのパディングを付けるにはどうすればよいですか？間違いなくこれ以上の答えを得るでしょう。がんばろう！ –

ここにコピー/ペーストするのではなく、そのような大きなテキストにハイパーリンクしてください。また、quirksmode.orgにアクセスしてください。 – annakata

正しいコードの書式設定を使用してもそれほど悪くはありません。それはスクロールボックスに入ります。 –

IE6の標準モードを起動するために、あなたのHTMLはDOCTYPEを持っていることを確認してください。それはCSSの狂気をたくさん取り除く（おそらく他の狂気を導入するかもしれないが、それは少なくなり、すべてのブラウザで起こるだろう）。

出典

2009-07-20 21:29:37 aem

私はDOCTYPEを追加しました。それはそれがそうであったようにそれほど悪くない理由だと思います。 –

あなたの投稿の唯一の質問に答えて
「誰か助けてくれる人がいますか？」

はい。

出典

2009-07-20 21:33:14 JohnFx

ありがとうございました！ –

すぐに見たことがいくつかあります。

divにh2のフォントサイズが設定されておらず、IEがより大きなフォントサイズを使用しています。 IE6は幅と高さを提案として使用し、コンテンツに合わせてdivを拡張します。

.box335inの幅は220pxですが、.member_title divの幅は220px、右側の埋め込み幅は40px、合計幅は260pxです。再びIE6は.box335inをより広い幅に合わせて拡張しています。

出典

2009-07-20 22:21:03 Emily

私はうまくいきましたが、あなたが与えた提案はおそらく、問題を解決するためにそこに置いたちょっとしたCSSコードを整理すると思います。ご協力いただきありがとうございます。 –

-2

私はもうIE6と互換性のあるものを作ることについて心配しません。

出典

2009-07-21 13:31:26 SoftwareDev

あなたはおそらく正しいかもしれませんが、テストするためにwebisteを友人に送ったときに私はちょうど打ち始めるところでした。彼らの大多数（IE6を使用していた）はIE6を使用していました。どのくらい他の人がそこにいるのだろうか？ –

ブラウザの動作が異なるため、CCSをリセットすることをおすすめします。

エリックマイヤーはよく説明し、無料の例をmeyerwebで提供しています。それはあなたの問題をすべて解決するわけではありませんが、確かに良いスタートになるでしょう。

出典

2009-07-21 13:53:36 Sjarel

これは、html> #containerを使用して問題を解決することができました。＃constainer最も優れたソリューションではありませんが、今のところ必要なものです！しかし、リセットへのリンクありがとう。 –

答えて

関連する問題