サイト全体のレイアウトが左によってしまいます．
firefoxで開いた場合は問題なくサイト全体のレイアウトが真ん中に表示されるのですが，IEだと全体が左に寄ってしまいます．
ソースコードはおおよそ以下の通りです
<index.php>から
<main.css>を読み込み
<main.css>から
<common.css>と<style1.css>を呼び出しています．
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
～index.php～
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<title>タイトル名</title>
</head>
<body>
<div id = "wrapper">
<div id="header">
<h1>
タイトル
</h1>
</div>
<div id="content">
<div id="main">
<h2>トップページ</h2>
<p>
本文<br />
</p>
</div>
</div>
</div>
</body>
～main.css～
@import "common.css";
@import "style1.css";
～common.css～
/*初期設定*/
*{
margin:0px;
padding:0px;
}
p{
margin:15px 0px;
}
ul{
margin-left: 30px;
}
form *{
padding:3px;
margin-top:5px;
}
h1 {
font-size: 2.4em; color: #ee1111;
line-height: 120%;
}
h2 {
font-size: 1.8em;
color: #5511ee;
margin: 10px 0px;
}
/*ラッパー*/
#wrapper{
margin: 0 auto;
width: 960px;
}
/*タイトル*/
#header{
width: 960px;
}
～style1.css～
/*メインスペース*/
#main{
width: 700px;
margin: 10px 5px;
margin-top: 10px;
padding: 0px 10px;
text-align: left;
float: left;
line-height: 1.5em;
}
#main h2{
width: 100%;
border-left: 8px solid #8888ee;
border-bottom: 1px solid #8888ee;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
このとき<div id = "wrapper">以下に記述されるサイト全体のレイアウトがfirefoxでは正常にページ中央に表示されるのですが，
IEでは左によっています．
<div id = "wrapper">の上に自動挿入される広告はIEでも問題無くページ中央に表示されているのですが…
DOCTYPE宣言も問題ないはずですし，wrapperの記述をアレコレ弄っているのですが，どうしても解決しません．
どうぞよろしくお願いいたします．
今IEが使えないので試してはいないのですが、
html,body{display:block;width:100%;}
などをCSSの最初の方に追加してみてはどうでしょう。*{}の下辺りに。
【補足に関して】
headに
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
を追加するなどをしてはどうでしょう。
あとは
2011-05-26 IE8で(も)中央寄せできない問題
http://d.hatena.ne.jp/akihito_s/20110526
IE6でCSSを使った中央寄せができない
http://blog.livedoor.jp/s_s11/archives/606259.html
CSS によるブロック要素の左右中央揃え
http://w3g.jp/webstandards/hack/css_block_control
ここら辺にあるようIEの一種のバグを利用して
body{text-align:center;}
を追加してみたはどうでしょう。
必要であれば、#wrapper{text-align:left;}も。
0 件のコメント:
コメントを投稿