プロが教えるわが家の防犯対策術!

いくら頑張ってもずれます。。

どこを変更すればよいのでしょうか?

ご指導下さい。

CSSは以下です。

/******************************************/
body{/*全体的な設定*/
margin:0px; /*全体の余白*/
text-align:center;/*センタリングIEバグ回避用*/
background: url(04.jpg) left top repeat-x;/*全体の背景の設定*/
}

/******************************************/
a:link , a:visited , a:hover , a:active{ /*リンクフォントの設定*/
color: #a44; /*リンクの色*/
text-decoration: underline; /*リンク下線の設定。
}
/******************************************/

#baseBlock1{/*コンテンツ全体の設定*/
font-family:Verdana, "Tahoma,Arial,sans-serif,MS Pゴシック",MS UI Gothic, Osaka;/*フォントの設定*/
color:#aaa; /*文字色の設定*/
margin-left:auto; /*センタリングのための左の余白*/
margin-right:auto; /*センタリングのための右の余白*/
width:850px; /*コンテンツ全体の幅*/
text-align:left; /*IEセンタリングバグ回避用。*/
font-size: 0.82em; /*文字サイズ。
文字サイズはInternet Explorerの文字のサイズ-中、Firefoxの文字サイズ-標準サイズに合わせてあります。*/
}
/******************************************/
#title{/*タイトル部分*/
margin-left:10px;
width:1360px; /*タイトル部分の幅*/
height:200px; /*タイトル部分の高さ*/
background:url(01.jpg) no-repeat;/*タイトル部分の背景設定*/
border:1px solid #fff;/*枠線の設定*/
}

/******************************************/
h1{/*タイトル部分のフォント、文字位置の設定*/
font-size:1.3em;/*タイトル文字の大きさ 1emでbaseBlock1のfont-sizeと同じ大きさになります*/
color:#fff; /*タイトル文字の色*/
padding-top:80px;/*文字上側の余白*/
padding-left:50px;/*文字左側の余白*/
margin:0px; /*Firefoxでの余分な余白を削除*/
}

/******************************************/
h2{/*サブタイトル部分の設定*/
color:#fff;/*文字色*/
padding-left:50px;/*左に余白*/
padding-top:0px;/*上に余白*/
padding-right:50px;/*右に余白*/
font-size:1.0em;/*文字サイズ*/
margin:0px;/*余白の設定*/
font-weight:normal;/*文字の太さ*/
}
/******************************************/
#main{/*メインコンテンツ部分の位置設定*/
width: 1078;/*メインコンテンツの幅*/
float: none;/*メインコンテンツ位置設定*/
padding-top: 31px; /*文字上部の余白*/
padding-bottom:30px;/*フッターとの間隔*/
;padding-left: 226px;}
/******************************************/
#maintext{/*IEとfirefoxのズレ対策用*/
padding:30px;/*文字左側の余白。*/

}
/******************************************/
h3{/*見出しの設定*/
border-bottom:1px solid #acf;/*下に枠線*/
border-left:4px solid #acf;/*右に枠線*/
padding-left:4px;/*左に余白*/
font-size:1.1em;/*文字サイズ*/
font-weight:normal;/*文字の太さ*/}
/******************************************/
#menu{/*メニュー部分の設定。*/
width:219px; /*メニューの幅*/
float:left; /*メニュー位置設定*/
font-size:0.9em;/*メニューの文字サイズ*/
text-align:center;/*文字位置の設定
padding-top:30px;/*上に余白*/
}
/******************************************/
#me-top{/*メニュー上部画像用*/
height:34px;/*高さ*/
width:228px;
background:url(02t.jpg) no-repeat;/*背景の設定*/
}
/******************************************/
#me-mid{/*メニュー中部画像用*/
width:224px;
background:url(03.jpg) repeat-y;/*背景の設定*/}
/******************************************/
#me-bot{/*メニュー下部画像用*/
height:32px; /*高さ*/
width:228px;
background:url(04b.jpg) no-repeat;/*背景の設定*/}
/******************************************/
#menutext{/*IEとfirefoxのズレ対策用*/
padding-left:10px;/*左の余白設定*/

}
/******************************************/
.m-title{/*メニュータイトルの設定。*/
height:20px;     /*高さ*/
font-size:1.2em; /*テキストサイズ*/
border:1px solid #666; /*枠線の設定*/
color:#aaa; /*テキスト色*/
background:#fff url(05.jpg) no-repeat;
margin-top:0px; /*上部に余白*/
margin-left:10px;/*左に余白*/
margin-right:22px;/*右に余白*/
margin-bottom:5px;/*下に余白*/
}
/******************************************/

「CSS IEだけがずれます。」の質問画像

A 回答 (1件)

 DOCTYPEスイッチ - Google 検索 (

https://www.google.co.jp/search?q=DOCTYPE%E3%82% … )でIEが標準モードで動作すように、HTMLを見直してください。
 標準モードでは、ブロックのサイズはpadding辺の内側ですが、互換モードではborder辺になります。などなど・・・
 あわせて文法チェックで、DOCTYPEとHTMLの文法があっているかもチェックしておくと良いでしょう。


html,body{margin:0;padding:0;}
body{
font-family:Verdana, "Tahoma,Arial,sans-serif,MS Pゴシック",MS UI Gothic, Osaka;/*継承されるプロパティなのでここ*/
background: url(04.jpg) repeat-x;/*デフォルトで指定されているものは書かない*/
}

a:link{color:blue;}
a:visited{color:maroon;}
a:hover,a:focus{color:red;}
/* ユーザーインターフェースに関わる部分は手をつけないほうが良い*/

以下省略
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!