- ベストアンサー
IE７とfirefox2.0でcssによってテーブルのセルの背景の表示がfirefoxで表示されないことについて。
cssを外部リンクで td.1-cell{ width:200px; background:#F8F8F8; } と記述し、 <td class=1-cell> で呼び出したところ、IE７では正確に表示されているのに対して、 firefoxで背景の色が表示されず無色となってしまいます。 どうすればfirefoxとIE両方で表示できるのでしょうか。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
> firefoxでは数字から始まるclass名は認識してくれないみたいですね。 HTMLの企画としてIDやclassを数字から始めたらいけないので、Geckoは規格非準拠のものを無視している。それだけのことです。 あと、全角スペースも抜いたほうがいいですよ。正常表示されない場合があります^^;
お礼
ありがとうございます！！ まだまだ勉強不足のようです（><） 全角スペース使わないようにします！
関連するQ&A
- Firefoxでテーブルの背景画像が表示されない
下記のようにテーブルに背景画像を表示させたいのですが、 なぜかFirefoxだけ背景画像が表示されません。(WindowsXP,Firefoxは最新版(1.5.0.7)です) IE,OPERA(ともに最新版)では表示されます。 いろいろと検索したのですが同様の相談は見つからず、自分が根本的にミスをしているのだと思いますが、どうしていいのかわからずに相談した次第です。 .tab{width:502px;margin-bottom:20px;} .01{background:url(img/title.gif) top no-repeat;width:502px;height:32px;padding:0px 0px 4px 20px;} .02{background:url(img/com_top.gif); width:502px;height:10px;} .03{background:url(img/com_middle.gif); width:502px;padding:5px 20px 5px 20px;} .04{background:url(img/com_bottom.gif); width:502px;height:10px;} <table cellpadding="0" cellspacing="0" class="tab"> <tr><td class="01">タイトル</td></tr> <tr><td class="02"></td></tr><tr><td class="03"> サンプルテキストサンプルテキストサンプルテキスト </td></tr><tr><td class="04"></td></tr></table> http://www.isonly.net/~second_blue/n/ ↑実際のページです。 汚いHTMLで申し訳ないのですが、解決方法をご存じの方、ご教示下さい。 よろしくお願いします。
- ベストアンサー
- ブラウザ
- CSSでIEとFirefoxでの表示の違い
IE6とFirefox2.0で試しています。 次のように、naviでborderを使うとIE6では普通に表示されるのですが、 Firefoxだと右側にborderのサイズの2倍分くらいはみ出てしまいます・・・ 両方に正常（希望通り）に表示されるようにするには どのような記述にすれば良いのでしょうか？ 「sample.css」 .wrapper { background-color: #ccffcc; margin: auto; width: 600px; height: 100%; } .navi { background-color: #aaffaa; border: 3px solid #ff4500; width: 600px; height: 150px; position: relative; } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="wrapper"> <div class="navi"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- FireFoxでテーブルの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>
- ベストアンサー
- HTML
- ie8のcssでcol要素のwidthがきかない
ie7でうまく表示しているソースで、先日ie8にアップグレードし表示を確認しましたら、セルの幅の設定がうまくいかず、すべてのセルの幅が同じ長さ(省略値?)になっていました。 いろいろと確認して行くと、どうもcol要素のcssのwidthが無視されているようでした。 cssはまだ勉強し始めたばかりで詳しくありません。cell11,cell12の中にwidthを指定すればwidthは有効のようです。 どなたか、どこを修正すれば直るか教えてください。ソースは以下の通りです。 ------------------------------------------- htmlのソース <table class="table2"> <col class="col41"> <col class="col42"> <col class="col51"> <col class="col52"> <col class="col41"> <col class="col42"> <col class="col51"> <col class="col52"> <tr> <th class="cell12" colspan="2" align="center" nowrap>３月</th> <th class="cell12" colspan="2" align="center" nowrap>４月</th> <th class="cell12" colspan="2" align="center" nowrap>５月</th> <th class="cell12" colspan="2" align="center" nowrap>６月</th> </tr> <tr> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> </tr> <tr> <td class="cell12" nowrap>100</td> <td class="cell12" nowrap>200,000</td> <td class="cell12" nowrap>50</td> <td class="cell12" nowrap>100,000</td> <td class="cell12" nowrap></td> <td class="cell12" nowrap></td> <td class="cell12" nowrap></td> <td class="cell12" nowrap></td> </tr> </table> ----------------------------------------- cssのソース .table2 { border : 0px solid black ; border-collapse: collapse ; margin: 0px; padding: 0px; } .col41 { /* 緑 各月 点数 */ text-align: right; width: 50px; background-color: #e0ffff ; } .col42 { /* 緑 各月 金額 */ text-align: right; width: 80px; background-color: #e0ffff ; } .col51 { /* 白 各月 点数 */ text-align: right; width: 50px; background-color: #ffffff ; } .col52 { /* 白 各月 金額 */ text-align: right; width: 80px; background-color: #ffffff ; } .cell11 { border-right : 1px solid silver ; border-bottom: 1px solid black ; } .cell12 { border-right : 1px solid silver ; border-bottom: 1px solid silver ; } よろしくお願いします。
- ベストアンサー
- CSS
- IEとFirefoxでの背景表示の違いについて （CSS）
いつもお世話になっています。 CSSで枠（text_area）を作り、その背景の中央に画像表示させたいと考えています。IEでは中央に表示されるのですが、Firefoxだとtext_areaではなく画面全体の中央に配置してしまい、text_areaには一部欠けた画像が表示されます。 #text_areaに指定した内容を.contentsに書き写しても同じ状態です。 改善策をアドバイスして頂けないでしょうか？ よろしくお願いいたします。 【html】 <body> <div class="contents"> <div id="text_area">あああああ・・・</div> </div> </body> 【css】 .contents{ width:760px; height:540px; margin:0px; margin-right:auto; margin-left:auto; padding:0px; border:0px; } #text_area { overflow:auto; width:600px; height:395px; margin-top:30px; margin-left:auto; margin-right:auto; background-image: url(haikei.gif);/* サイズ：456×392PX */ background-repeat: no-repeat; background-position:center; background-attachment:fixed; }
- ベストアンサー
- CSS
- IEでのテーブル表示について
こんにちは。 web作成初心者です。 今回ホームページ作成することになり，一から（テンプレートを使わずに）必死にもがいております。 いろいろ新たに知ることは多く，CSSの初期化は理解し実装しております。 そこで，今回ドロップダウンメニュー（CSS）の下に左に画像，右に文書を入れたいと思い， tableを入れてみたのですが…firefoxではきれいに表示されるのですが， IEでは表示されません（文字のみ表示）。 いろいろ調べてみても原因が不明です。 tdの中の border-width : 1px; を外せば枠線は表示されますが色が反映しません。 いろいろご教授よろしくお願いいたします。 ［HTML］ <table class="top" border="1"> <tbody><tr> <td>aaa</td> <td>bbb</td> </tr></tbody></table> ［CSS］ .top{ position : absolute; top : 122px; width : 792px; height: 200px; z-index : 1; } .top td { border-color : red; border-width : 1px; }
- ベストアンサー
- CSS
- IE6でのみCSSの背景が見えない
度々すみません。 CSSで見出しの設定をしているのですがなぜか<h2>見出し2の背景画像だけIE6で見えません。 Nescape,safari,firefoxでは問題ありません。 しかも他の見出しは同じ手順で作成、記述しているのに全て見えています。すごく不思議です。 記述は下記の通りです。 //-----css #main h2 { font-size: 9px; color: #FFFFFF; background:no-repeat; margin: 10px 0px; padding: 0px; height: 44px; width: 595px; font-size: 9px; color: #FFFFFF; height: 44px; width: 595px; margin: 8px 0px 0px; } .PROFILE { background:url(../image/ttitle_company.gif)} .COUNSUL { background:url(../image/ttitle_con.gif)} .PRODUCTS { background:url(../image/ttitle_products.gif)} .BACKGROUND { background:url(../image/ttitle_company.gif)} .CASESTUDY { background:url(../image/ttitle_case.gif)} //-----HTML <h2 class="PROFILE"><em>会社情報</em></h2> 的確なご意見以外にも何か疑われる事があれば教えて下さい。 よろしくお願い致します。
- ベストアンサー
- デザイナー・クリエイティブ職
- IEと同じようにFirefoxでもテーブルが表示されるには？
head内にスクロール非表示のタグを入れています。 http://aomi1111.sakura.ne.jp/temp/in/i106/index.htmlのような感じでノーフレームです。 IE7、IE6ではテーブルが画面の上から下まで表示されテーブル内でスクロールが出来ますが、Firefoxで見るとテーブルが画面下に飛び抜けてしまいテーブル内のスクロールが出ず、スクロール非表示にしてるので下が見れなくなってしまいます。上のサイトのように表示するにはどうすれば良いでしょうか？このテンプレートをノーフレームにしたいです。自分なりに(初心者です)いじくりすぎて原形がなくなりました。必要なさそうな(？)タグは載せていません。 ■CSS■ body,td,th{ font-size:70%; color:#444; font-family:Georgia,Verdana,Osaka,'MS P Gothic'; font-weight:normal; margin:0px;padding:0px; background:#fff url() repeat fixed; } body{text-align:center;} table{margin:auto;height:100%;} #table2{ filter:alpha(opacity=100); width:551px;height:100%; background:#fff; padding:0px 10px 0px 10px; overflow:auto; } #table3{ filter:alpha(opacity=90); background:#fff url() no-repeat; padding:0px; width:220px;height:100%; } ■top.html■ <head> <style type="text/css"> <!-- body{overflow:hidden;} --> </style> </head> <body> <★table cellspacing="0"> <tr><td> <div id="table2">左の本文</div> </td><td> <div id="table3">右メニュー</div> </td></tr> </table> </body> ★のtableを消してcssの#table内にfloat:left;margin-left:120px;等入れるとFirefoxでも表示されますが、その場合table2、table3を真ん中にこさせる方法が解りません。。。どなたか解る方がいましたらよろしくお願い致します。
- 締切済み
- HTML
- 背景画像表示について
CSSでbodyの中にbackground-image で背景を設定したのですが IE以外ではうつっていませんでした。 なので <div style="width : 1300px; height : 1000px; top : 1px; left : 2px;position : absolute; background-image: url(****.gif); z-index: 1; visibility : visible; " id="pagebody"> としてみましたらIEとGooglechromeはうつるようになりました。が、 firefoxではうつりませんでした。ここで疑問に思ったのが 基本なはずの背景画像にブラウザによって表示が異なるのか、と。 本を読んでもインターネットで調べてもそんなことはないとかいてありました。 僕の記述が間違っているとしか考えられません。 正しい記述を教えてください。 ちなみにCSSは外部内部両方ためしました。 htmlでbodyに背景指定もやってみました。でもやっぱりIEしかうつりませんでした
- ベストアンサー
- HTML
- IEと同じようにFireFoxで背景画像を表示する方法
初めて「教えて！goo」に質問を投稿いたします。 IEにて例えば <table width="300" cellspacing="0" border="0"> <TR> <td height="5" background="http://***/abc.gif"></td> </TR> </table> ※ acb.gif(横1px×縦5px) とした時、<td></td>内の表示はバーのようになるのですが、 FireFoxでは画像が折り返されて３重のバーのようになり表示されて しまいます。 FireFoxでも１つのバーのように見えるように表示するにはどのよう にスタイルシートを書けばよろしいでしょうか。 初歩的な質問で申し訳ございませんが、どうぞよろしくお願いします。
- ベストアンサー
- HTML
お礼
数字がいけなかったのですね^^; ありがとうございました！！