テーブルのセルがFirefoxで伸びる

[新着] Webテンプレートを仮オープンしました

0   名前： さかな ： 2006/10/18（水） 20:36  ID:cWz35a7P
IEでは　width指定の通りの幅になるのですが、Firefoxではセルが伸びてしまいます、原因がわかりませんので　教えて下さい。
全体は800PXのBOXにテーブルを入れています。
−−−−−−−−−−−CSS
table{
	border-collapse:collapse;	/*IE5のみ対応*/
	empty-cells:show;
	border:1px solid #646464;
	width:798px !impotant;	/*親ボックス全体が800pxで指定してあるので、内容798pxになる*/
	width/**/ :800px;		/*WinIE5ボックスモデルハック*/
	font:normal normal 12pt/100% Tahoma sans-serif;
}

caption{		/*テーブル内要素なのでスペースの指定はmarginでなくてpadding*/
	caption-side:left top;　　/*変化無し*/
	padding-top:20px;
	padding-bottom:7px;
	font-size:0.8em;
}

th{
	border-bottom:1px solid #646464;
	border-right:1px solid #646464;
	font:normal normal 0.8em/100% "Arial Black",sans-serif;
	padding:2px 0px;
	background-color:#f2f2f2;
	text-align:center;	
}

td{
	border-bottom:1px solid #646464;
	border-right:1px solid #646464;
	font-size:0.7em;
	padding:2px 0px;
	text-align:center;
}

.tx_l{
	text-align:left;
	color:#205b77;
}

.midashi{
	height:20px;
	padding-top:5px;
	padding-bottom:5px;
}

/*-----------------------------------------------------
table=800PXなので110+200+(70*7)
------------------------------------------------------*/
.c1{		/*width-100PX*/
	width:109px !important;
	width/**/ :110px;;
}

.c2{		/*width-200PX*/
	width:199px !important;
	width/**/ :200px;;
}

.c3{		/*width-70PX*/
	width:68px !important;
	width/**/ :70px;;
}
-----------------------------------XHTML1.0 Strict
	<table summary="◇◇" cellspacing="0">
	<caption>▼▼▼▼▼▼▼</caption>
	<colgloup class="c1"></colgroup>
	<colgloup class="c2"></colgroup>
	<colgroup class="c3" span="7"></colgroup>

	<thead>
		<tr>
			<th abbr="◆" class="midashi">◆</th>
			<th abbr="◆" class="midashi">◆</th>
			<th abbr="◆" class="midashi">◆</th>
			<th abbr="◆" class="midashi">◆</th>
			<th abbr="◆" class="midashi">◆</th>
			<th abbr="◆" class="midashi">◆</th>
			<th abbr="◆" class="midashi">◆</th>
			<th abbr="◆" class="midashi">◆</th>
			<th abbr="◆" class="midashi">◆</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th abbr="■">■</th>
			<td class="tx_l">◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇</td>
			<td>○</td>
			<td>○</td>
			<td>○</td>
			<td>○</td>
			<td>○</td>
			<td>○</td>
			<td>○</td>
		</tr>
	</tbody>
	</table>

長くなって済みません、この設定で数行あるのですが、2列目のセルがwidthを指定してあるにもかかわらず、文字数が多い分伸びてしまいます、Firefoxで崩れているのだから、どこかに考え方のミスがあると思うのですが、よろしく御願いします。
1   名前： アヤ ： 2006/10/18（水） 20:36  ID:I/L72zbC
多分、元のソースは大丈夫だと思うんですが。（IEでちゃんと表示されているようなので。）

私の環境では、上のソースの以下のスペルミスを直したら、意図通りに表示されました。
tableの中で、classのc1とc2が指定してある「colgroup」部分が「colgloup」になっています。
.c1.c2.c3のクラス指定部分のそれぞれの最後にある、「;」は削除。

あと、「◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇」の部分を日本語に変えたら、問題なく表示されました。
これは、例で入れてると思うのですが。Ffで、記号って続けると改行されなかったのか、ちょっと記憶には無いんですけど。どうやら英字のように、スペースがない限り、そのまま続いていくようですね。（IEのみ改行されるみたいですが）

一応、IE6.0/Ff1.5/NN7.0/Opera9.0で確認しました。

それ以外が原因のようでしたら、申し訳ありませんがご協力できないと思います。
2   名前： さかな ： 2006/10/18（水） 20:36  ID:ClQwHd.o
>>1 御世話になりました、アヤさん。
投稿するのに、コードの表記ミスをしてしまい、また　その部分まで見つけていただいて、感謝です。
★早速→訂正→Check→→→→→OK!!!!!

>あと、「◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇」の部分を日本語に変えたら、問題なく表示されました。
ご指摘通りです、日本語に変えてみたら　問題は解消されました。

>どうやら英字のように、スペースがない限り、そのまま続いていくようですね。
実は、英文を記述していました、そういえば、以前にHTML(リファレンス)関連サイトで、英語表記の改行について説明してあるのを、見たことがありました。その内容を含めて　全て　すっかり記憶から飛んでいました。
自分で言うのも何ですが、やっぱり　その当たりに原因があるように、思います(全然自信はありませんが)。

>一応、IE6.0/Ff1.5/NN7.0/Opera9.0で確認しました。
私が確認できるのはIE6.0/Ff1.5なので、他のブラウザでの確認、ありがとう御座いました。
一覧へ戻る