- ベストアンサー
Firefoxの挙動について
ごく普通のHTMLを作っておりますが、tableの中で画像を右寄せで表示させたとき<img src="hoge.jpg" align="right">に、Firefoxで表示させると画像の周りにテキストが周りこまず、画像の下の行からテキストが表示されます。 テーブルの中でなければきちんと周りこみます。 ちなみにMacのSafariでも同じ表示でしたがIEでは回り込んでいました。 回避する方法はないでしょうか。 それと、ソースで文字が長すぎて改行を入れた部分がFirefoxで見ると<br>がないのに改行されてしまいます。 これもこういう仕様なのでしょうか。 よろしくお願いします。
- みんなの回答 （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>
お礼
ありがとうございます。 試してみましたがまったく状況は変わりませんでした。 他の手段はないでしょうか。 よろしくお願いいたします。
お礼
ありがとうございました。 幅は変えられないので、適当なところで改行を入れてみたらきちんと回り込みました。 納品前のデータだったので、適当な文字列を入れてくれという意味で○にしてたのですがこんな落とし穴があったとは。。。 非常に参考になりました。