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

Webページを作っておりまして、FireFoxで表示を確認した際にボックスの背景が出ない問題が起こっており、
調べたりしても出てこず、1週間位頭を悩ませております。
どこがイタズラしてるか分からないので、CSS,HTML全てのせます
申し訳ありません。
CSSはこのように書いています

<!--
body {
background: url('./img/Background.png') repeat;
}

body {
scrollbar-face-color:#1B1D1D;
scrollbar-highlight-color:000000;
scrollbar-shadow-color:999999;
scrollbar-arrow-color:999999;
scrollbar-track-color:#2A2929;
scrollbar-3dlight-color:#A4A5A5;
scrollbar-darkshadow-color:#A4A5A5;
}

body {
font-size: 75%; /* IE */
}
html>/**/body {
font-size: 12px; /* Except IE */
}

body {
line-height : 130% ;
}

.box1{
width:750px;
margin-buttom:70px;
background-color:f0f0f0;
}

.box2 {
width:425px;
height:124px;
font-size:12px;
border:1px dashed #000000;
overflow:auto;
background-color:ffffff;
margin-right:15px;
margin-top:8px;
padding-left:10px;
padding-top:10px;
}
-->

そしてHTMLはこのようになっています

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>

<Meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<Meta http-equiv="Content-Script-Type" content="text/javascript">
<Meta http-equiv="Content-Style-Type" content="text/css">
<Meta name="GENERATOR" content="AmBuilder">

<link rel="StyleSheet" href="Style.css" type="text/css">

<link rel="stylesheet" type="text/css" href="http://wing2.jp/add/adv.css" /></head>
<body>

<div align="center">
<p class="box1">
<table width="750" border="0" cellspacing="0" cellpadding="0" summary="TitleTable">
<tr valign="top">
<td width="5"><img src="./img/TitleSpace-Left.png" width="5" height="41" alt="TitleSpace"></td>
<td width="183"><img src="./img/Title2.png" width="183" height="41" alt="Title"></td>
<td width="557"><img src="./img/TitleSpace.png" width="557" height="41" alt="Title" ></td>
<td width="5"><img src="./img/TitleSpace-Right.png" width="5" height="41" alt="TitleSpace"></td></tr>
</table>

<table width="750" border="0" cellspacing="0" cellpadding="0" summary="MenuTable">
<tr valign="top">
<td width="33"><a href="index.htm" target="_self"><img src="./img/HomeIcon.png" width="33" height="25" border="0" alt="ReturnHome"></a></td>
<td width="57"><a href="about.htm" target="_self"><img src="./img/M-About.png" width="57" height="25" border="0" alt="About"></a></td>
<td width="56"><a href="movie.htm" target="_self"><img src="./img/M-Movie.png" width="56" height="25" border="0" alt="Movie"></a></td>
<td width="46"><a href="link.htm" target="_self"><img src="./img/M-Link.png" width="46" height="25" border="0" alt="Link"></a></td>
<td width="557"><img src="./img/M-Space.png" width="557" height="25" border="0" alt="Space"></td>
<td width="1"><img src="./img/M-Right.png" width="1" height="25" border="0" alt="MenuLine"></td>
</tr>
</table>

<table style="float:right">
<tr align="left">
<td>
<p class="box2">
◇ 更新履歴
</td>
</p>
</tr>
</table>

</p>
</div>
</body>
</html>

前回も同じような下らない質問をしてしまったのですが。今回も皆さんよろしくお願い致します。
長文、駄文すみませんでした

一応、サイトのURIです
http://wing2.jp/~movie_village/

このQ&Aに関連する最新のQ&A

A 回答 (2件)

こんにちは



とりあえずソースを見た感じ思いつくのはこんなところだと思います(^^)

background-image: url('./img/Background.png');(表示は同じなのでどちらでも?)
scrollbar-highlight-color:#000000;(#抜け)
scrollbar-shadow-color:#999999;(#抜け)
scrollbar-arrow-color:#999999;(#抜け)
(scrollbar関係はIE専用(一応報告))
margin-bottom:70px; (.box1内)
background-color:#f0f0f0; (.box1内)
background-color:#ffffff;(.box2内)
</p></td>(更新履歴の後)
<div style="clear:both;"></div>(floatを使用しているので更新履歴用のtableの</table>の後に付け足す)

<p class="box1">~</p>ではなく
<div class="box1">~</div>
に変更して試してみてください
    • good
    • 0
この回答へのお礼

今回も回答してくださって有難う御座います。
言われた通りにやったら見事に出来ました。
本当に有難うございました。

お礼日時:2007/09/17 11:27

はい。

