- ベストアンサー
Firefoxの挙動について
ごく普通のHTMLを作っておりますが、tableの中で画像を右寄せで表示させたとき<img src="hoge.jpg" align="right">に、Firefoxで表示させると画像の周りにテキストが周りこまず、画像の下の行からテキストが表示されます。 テーブルの中でなければきちんと周りこみます。 ちなみにMacのSafariでも同じ表示でしたがIEでは回り込んでいました。 回避する方法はないでしょうか。 それと、ソースで文字が長すぎて改行を入れた部分がFirefoxで見ると<br>がないのに改行されてしまいます。 これもこういう仕様なのでしょうか。 よろしくお願いします。
- umioyo
- お礼率78% (172/220)
- HTML
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<table border="0" cellspacing="2" cellpadding="1" width="580"> の処を <table border="0" cellspacing="2" cellpadding="1" width="750"> ぐらいにすれば、回り込むみたいですね。 なんとなく、FireFoxでは、切れ目のない長い文字列を１つの単語として扱っているような感じですね。 （つまり、これを表示するだけの幅がないので回り込めずに落ちてしまう） ＞<br>がないのに改行されてしまいます。 も改行が入っているところで折り返し可能と判断するからのような気がします。
その他の回答 (3)
- quads
- ベストアンサー率35% (90/257)
#3 BLUEPIXY さんの仰る通りかと思います。 ○という部分は、実際に"○"なのでしょうか。 文字によっても表示結果が異なりますので。 また、幅指定に於いて適切でない指定も見受けられます。 floatによる回り込みを利用したいのであれば構成しているテーブルの幅なども見直す必要があるかと思います。 リンク先が提示されていないので、画像等を表示できないため、ちゃんとした表示結果を検証できませんでしたが、テーブルを何重にも入れ子にするような構成でよいのであれば、floatを使わずにセルの位置で構成されるのもよいかと思います。 HTML的に推奨される形ではありませんが、セルごとに配置を振り当て、align及びpadding関連の指定をすればfloatよりも自由な回り込みを表現できます。 更に詳しく追求したい場合は、詳細のソースを提示するか、ページを提示していただく必要がありそうです。 見せられない部分があるのであれば、ご自身でご確認していただくようになるかと思います。 ところで、【HTML4.0】の定義をされている理由は何かあるのでしょうか。 問題はありませんが、HTML4.0よりは【HTML4.01】が推奨されています。
お礼
何度もご回答ありがとうございました。 floatは＃1の方の回答を元に修正したものでした。 HTML4.0の定義をしている理由は惰性です。 なんか一方でDTDの定義をしっかりし、一方でブラウザによって表示が異なる。 比べるものではないですけど、なんか矛盾が。。。
- quads
- ベストアンサー率35% (90/257)
widthプロパティ値には0以外単位が必須です。 また、imgタグにはsrc属性、alt属性が必須とされています。 で、こちらで試すのが面倒なので、出来ればページかソースを提示していただきたいのですが。 一応、DTDを何にしているかもお書きください。
補足
回答ありがとうございます。 お見せできないところもあるので、なるべく元の形を崩さないようにコピーします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <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"> <title></title> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <center> <table border="0" cellspacing="0" cellpadding="0" width="814"> <tr> <td background="./images/back.gif" align="center"> <table border="0" cellspacing="1" cellpadding="0" width="796" bgcolor="#000000"> <tr> <td> <!--body--> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td width="6" bgcolor="#0A318F"><img src="./images/spacer.gif" width="6" height="1"></td> <td align="left" valign="top" width="2"><img src="./images/spacer.gif" width="2" height="1"></td> <!--Left Menu--> <td width="175" valign="top" bgcolor="#ffffff"> メニューボタン </td> <td align="left" valign="top" width="1"><img src="./images/spacer.gif" width="2" height="1"></td> <td align="left" valign="top" width="1" bgcolor="#888888"><img src="./images/spacer.gif" width="1" height="1"></td> <td align="center" width="609" valign="top" bgcolor="#ffffff"><br> <table border="0" cellspacing="2" cellpadding="1" width="580"> <tr> <td valign="top" align="left"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr><td align="left" valign="top" style="width:609"><img src="./images/hoge.jpg" width="150" height="193" style="float:right"> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</td></tr> </table> </td> </tr> </table> </td></tr> </table> </td> </tr> </table> </td> </tr> </table> </center> </body> </html> よろしくお願いいたします。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
大きさをちゃんと指定してやれば良いみたいです。 例 <table> <tr><td style="width:200"><img src="gazou.gif" width="150" height="150" style="float:right">画像です。<br>文字は回り込みマス</td></tr> </table>
お礼
ありがとうございます。 試してみましたがまったく状況は変わりませんでした。 他の手段はないでしょうか。 よろしくお願いいたします。
関連するQ&A
- 画像とテキストのレイアウト
左に画像、その画像の右に複数行のテキストを、画像高さの中央に配置したいと思っています。 <table><tr><td><img></td> <td style="vertical-align:middle"> 文１<br> 文2<br> 文3<br> </td></tr></table> をテーブルを用いないでレイアウトしたいということです。 <img src="loc"> 文１<br> 文2<br> 文3<br> では、文１ のみが画像右に表示されます。 <img src="loc" style="float:left"> 文１<br> 文2<br> 文3<br> では、文全体が画像のtop位置から表示されます。 どのようにスタイルシートで指定すればいいのでしょうか？
- ベストアンサー
- HTML
- IE8とsafariでの表示、余白の違い
IE８では、きれいに表示されますが、Safariでは、表示が微妙に崩れます。画像２が少し内側に表示されます。 そこで、tableの幅を620から650などに広げる、またはhspace="7"を２などに狭くすると指定位置に表示されますが、どちらもIE８より画像の右側の余白が広くなります。 IE８とSafariでは、余白の捉え方が違うということは調べたんですが、初心者なので、なかなか上手にできません。 双方に対応するには、どのような方法がありますか？ アドバイスよろしくお願いいたします。 <table width="620" border="0" cellspacing="1" cellpadding="5"> <tr><td> <font size="3" color="DDFFFF">写真１</font></font><br /><br /> ひまわり<br /> １１１１１１１１１１１１１１１１１１１１<br/> <img src="http://画像1.jpg" height="310" width="300" border="0" alt="" hspace="7" vspace="5" align="left" /> <br /> <br /><br /> <br /><br /> <br /><br /> <br /> <font style="background:ff9900"> <font size="3" color="DDFFFF">写真２</font></font><br /><br /> あさがお<br /> １１１１１１１１１１１１１１１１１１１１<br/> <img src="http://画像2.jpg" height="303" width="300" hspace="8" vspace="7" align="right" /> <br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /> <font style="background:ff9900"> <font size="3" color="DDFFFF">写真３</font></font><br /><br /> マリーゴールド<br /> １１１１１１１１１１１１１１１１１１１１<br/> <img src="http://画像3.jpg" height="430" width="300" border="0" alt="" hspace="7" vspace="5" align="left" /> <br clear="all" /> <br /> <br />
- 締切済み
- HTML
- Firefoxで右寄せにならないのですが
テキストリンクに背景画像を挿入しています。 それをdisplay:blockにしたとたん、右寄せができなくなってしまいます。 <html> <p class="right"><a href="hellow">こんにちは</a></p> <css> p.right{ text-align : right; } p.right a{ background-image : (250px*30pxの画像です).gif); display : block; line-height : 30px; width : 250px; } display : blockを指定したときにFirefoxでは左寄せに戻ってしまいます。IEでは右寄せのままです。 Firefoxでも右寄せのままに表示したいのですが、どなたかアドバイスよろしくお願いします。
- ベストアンサー
- HTML
- IEとFirefoxの表示の違い
テーブルを使わずCSSで枠を作り、中に画像を入れてその右側に文章を表示させたいのですが、ブラウザによって表示が異なり困っています。 外部スタイルシートに以下を記載して、 body {width:600px;} .img{float:left;} div.box { border: 1px solid #000 ; padding:10px; margin:10px; } 以下のHTMLをブラウザで表示すると、枠が重なって表示されます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>test</title> </head> <body> <div class="box"> <h4>title</h4> <div class="img"> <img src="img1.gif" width="200" height="400" alt="img" /></div> text text text text text text<br /> </div> <div class="box"> <h4>title</h4> <div class="img"><img src="img1.gif" width="200" height="400" alt="img" /></div> text text text text text text<br /> </div> </body> </html> そこで、 スタイルシートのdiv.boxに height:100% ; を追加すると、IEでは画像の高さまで枠が広がりますが、Firefoxでは重なったままで変化しません。 画像の高さをpxで指定してやれば両方表示できますが、高さの設定を特にしないでIEとFirefoxで同じように表示する方法がありましたら教えてください。 よろしくお願いします。
- ベストアンサー
- CSS
- FireFoxにプロパティ"src"は存在しない？
指定された画像要素の"SRC"属性を書き換えて、 以下のような画像を変更するプログラムを書いています。 function hoge(ImgName){ document.getElementById("Picture").src=ImgName; } （中略） <img src="" id="Picture" onClick="JavaScript:hoge(hoge.jpg)"> ＩＥでは実行可能なのですが、FireFoxで実行すると 「document.getElementById("Picture") has no properties」 というエラーが出てしまいます。 setAttributeなども試したのですが同様のエラーが出てだめでした。 やはり指定プロパティ(src)が存在しないので駄目みたいです。 FireFox等でIMG要素のSRC属性を書き換えるにはどうすれば 良いでしょうか。アドバイスをお願いします。
- 締切済み
- JavaScript
- どのように記述すれば画像を分かたずに表示できるのでしょうか？
どのように記述すれば画像を分かたずに表示できるのでしょうか？ <HTML> <BORDER="0"> <IMG SRC="A_720x32.bmp"><BR> <IMG SRC="B_315x136.bmp" ALIGN=TOP><IMG SRC="C_250x199.bmp" ALIGN=TOP><IMG SRC="D_155x307.bmp"> <IMG SRC="E_315x171.bmp"><IMG SRC="F_250x108.bmp"><BR> <IMG SRC="A_720x32.bmp"> </HTML>
- ベストアンサー
- HTML
- CSS 画像横に改行があるテキストを高さ中央で
画像の右側にテキストを回り込ませ、 そのテキストを、高さ中央揃えにしたいのですが テキストに改行がある場合には どのようにしたら良いでしょうか？ テキストに改行があるために vertical-align:middle; を使うとテキストの<br>以下が画像下に回り込んでしまいます。 vertical-align:middle; を使うと、改行以下も画像の横に表示されますが、 上揃えとなってしまいます。 何かもっと違う方法が良い方法があれば教えてください。 お願いします。
- 締切済み
- CSS
- 文字とテーブルの間の間隔について
質問させていただきます。 以下のhtmlをフレームの左側として使っているのですが、 <center> <b><font size="5" color="pink" face="'Comic Sans MS'">文字</font></b><img src="画像" align="middle"><br /> <img src="ライン画像"><br /> </center> <table border="0" height="100%" width="260" align="center"> <tr><td align="left"><blockquote><br /> <b><font size="4" color="deeppink">タイトル</font></b><br /><br /> <font size="2">ジャンル<br /> <a href="URL" target="right">仮</a>/<a href="URL" target="right">仮2</a>/<a href="URL" target="right">仮3</a><br /> </font><br /><br /><br /><br /><br /><br /><br /><br /><br /> </blockquote></td></tr></table> ライン画像とテーブルの間の改行は一つしかないのですが、かなりスペースが空いてしまいます。 反転して見てましたが、やはりスペースと改行と言うように、しっかりと改行は一つだけでした。 しかし、このスペースは健在です。 どうしたら、このスペースをなくすことが出来るのでしょうか？
- ベストアンサー
- Windows XP
- テキストフィールドに画像を表示する場合の回り込み
こんにちは、一つどうしても解決できない問題がありましてご質問させて頂きました。大変お手数をおかけしますがご意見頂ければ幸いです。 textfieldのhtmlをtrueにして、htmlTextとして <img src="test.jpg">テスト のように表示したい場合に、テキストが回り込んでしまう問題がありますが、どうにかしてこれを回避して IEでのhtmlでいう <img src="test.jpg" align="absmiddle">テスト<br> のように小さなアイコンに続けて文字を表示するようなイメージで表示させたいのですが、いろいろと 探していますが、どうしても方法が見つかりません。 何かよい方法を知っておられる方がおられましたら ご教授頂けないでしょうか。宜しくお願い致します。
- ベストアンサー
- Flash
お礼
ありがとうございました。 幅は変えられないので、適当なところで改行を入れてみたらきちんと回り込みました。 納品前のデータだったので、適当な文字列を入れてくれという意味で○にしてたのですがこんな落とし穴があったとは。。。 非常に参考になりました。