DreamweaverでCSSを使用し、画像を固定する方法。ブラウザによって違う？

質問

DreamweaverでCSSを使用し、画像を固定したのですが、『internet Explorer』では、きっちり画面に対して一枚で表示されたんですが、
『safari』では何枚もつながって表示されます。
『Fire fox』では、ボタンが表示されず、ボタンの中の文字だけがが縦に並んでいます。
使用したCSSです↓
『<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
body {
background-color: #669966;
background-image:url(top-wall.gif);
background-attachment: fixed;
background-position: center
}
-->
</style>』

ブラウザに合わせて何種類も作成するのでしょうか？
初心者のためわかりやすく教えて下さい。お願いします。

回答No.3

eg_nn · ベストアンサー

<table>　と　<th>の幅指定がいけないようです。
<table width="700"　→　<table width="750"
<th width="***"　→　<th width="150"
にするだけで綺麗に並ぶはずです。
※150は画像の幅です。

＞ボタンが表示されず、ボタンの中の文字だけが...
というのは、単純に画像が読み込まれていなく、altが表示されているのだと思います。
画像までのパスは合っていますか？
それから画像のファイル名が半角英数になっていないのはいけません。
ロールオーバー時の画像を含め、ファイル名は半角英数にしてください。

また、HTMLの基礎を学ぶと良いと思いますよ。
間違ったHTMLの解説本やサイトがたくさんあるので混乱するかもしれませんが、OKWave(教えてgoo)内で紹介されているものなら大丈夫かなと思います。
「HTML　サイト」、「HTML　本」でサイト内を検索すると評価も合わせてたくさん出てきます。

お礼

何度も詳しく教えていただいてありがとうございました。
HTMLの本はもっているのですが、内容があまり良くないようです…。
もっと活用できる本もこちらでさがしてみようと思います。

回答No.2

eg_nn

Firefoxでだけボタン周辺がくずれている件ですが、コードを見てみないとちょっとわかりませんね。。。
ボタンまわりのHTMLと指定したCSSを教えていただけますか？

補足

何度もすみません。
ボタンはテーブルの中に横に5こ入れてあるだけなんです。
暇なときでいいので見ていただけると助かります。
webスクールに通っていただけなので、現在はまわりに聞ける人もいなくて頼ってしまい、申し訳ありません。

<table width="700" height="210" border="0" align="center">
<tr>
<th width="770" height="50" scope="col"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','_ホーム.gif',1)"><img src="ホーム.gif" alt="home" name="Image1" width="150" height="31" border="0"></a></th>
<th width="400" scope="col"><a href="menu.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','_お品書き.gif',1)"><img src="お品書き.gif" alt="menu" name="Image2" width="150" height="31" border="0"></a></th>
<th width="150" scope="col"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','_店内.gif',1)"><img src="店内.gif" alt="店内" name="Image3" width="150" height="31" border="0"></a></th>
<th scope="col"><a href="map.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','_地図.gif',1)"><img src="地図.gif" alt="map" name="Image4" width="150" height="31" border="0"></a></th>
<th scope="col"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','_ご慶弔.gif',1)"><img src="ご慶弔.gif" alt="ご慶弔のご案内" name="Image5" width="150" height="31" border="0"></a></th>
</tr>

回答No.1

eg_nn

以下のコードを試してみてください。
たいていのブラウザで「背景画像真ん中固定」ができると思います。

<style type="text/css">
<!--
body {
background:url(top-wall.gif) no-repeat #669966 fixed center;
}
-->
</style>

背景をリピートさせたくない場合は「no-repeat」を指定します。(これはFirefoxでもIEでも同じなので、質問者さんのコードですとIEでも一枚ではなかったと思うのですが。。)
また、「background:」の中に半角スペースを入れて複数指定すれば上記のように1行で書くことができます。

ところで
＞『Fire fox』では、ボタンが表示されず、ボタンの中の文字だけがが縦に並んでいます。
とのことですが、ボタンとはHTMLに書いてあるものですか？

補足

分かりやすい回答ありがとうございます。
初心者でまだ分からない事だらけです…。

>ところで
＞『Fire fox』では、ボタンが表示されず、ボタンの中の文字だけがが縦に並んでいます。
とのことですが、ボタンとはHTMLに書いてあるものですか？

ボタンはFireworksで作成したものです。
それをDreamweaverでロールオーバー時などの設定をしています。
なぜFirefoxの時だけおかしくなるのかわかりません。
詳しく言うと[メニュー]というボタンが、Firefoxでは縦に文字だけある感じです。