FireFoxで背景画像を表示する方法
- FireFoxでは背景画像が折り返されて３重のバーのように表示されるため、１つのバーのように見えるようにするためのスタイルシートの書き方を教えてください。
- 初心者向けの質問ですが、FireFoxで背景画像をバーのように表示するためのスタイルシートの書き方を教えてください。
- FireFoxでの背景画像の表示方法について教えてください。
- ベストアンサー
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でも１つのバーのように見えるように表示するにはどのよう にスタイルシートを書けばよろしいでしょうか。 初歩的な質問で申し訳ございませんが、どうぞよろしくお願いします。
- congcong
- お礼率20% (1/5)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<td height="5" style="background:url(http://***/abc.gif) repeat-x"></td> さらに、idを指定してスタイルシートを外に出した方がいいです。
関連する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で申し訳ないのですが、解決方法をご存じの方、ご教示下さい。 よろしくお願いします。
- ベストアンサー
- ブラウザ
- テーブルを作ったんですが…
はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
- 画像のNetscapeでの表示
Netscapeで下記のようにテーブルを組むと画像の表示がされません。 IEではうまく表示してくれるのですが・・・。 <table border='0' cellspacing='0' cellpadding='0' width='100%' height='100%' style='position:absolute;bottom:0px;left:0px;'> <tr> <td><img src="xxx.gif"></td> </tr> </table> Netscapeで使用できないタグなどがふくまれているのでしょうか？ Netscapeのバージョンは、7.02です。
- 締切済み
- HTML
- FireFoxで背景が表示されない。
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/
- ベストアンサー
- CSS
- Mozillaで隙間を表示させなくするには？
以下のソースを見てください。 <table> <tr> <td bgcolor="red"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td><img src="1.gif"></td> <td><img src="2.gif" width="100%"></td> <td><img src="3.gif"></td></tr></tbody></table> <table class="side" style="border-left: 1px solid rgb(204, 204, 204); border-right: 1px solid rgb(204, 204, 204); border-bottom: 1px solid rgb(204, 204, 204);" border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td align="left" bgcolor="#ffffff"> メニュー </td> </tr></tbody></table> </td> </tr> </table> サイトの横に設置するメニューバーの作成を行っています。バックグラウンドの色は赤でメニュー欄内を白に変換しています。 IEではメニュー欄の周りの囲んでいる線との間に隙間ができずに表示されるのですがMozillaだと隙間が表示され隙間部分に赤色が表示されます。 Mozillaでも隙間を表示させないようにするにはどうしたらいいのでしょうか？
- ベストアンサー
- HTML
- css
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="a.gif" width="100" height="100" border="0" /></td> <td > <div class="ab">left</div> <p>説明文 </p> </td> </tr> </table> </td> <td width="20"></td> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="b.gif" width="100" height="100" border="0" /></td> <td> <div class="ab">right</div> <p>説明文 説明文 </p> </td> </tr> </table> </td> </tr> </table> .ab { border-bottom:1px solid #E3E3E3; padding-left:5px; margin: 0px 0px 10px 0px; テーブル内の文字数が変わると片方が上から下に下がってきます。両方上に揃えるには どうすればいいんでしょうか。よろしくお願いします。
- ベストアンサー
- CSS
- vbsでＩＥの操作
ｖｂｓでＩＥの自動操作を行おうとしているのですが，最後のボタンだけなぜか押せません． オブジェクトが存在しないとエラーになります． 下記は操作しようとしているところのソースです． <div id="layerPanelSessions" style="display:"> <table cellpadding="1" cellspacing="0" border="0" width="100%"> <tr> <td bgcolor="#CCCCCC"> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr bgcolor="#EEEEEE"> <td> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr valign="top"> <td> <table cellpadding="4" cellspacing="0" border="0" width="100%"> <tr valign="top"> <td><img src="/dana-cached/imgs/icn18x18SessionNC.gif" alt="ネットワークコネクト" width="18" height="18" border="0"></td> <td width="100%">ネットワークコネクト <br><span class="cssSmall">システム トレイに [ネットワーク コネクト] アイコンが表示されて「接続」となっていると、ネットワーク上でセキュアにアプリケーションにアクセスすることができます。<br> <br>そうでない場合はネットワーク コネクトの [セッションの開始] アイコンをクリックして接続します。</span> </td> </tr> </table> </td> <td align="right"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td colspan="6"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> <tr> <td bgcolor="#EEEEEE" nowrap ><img src="/dana-cached/imgs/space.gif" width="10" height="10"> <input name="btnNCStart" type="button" value="開始" onclick="self.location='/dana/nc/ncrun.cgi?launch_nc=1'; return false;"></td> <td><img src="/dana-cached/imgs/space.gif" width="5" height="1"></td> <td bgcolor="#CCCCCC"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> <td bgcolor="#EEEEEE"><img src="/dana-cached/imgs/btnPanelItemBlank.gif" alt="" width="20" height="20" border="0"></td> <td><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> </table> </td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td bgcolor="#CCCCCC"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td bgcolor="#CCCCCC"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </div> で，下記が操作用の私が作成したコードです． .Document.all("btnNCStart").Click 本当に困っています．どなたかよろしくお願いいたします．
- ベストアンサー
- Visual Basic
- IE以外のブラウザで隙間ができる
お世話になっております。 上テーブルと下テーブルを隙間なく配置したいのですがIE6,7以外のブラウザだと3pxくらいの隙間ができてしまいます。厚かましいお願いで恐縮ですが、下記タグをチェックしていただけないでしょうか…。 <table width="758" height="160" border="0" cellpadding="0" cellspacing="0" background="image/gazou.jpg" style="background-repeat:no-repeat"> <tr><td height="30"> </td></tr> <tr><td>ここに文字を入れています</td></tr> <tr><td height="30"> </td></tr> </table> <div class="test"><br> <table width="758" border="0" cellpadding="0" cellspacing="0"> <tr><td>ここも文字</td></tr> </table> </div> 上のテーブルには背景画像を指定しており、下テーブル部分に色をつけたいのでdivを使いCSSを適応させています。(デザイン上、下テーブル背景に色をつけるのではダメなので) これが問題なのかと思い、divタグを消してみたりしましたがだめでした。 div"test"のCSSは .test{ margin:0px; padding:0px; background-color:#333333; border-bottom:solid 1px #999999; width:758px; height:262px; } としています。 本当に厚かましいお願いで恐縮ですが、ご教授いただけるととても助かります。どうぞよろしくお願いします。
- ベストアンサー
- HTML
- IEのテーブル表示の不具合でしょうか・・・？
IEで正しく表示されているものが、別のページへ行って「戻る」ボタンを押すと、テーブルの表示が崩れてしまいます。 ２列のテーブルの右側の部分が左側にかぶって表示されてしまうのです。 参考までにその部分のソースを以下に記述します。 何か気になる点などお気づきになられたら教えてください。 <table width="320" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200"> <table width="200" border="0" cellspacing="0" cellpadding="5"> <tr> <td class="px12"> ・<a href=>あああああ</a><br> ・<a href=>いいいいい</a><br> ・<a href=>ううううう</a><br> <hr width="160" size="1" noshade align="left"> ・<a href=>えええええ</a><br> <hr width="160" size="1" noshade align="left"> ・<a href=>おおおおお</a><br> <hr width="160" size="1" noshade align="left"> </td> </tr> </table> </td> ※以下から左側のテキストにかぶって表示されてしまいます。 <td width="120"><a href=><img src="images/画像.gif" width="120" heigt="180" border="0"></a><br> <table width="120" border="0" cellspacing="2" cellpadding="0"> <tr> <td valign="top"><img src="images/矢印画像.gif" width="11" height="11" border="0"></td> <td class="px12"><a href=>テキストテキストテキスト</a></td> </tr> </table> </td> </tr> </table> 以下が私の環境です。 WindowsXP(HomeEdition)・SP2インストール済・IE6 よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- Firefoxで崩れる
IE6.0 IE7.0では、問題なく表示されるのですが、Firefoxで 一部のページが右にずれてしまうのです。 問題点を教えていただけますと幸いです。 正常なページのソース <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XXXXXXXXXXXXXXXXXXXXXサイト</title> <META HTTP-EQUIV="Imagetoolbar" CONTENT="no"> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <table width="758" border="0" cellpadding="0" cellspacing="0" class="table-base"> <tr> <td height="95" colspan="2"><table width="758" cellspacing="0" cellpadding="0"> <tr> <td width="213" rowspan="4"><a href="../index.html"><img src="../common/images/rogo.jpg" width="213" height="93" border="0" /></a></td> <td height="38"> </td> </tr> </table></td> </tr> <tr> <td height="31" colspan="2"><img src="images/" alt="blog" width="758" height="31" border="0" /></td> </tr> <tr> <td height="21" colspan="2" class="td-bar"> </td> </tr> <tr> <td width="556" height="111" valign="top"><table width="543" height="182" cellpadding="10" cellspacing="0" class="td-0e3758"> <tr> <td colspan="2" class="bottom-border0e3758"><strong>200X/XX/XX</strong></td> </tr> <tr> <td width="94" height="131"><img src="images/s_img.jpg" width="94" height="125" /></td> <td width="407" valign="top">テテキストテキスト</td> </tr> </table></td> ***************************** 崩れてしまう方 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XXXXXXXXXX</title> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <table width="758" border="0" cellpadding="0" cellspacing="0" class="table-base"> <tr> <td width="758" height="95"><table width="758" cellspacing="0" cellpadding="0"> <tr> <td rowspan="4"><a href="../index.html"><img src="../common/" width="213" height="93" border="0" /></a></td> <td height="38"> </td> </tr> </table></td> </tr> <tr> <td height="31" colspan="2" class="td-bar"><img src="images/blog-.gif" alt="blog" width="758" height="31" border="0" /></td> </tr> <tr> <td align="center"><table width="725" cellspacing="0" cellpadding="7"> <tr> <td colspan="2"> </td> </tr> <tr> <td width="37" align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td width="658" align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXXXXX</td> </tr> <tr> <td align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXX</td> </tr> <tr> <td align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXXXXXXXXXXXXXXXXX</td> </tr>
- 締切済み
- HTML
お礼
早速のご回答ありがとうございます。 すぐに試しましたところ問題なくできました。 またid指定でスタイルシートに外に出すことも問題なくできました。 ご丁寧にありがとうございました。感謝申し上げます。