FirefoxをFireFoxと書かない!WikipediaをWikiって略さない!…が私の挨拶です(ぉ
http://www.mozilla-japan.org/support/firefox/faq …

ぱっと見ただけじゃ何なのかよく分かりませんがヒント。FirefoxのエラーコンソールはCSSのエラーを検出してくれます。
ここに出たエラーをひとつずつ直していけばいつかは正常表示…となる可能性が高いでしょう。あぁ、scrollbar-xxxxxx-colorも「IE独自です」っていう理由から不明プロパティとしてエラー吐かれるけど。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
"Firefox"にはそんな機能があったんですね。
普段使わないからわかりませんでした。
チェックした所スクロールバーの以外エラーは出ませんでした。

お礼日時:2007/09/17 11:36

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QFirefoxでbackground-imageが上手く表示されない。

Firefoxでbackground-imageの画像が文字の部分しか表示されません。
(IEでは表示されます。)

http://hptoolbox.tm.land.to/
のトップメニューです。

スタイルシートのソースは以下の通りです。
=========================================
A.tab:Link,A.tab:Visited{
color : #336699;
text-decoration:none;
width : 124px;
height : 25px;
background-image : url(../images/tab1.gif);
background-repeat: norepeat;
background-position: left;
text-align:center;
font-size: 12px;
margin-left:2px;
padding-top:5px;}

a.tab:hover{
background-image : url(../images/tab2.gif);
background-repeat: norepeat;
background-color:transparent;
}
=========================================

HTMLは以下の通りです。
=========================================
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="124" height="25" align="center"><a class="tab" href="index.php">トップ</a></td>
<td width="124" height="25" align="center"><a class="tab" href="cgi-bin/ps/ps_user.cgi?act=reg1">サイトの登録</a></td>
td width="124" height="25" align="center"><a class="tab" href="cgi-bin/ps/ps_search.cgi?act=new">新着サイト</a></td>
<td width="124" height="25" align="center"><a class="tab" href="cgi-bin/ps/ps_search.cgi?act=rank">アクセスランキング</a></td>
<td width="124" height="25" align="center"><a class="tab" href="cgi-bin/ps/ps_search.cgi?act=plink">パーソナル</a></td>
<td width="124" height="25" align="center"><a class="tab" href="link.html">リンク</a></td>
<td width="124" height="25" align="center"><a class="tab" href="contact.html">お問い合わせ</a></td>
</tr></table>
=========================================

どなたか原因を教えて頂けないでしょうか。
宜しくお願い致します。

Firefoxでbackground-imageの画像が文字の部分しか表示されません。
(IEでは表示されます。)

http://hptoolbox.tm.land.to/
のトップメニューです。

スタイルシートのソースは以下の通りです。
=========================================
A.tab:Link,A.tab:Visited{
color : #336699;
text-decoration:none;
width : 124px;
height : 25px;
background-image : url(../images/tab1.gif);
background-repeat: norepeat;
background-position: left;
text-align:center;
font-size: 12px;
ma...続きを読む

Aベストアンサー

インライン要素にwidthやheightを指定することは出来ません。
http://www.mozilla.gr.jp/standards/webtips/webtips0030.html

どうしてもwidthやheightをCSSで指定したければdisplay:block;でブロック要素化したものをfloat:left;で並べていくことになると思います。

それとwidth:100%;に関してひとつ。指定した場所によってはIEとFirefoxで表示幅の算出方法が変わり表示の変化するケースがあります。
最悪横スクロールバーです。覚えておくといいでしょう。

Operaなども加えた複数のブラウザで表示確認をしつつ、HTMLやCSSのソースをウェブ標準で書くように心がければ問題は回避できるようになると思います。
http://jp.opera.com/

http://openlab.ring.gr.jp/k16/htmllint/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

インライン要素にwidthやheightを指定することは出来ません。
http://www.mozilla.gr.jp/standards/webtips/webtips0030.html

どうしてもwidthやheightをCSSで指定したければdisplay:block;でブロック要素化したものをfloat:left;で並べていくことになると思います。

それとwidth:100%;に関してひとつ。指定した場所によってはIEとFirefoxで表示幅の算出方法が変わり表示の変化するケースがあります。
最悪横スクロールバーです。覚えておくといいでしょう。

Operaなども加えた複数のブラウザで表示確...続きを読む

Qfirefoxで部分的に背景色が反映されない。

またまたCSS関連の質問です。

body直下に全体を包括するブロックの<div id="container">を設定し、containerの中に3段組(左中央右の3カラム)でレイアウトを組んでいます。

widthはbodyが100%指定、containerは80%指定でセンタリングしてあります。

質問なんですが、
・bodyのbackground-imageに画像を指定し、
・containerのbackground-colorに#ffffffを指定しており、
・3カラムそれぞれの表示要素(コンテンツテキストとか)は、中央が一番縦に長く、左と右はメニュー程度なので下半分くらいが空白になっている状況です。
・その際、firefox上では、左/右カラムの背景色が、要素がある部分(テキストで埋まってしまっている部分)までは#ffffffとなっているのですが、そこから下(空白部分)がbodyの背景イメージを透過してしまっているのです。

本来なら、bodyに指定した背景イメージは、container幅の80%には表示されない筈なのですが。。。

ちなみに、IE6だと、計算通り左・右カラムとも、一番下部までちゃんと背景色が#ffffffとなっており、できればfirefoxでも同様のデザインを実現したいのですが、ご助言頂けますでしょうか?

なかなか説明が難しく、分かりにくい文章になってしまってすみませんが、よろしくお願いします。

またまたCSS関連の質問です。

body直下に全体を包括するブロックの<div id="container">を設定し、containerの中に3段組(左中央右の3カラム)でレイアウトを組んでいます。

widthはbodyが100%指定、containerは80%指定でセンタリングしてあります。

質問なんですが、
・bodyのbackground-imageに画像を指定し、
・containerのbackground-colorに#ffffffを指定しており、
・3カラムそれぞれの表示要素(コンテンツテキストとか)は、中央が一番縦に長く、左と右はメニュー程度なので下半分くらいが空...続きを読む

Aベストアンサー

フロートされているボックスな子要素の高さは親要素に影響を与え
ないのが正しいので、フロートしたボックスだけ並べていると、
containerの高さは0になるはずです。CSSの規格書では、9.5あたり
に書いてあります。IEの挙動は間違い。

で、clearすればフロートしている要素の下まで伸びるので、footer
要素を付けるか、最後に無意味にBRするか、

#container:after {
 clear: both;
 content: "";
 display: block;
 }

とcontainer要素のケツで強制clearするかで、ウマくいきます。

QFireFoxでテーブルのbackgroundが表示されない

テーブルレイアウトで、IEでは正しく表示されているbackgroundカラーがFireFoxでは表示されません。
文字が見えなくなってしまい大変困っています。
CSS初挑戦だったので、そもそもコードが正しくないのかも知れません。調べたのですが解決策がわかりません。
どなたかご存知の方いらっしゃいましたらよろしくお願いいたします。
下記コードです。

/*CSS*/
TABLE.SAMPLE {
table-layout: fixed;
width: 500px;
background:"#FFFFCC";
}

td.td_hd {
background:"#000066";
color:Silver;
font-size: 12pt;
}

/*HTML*/
<table class=SAMPLE>
<tr>
<td class=td_hd>ヘッダタイトル</td>
</tr>
<tr>
<td>あああああああああああああああああああああああああああああ</td>
</tr>

</table>

テーブルレイアウトで、IEでは正しく表示されているbackgroundカラーがFireFoxでは表示されません。
文字が見えなくなってしまい大変困っています。
CSS初挑戦だったので、そもそもコードが正しくないのかも知れません。調べたのですが解決策がわかりません。
どなたかご存知の方いらっしゃいましたらよろしくお願いいたします。
下記コードです。

/*CSS*/
TABLE.SAMPLE {
table-layout: fixed;
width: 500px;
background:"#FFFFCC";
}

td.td_hd {
background:"#000066";
color:Silver...続きを読む

Aベストアンサー

カラーコードは"で囲む必要は無いかと

TABLE.SAMPLE {
table-layout: fixed;
width: 500px;
background:#FFFFCC;
}

td.td_hd {
background:#000066;
color:Silver;
font-size: 12pt;
}

でどうでしょう。

Q比率の計算

比率の計算方法を教えて頂きたいのですが、例えば・・・男女の比率を6対4として、6が50人だった場合、4は何人になるのでしょうか?
出来れば比率自体の簡単な計算式も教えて頂ければ嬉しいです。

Aベストアンサー

要するに
50×4/6
をすればいいのです。

4は6より小さい。求めてる方が比べてるほうより大きいか小さいかを考えて、大きいなら大きいほうを分子に、小さいほうを分母にかけてしまえばいいのです。
今回なら50×6/4にしたら75になって女のほうが多くなってしまいますよね。それはおかしい。そしたら「逆だっ」て気付いて50×4/6にするのです。

Qfirefoxで表示される画像がIEで表示されない

同じHTML内に
<img src="images/9.jpg" alt=""商品画像 />

<img src="images/title_1.gif" />
がありますが
firefoxでは上記の画像を含めすべての画像が表示されますが
IEでは
<img src="images/title_1.gif" />は表示されるが
<img src="images/9.jpg" alt=""商品画像 />は
表示されません。
なぜか判りません。
原因がまったくわかりません。
教えてください。よろしくお願いします。

Aベストアンサー

他のIEで表示できることを確認したjpg画像で試してみてください。
画像自体に問題がありそうです。
ダウンロードしてIEで開いてみてください。
jpegを保存するときCKYKで保存するとIEでは表示できないということを聞いた記憶があります。今回はそれではないようですが、とりあえず他のソフトで開いて保存しなおしてみてください。

Q外部ファイルにしたら文字化けしてしまいました

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://~";
jmp[1] = "http://~";
jmp[2] = "http://~";
jmp[3] = "http://~";
jmp[4] = "http://~";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "img/img1.jpg";
img[1] = "img/img2.jpg";
img[2] = "img/img3.jpg";
img[3] = "img/img4.jpg";
img[4] = "img/img5.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"' target='_blank'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先...続きを読む

Aベストアンサー

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

一般的に、Windowsの標準の環境だと。前段で述べた様な、様々な種類の文字コードを扱う事が出来ないので。事実上、作業は「Shift-JIS」1択と言う事になります。また『メモ帳(notepad.exe)』では「改行コード」を編集出来ないので、HTMLやJavaScript(JSファイル)を編集するには力不足です。何か特別なソフトとかを使わずに、Windows標準の『メモ帳(notepad.exe)』でJSファイルを編集したのであれば、十中八九、文字コードは「Shift-JIS」になっているはずです。


>文字コード
「文字コード」とは、コンピュータ上でテキストファイル(*.txt)をやり取りする時の方式の事で、現在では100種類近くの文字コードがあります。インターネット上でよく使われる文字コードは、「UTF-8」、「Shift-JIS」、「EUC-JP」~の3種類で、基本的にはこれだけ押さえておけばOKです。

考え方としては、日本語や英語のように。同じ意味を持つ文書でも色んな国の言葉で書く事が出来る様に。コンピュータ上での文書の表し方にも方言というか、色んな国の言葉がある様な物だと思ってて下さい。先に述べた「改行コード」や「BOM無し」とかは忘れて下さい。

で、初心者はコレだけ覚えて置いて欲しいのですが…

・半角英数文字だけなら文字化けは起きない

~と(実際は違いますが、話がややこしくなるので簡単にします)。半角英数文字ってのは「abc,?!#123456+-=」みたいな文字の事です。全角文字とは違うので注意して下さい(全角文字 → abc,?!#123456+-=)。従って逆説的に言えば「日本語を使う時は常に文字コードの影響を受ける」と言う事です。

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

...続きを読む

Qチェックボックスの背景色って指定できる??

<input type="checkbox"の背景色を灰色に
指定したいのですが、できますでしょうか?

チェック可能です。
IE3,IE4,IE5
Windows2000

Aベストアンサー

背景色とはチェックボックスの横に出る文字も含めての背景でしょうか?であれば以下の様なやり方ではいかがでしょうか?
(styleでwidth指定していますが、これがないと行全体に色が付いてしまいます。)

<div style="width:0;background-color:red;">
<input type="checkbox">test
</div>

Q拡張子 epsの開き方、どなたか教えて下さい!

拡張子EPSの開き方をどなたか教えていただけませんか? 開こうとすると、WEBサービスを使用して適切なプログラムを探す、もしくは一覧からプログラムを選択する、という項目がでますが、どうすればよいかわかりません。

全くの初心者なので、わかりやすく記載して頂ければすごく助かります。
宜しくお願い致します。

Aベストアンサー

少し本道から外れた回答を。私は会社でIllustratorでロゴ等のデザインをして(epsで保存)、それをWordやExcelに貼ったりして使うことが良くあります。

ファイルがロゴ等の小さいものであればWord,Excelで中身を見ることは可能です。
(やり方)
1.Word,Excelのツールバー「挿入」→「図」→「ファイルから」・・・と進み、ファイルを指定、「OK」

これでIllustratorで作ったロゴがWord,Excelに取り込むことが出来ます。もともとWord、ExcelはEPSを読める仕様になっていますのでとても便利です。

(注意)
気をつけて欲しいのがフォントが入っているファイルはどうも読めないようです。(今までの経験から)

フォントをIllustrator上でアウトライン化してフォントの属性を無くしてしまえば読み込み可能なんですが、フォントそのままが入っているとエラーが表示されます。

そのEPSファイルって何が書いてあるんでしょうか?文章がたくさん入っている内容でしたら本件のやり方では不可です。ロゴやデザインなどだったらきっとOKのはずです。

だめもとでやってみてはいかがでしょうか?

少し本道から外れた回答を。私は会社でIllustratorでロゴ等のデザインをして(epsで保存)、それをWordやExcelに貼ったりして使うことが良くあります。

ファイルがロゴ等の小さいものであればWord,Excelで中身を見ることは可能です。
(やり方)
1.Word,Excelのツールバー「挿入」→「図」→「ファイルから」・・・と進み、ファイルを指定、「OK」

これでIllustratorで作ったロゴがWord,Excelに取り込むことが出来ます。もともとWord、ExcelはEPSを読める仕様になっていますのでとても便利です。

(注...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。


人気Q&Aランキング