Q&A
プログラムコードもそうですが、実際にブラウザから参照したときのhtmlもご提示いただけますか？
今、CGIからHTMLを、下記の様に書出しているのですが、
テーブルに線が入って困っています。
コードは、下記です。
# マップ表示 print qq(<table border="0" cellpadding="0" cellspacing="0" style="border-style: none; border-spacing:0px 0px;" >); print qq(\n); for($dy = 0 ; $dy < $SCREENH ; ++$dy) { $y = $mypc->{y} + $dy; print qq(<tr>); for($dx = 0 ; $dx < $SCREENW ; ++$dx) { $x = $mypc->{x} + $dx; print qq(<td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;">); print qq(<img src="$IMAGEPATH$map->[$y][$x].gif">); print qq(</td>); } print qq(</tr>\n); } print qq(</table>\n); print <<END;
どなたか、アドバイスの程、よろしくお願いいたします。
すみません。HTMLのソースは、下記です。
<html> <head> <title>岡村ちゃんフアン交流チャット</title> <LINK href="./css_files/default.css" type=text/css rel=stylesheet> <script type="text/javascript" language="JavaScript" src="rpg4.js" defer></script> </head> <body marginwidth="0" marginheight="0" onload="init(0, 0, 352, 288, 32, 30);"> <div class="char" style="left:160px; top:128px;"><img src="images/char0.png"></div> <div id="char0" class="char" style="left:160px; top:128px;"><img src="images/char0.png"></div> <table border="0" cellpadding="0" cellspacing="0" style="border-style: none; border-spacing:0px 0px;" > <tr><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/1.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/2.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/2.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/2.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/2.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/1.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/1.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/1.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/3.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/3.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/5.gif"></td></tr> <tr><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/2.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/2.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/2.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/1.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/1.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/1.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/1.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/1.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/3.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/3.gif"></td><td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px;"><img src="images/3.gif"></td></tr> 略 </table> <a href="javascript: reloadFrame();">[リロード]</a> </body> </html>
CSSは、下記のようになっています。
@charset "utf-8"; /* CSS Document */ /* CSS ver 1.0.1 */ div.char { position: absolute; z-index: 100; } div.balloon { position: absolute; z-index: 120; } div.text { position: absolute; z-index: 130; width: 92px; margin: 2px 2px 2px 16px; color: #333333; font-size: 10px; } a:link, a:visited { color: #B0B0B0; text-decoration: none; } a:hover { color: #333333; text-decoration: none; } body { margin: 0px; } #footer2{ position:absolute; bottom:0; left:0; height:30px; width:100%; } #header1{ position:absolute; bottom:0; left:0; height:30px; width:100%; } #main{ /* height:70%;*/ width:100%; } #input{ /* height:30%;*/ width:100%; }
アドバイス頂いたcssを閉じたところ変化がありました。
$css_link='<LINK href="./css_files/default.css" type=text/css rel=stylesheet/>';
お忙しい所スミマセン。HTMLのソースを追記しました。
CSSは何か影響しそうに思うのですが、影響がありそうな記述はないのでしょうか？
cssを追記しました。影響のあるコードは、無いと思っています。
tdに入っている1個1個の画像のサイズはどうなっていますか？
ファイルサイズではなく、縦・横のサイズです。
32px X 32pxです。よろしくお願いいたします。
32*32のGIF画像を作ってIE11,Chromeで確認してみましたが再現しません。CSSも取り込んでいます。強いてなら <LINK href="./css_files/default.css" type=text/css rel=stylesheet /> のように最後が閉じるようになっていないのは気になるのはなりますが、レイアウトに影響がでそうなものでもないですし。。
type=text/css rel=stylesheet /> を追記したところ、予想外の変化がありました。画像を画像を見て下さい。最初に言っていなかったのですが、iframeタグで２画面を処理しています。本当に申し訳ありません。アドバイスの程、よろしくお願いいたします。
マップのテーブル画像は、線が入ったままです。何卒よろしくお願いします。
iframeはどう画面をわけられているのでしょうか。図示してください。あとどういう変化があったのかも前後説明いただければと・・（いちいち全て覚えているわけではないですし）
キャラクターが画面外に出ています。予想外の動きです。
なるほど。本来どうしたいのかが分からないですが、ひとまずきちんと書いた方がいいですね。クォーテーションで囲って。 type="text/css" rel="stylesheet" />
解りました。ありがとうございます。
返信の時間が遅くなり、申し訳ありません。
解りました。ありがとうございます。
table img{ display: block; }で解決できました。 ありがとうございます。
回答3件
ベストアンサー
0
table 要素に、border-collapse: collapse; を設定します。
投稿2018/06/21 04:38
退会済みユーザー
総合スコア0
<td style="height:32px; top:32px; border-style: none; border-spacing:0px 0px; border-collapse: collapse;">
<table border="0" cellpadding="0" cellspacing="0" style="border-style: none; border-spacing:0px 0px;border-collapse: collapse;" >
を、入れたのですが現象は、変わらずです。
table img{ display: block; }で解決できました。
ありがとうございます。
あなたの回答
tips
プレビュー
