adobe Imageready7で

質問

書き出したHTML。スライスが多く存在するデータなんですが、Netscape7.1(WinもMacも)で表示すると、バラバラにレイアウトが崩れて表示されてしまいます。スライス書き出しには<table><tr><td>タグを使っています。他のブラウザは問題ないんですが、どうしてネスケだけバラバラに分解されて表示されるんでしょう？？
どなたかご存知の方、お教え願います。

回答No.1

Joh_Taka · ベストアンサー

おそらく「バラバラにレイアウトが崩れて表示されてしまいます。」とは、ImageReady で書き出されたHTMLを Netscape でブラウズすると、スライスで切り分けた各画像の間に数ピクセルの隙間が空いてしまうことを指しているのだと思いますが・・・
この現象は、ImageReady でのスライス自体に問題がある訳ではなく、Netscape のテーブルに対する解釈が、Internet Explorer や Safari 等の他のブラウザと異なっているために起こります。

Netscape でテーブルを意図通り（連なるテーブル同士、またはテーブルの隣接する各セル間の隙間無く）表示させるためには、いくつかの注意点があります。

1.HTMLのDOCTYPE宣言を確認して下さい。

通常のHTML4.01であるならば、HTMLソースコードの冒頭に記述するDOCTYPE宣言は、（フレームセットでなければ）HTML4.01 Transitional にする必要があります。
HTML4.01 Strict にしてしまうと、以下で示す表示の不具合に対する回避方法も、全く効果がありませんので注意が必要です。
http://www2e.biglobe.ne.jp/~s-hasei/html/doctype.htm

2.複雑なテーブルの入れ子は厳禁です。

これは Netscape のテーブルの入れ子に対する解釈が、他の多くのブラウザとは異なるため、回避できない問題です。（Netscape のバグなので、ImageReady のスライスで自動生成されたテーブル構成によっては、そのままのHTMLソースコードでは表示に不具合を起こします）
スライスで書き出されたHTMLのテーブル部分を確認してみて下さい。
かなり複雑なテーブルの入れ子となっていませんか？
特に <td colspan="X"> や <td rowspan="Y"> 等、colspan属性やrowspan属性で、テーブル内の隣接するセルの列や行を連結させた中に入れ子としてテーブルを組み込んだ場合、Netscape では、かなり高い確率で表示に不具合を起こします。

解決方法としては、ImageReady でスライスを作成する際に、テーブルが入れ子とならないように、なるべくシンプルなスライスで切り分けなければいけません。
大きく切り分けたスライス画像の一部に対してのみを更に切り分けてしまうと、そのテーブルにはcolspan属性やrowspan属性が付加されてしまいます。
スライスで細かく画像を切り分ける必要がある場合には、大きく切り分けた画像の一部だけに対して再度スライスで切り分けるのではなく、たとえ結果的に切り分けられる画像数が多くなってしまうとしても、画像全体の横方向いっぱいまで、または縦方向いっぱいまでを一気に切るようにして下さい。

3.HTMLソースコードのキャリッジリターンを確認して下さい。

Netscape でテーブルを表示させる場合、HTMLソースコードの <td> ～ </td> 間を改行（コーディング上の改行）してしまうと、表示に不具合を起こします。
結果、スライスで切り分けた各画像間に数ピクセルの隙間が生じます。

対処方法としては、ソースコードの <td> ～ </td> 間を改行せずに、一行にまとめてしまうか、

<table>
<tr>
<td><!--
--></td>
</tr>
</table>

のように改行された <td> ～ </td> 間をコメントアウト（<!-- で始めて -->で閉じる）で埋めるようにします。

http://www.ep.sci.hokudai.ac.jp/~epnetfan/zagaku/2000/0929/carri.html

お礼

とても詳しく教えて頂きましてありがとうございます。助かりました。結局、スライスを切り直しました。何も考えずにイメレで、「レイヤーに基づく新規スライス作成」で作っただけだったので、全体が一つの<table></table>で囲まれているのに、<tr></tr>の中の<td colspan=""></td>のcolspan数がまちまちになっていました。必要最低限の数のスライス数に押さえ、ご指摘どおりに横方向、縦方向いっぱいのスライスにしたところ、ネスケでもきちんと表示できました。
ほんとうにありがとうございます。