CSSテクニックコミュのどなたか力をおかしください！

左（Firefox）　右（IE）

コンテンツをセンタリングしたサイトなのですが、
フッターでテキスト表示した位置にcopyrightの画像を持っていきたいのです。

IE、Firefoxともテキストはちゃんと指定した位置にくるのに、Firefoxの画像だけが置いてけぼりになります。（左上にはずれてる）

逆にFirefoxに合わせようとすると、IEはテキスト・画像ともセンタリングされなくなります。（背景の画像はセンタリングされるのに）

display: blockとか置いてみてもダメです。
ハックとかも試してみたんですが、なぜだかフッターの部分においては効果がありません。

これはいったい何が原因なんでしょうか･･･

ちなみに他のブラウザはFirefoxと同様の表示です。

以下cssです。

* {
margin: 0;
padding: 0;
}

body {
font-size: 80%;
font-family: Verdana;
color: #000000;
background:#CCCCCC url(../images/bg_header.gif) repeat-x;
width: 767px;
margin: 0px auto ;
text-align: center;
}

#container {
margin: 0;
padding: 0;
text-align: left;
}

#pagebody {
float: left;
width: 767px;
margin: 0px;
background: url(../images/bg_pagebody.gif) repeat-y;
}

#main {
float: right;
width: 593px;
}

#wallpaper {
margin: 10px 0 0 0;
padding: 0;
width: 593px;
background: url(../images/paper_bg.gif) repeat-y;
}

#wallpaper_head {
margin: 0;
padding: 0;
width: 564px;
height: 46px;
background: url(../images/wallpaper.gif) no-repeat;
}

#wallpaper_head h3{
margin-top: 15px;
_margin-left: 30px;
width: 504px;
height: 30px;
text-indent: -9999px;
background: url(../images/rec_title.gif) no-repeat;
}

div#wallpaper_head >h3 {
position: relative;
top: 15px;
left: 30px;
}

#recommend table {
margin-top: 2px;
margin-left: 70px;
margin-bottom: 5px;
width: 423px;
text-align: center;
}

#recommend th {
width: 141px;
}

#recommend td {
width: 141px;
padding: 0px 5px 0px;
text-align: left;
}

#footer {
clear: both;
width: 767px;
height: 121px;
background: url(../images/footer.gif) no-repeat;
}

#copyright {
display: block;
_margin-top: 40px;
_margin-left: 430px;
width: 305px;
height: 16px;

background: url(../images/copyright.gif) no-repeat;
}

div#copyright >a {
position: relative;
top: 40px;
left: 410px;
}

長くなってしまいました。申し訳ありません･･･

コメント(11)

最初
全て
最新の40件

[1] mixiユーザー 11月25日 09:17

ざっと見ただけですが。

>_margin-top: 40px;
>_margin-left: 430px;

ここでハックしているから、Firefoxでは左に置き去りにされるだけでは？

HTML部がないと、なんとも…。

[2] mixiユーザー 11月25日 09:55

なんでcopyrightが背景なんでしょうか？
copyrightって普通にコンテンツの一部だと思うんですが？
imgで貼り付けてブロック要素にするなりして位置調整すればいいんじゃないでしょうかね

たぶん
#copyright {
position:relative;
display: block;
top: 40px;
left: 430px;
width: 305px;
height: 16px;

・・・・
}

こうすると直ります

[6] mixiユーザー 11月25日 11:45

サトスィさん、こんにちは。
htmlソース公開時は、Doctypeも公開したほうがいいと思います。

[7] mixiユーザー 11月25日 11:50

firefoxとIEの両対応にするときのレイアウトは
width hight padding margin
の値の同時指定とIEのブロック内容によるブロックの拡大に注意することですかね

あとDOCTYPE

[9] mixiユーザー 11月25日 14:41

>一つ一つのブロックに対し、各々 width height padding margin の値をきちんと設定していけばよいのかな･･･

逆です。
各属性を同時に指定しない
という方です。

参考↓
ttp://mb.blog7.fc2.com/blog-entry-83.html

[11] mixiユーザー 11月25日 16:03

すろさん　フォローどうもｗ

ログインすると、みんなのコメントがもっと見れるよ