ＩＥでテーブル内のテキストが勝手に改行されます。

質問

個人でサイトを運営しているのですが、

外部ＣＳＳをテーブルに適用するとＩＥとＦｉｒｅｆoxで表示が変わってしまい
困っています。問題は下記です。

テーブルに指定するＣＳＳは以下のようなものです。

table.1{
border-top:1px solid #666666 ;
border-left:1px solid #666666 ;
border-collapse:collapse;
border-spacing:0;
background-color:#ffffff;
empty-cells:show;
text-align:left;
font-size: 10pt;
padding:3px;
}
.1 th{
border-right:1px solid #666666 ;
border-bottom:1px solid #666666 ;
color:#330000;
background-color:#996633;
padding:0.1em 0.1em;
text-align:center;
}
.1 td{
border-right:1px solid #666666 ;
border-bottom:1px solid #666666 ;
padding:8px 8px 8px 8px;
line-height: 120%;
}

そして本文のＨＴＭＬです。

<table width="166" border="0" class="1">
<tr>
<td colspan="2"><div align="center">テキストテキスト</div></td>
</tr>
<tr>
<td>イメージ写真</td>
<td>イメージ写真</td>
</tr>
<tr>
<td width="76"><p>テキストテキストテキストテキストテキストテキストテキストテキスト</p></td>
<td width="79"><p>テキストテキストテキストテキストテキストテキストテキストテキスト</p></td>
</tr>
</table>

以上のようなものです。

このようにするとＦｉｒｅｆｏｘではきちんと表示されるのですが、
ＩＥだとテキストの部分が４文字ほどで勝手に改行されてしまい、
かなり縦長のテーブルになってしまいます。

試行錯誤してみたのですが、全然できなくて本当に困っています。
もし解決策をご存知の方おられましたら、ぜひ教えていただければ幸いです。

回答No.2

outbrave · ベストアンサー

DOCTYPE宣言で表示が異なりますので、ソースを頭から見てもらうのが良いと思います。

クラス名が数字でもアルファベットでも同じと言われていますので、DOCTYPE宣言がないと考えられますが。
IE6のcssは、tableに引き継がないとかありますので、部分的なソースでは何とも言えませんね。

お礼

そうですか、IE6ではＣＳＳをtableに引き継がないんですね。
もうすでに古いブラウザということですね。

ありがとうございます。
シェアも少ないみたいなんで、無視してやっていきたいと思います。

回答No.1

marutone

私の環境ではそのような現象は確認できませんでしたが、
まずクラス名に数値だけを使用するのはやめましょう。
「1」の代わりに「a」等に変更してみてください。

あと縦長のテーブルになってしまうのは、
widthの値が小さいからではないでしょうか。

お礼

ご回答ありがとうございます。

確認したところＩＥ７では正常に表示されているようです。
１つ前のＩＥ６で表示がおかしくなっています。

アルファベットにしてみても同じでした。
またwidthも関係ないようです。

困りました。。。