プロが教える店舗&オフィスのセキュリティ対策術

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

外部CSSをテーブルに適用するとIEとFirefoxで表示が変わってしまい
困っています。問題は下記です。

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

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%;
}

そして本文のHTMLです。

<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>


以上のようなものです。

このようにするとFirefoxではきちんと表示されるのですが、
IEだとテキストの部分が4文字ほどで勝手に改行されてしまい、
かなり縦長のテーブルになってしまいます。

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

A 回答 (2件)

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



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

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

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

お礼日時:2011/02/18 11:55

私の環境ではそのような現象は確認できませんでしたが、


まずクラス名に数値だけを使用するのはやめましょう。
「1」の代わりに「a」等に変更してみてください。

あと縦長のテーブルになってしまうのは、
widthの値が小さいからではないでしょうか。
    • good
    • 0
この回答へのお礼

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

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

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

困りました。。。

お礼日時:2011/02/14 18:10

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!