OPERAで一部のスタイルシートがうまくいきません



0   名前: まこちゃ : 2005/06/21 10:59
スタイルシートで、tdタグの内の表示位置指定をしているのですが、
IEでは問題なく表示するが、OPERAでは指定が無視されて困っています。
tdタグ内が単純なテキストの場合は問題ないのですが、tdタグ内に
もうひとつテーブルを組んだ場合に無視されてしまいます。

<html>
<head>
<style type="text/css">
.abc {text-align:center;vertical-align:top;}
</style>
</head>
<body>
<table width="600" border="1">
<tr>
<td class="abc"><!-- ←センタリングされません -->
<table width="400" border="1">
<tr>
<td class="abc"><!-- ←センタリングされます -->
おぺら
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

スタイルシートを使わずに、htmlで<td align="center">と書くと、
OPERAでも問題なくセンタリングされます。
何か基本的な使い方をあやまっているのでしょうか?

1   名前: phpinfo() : 2005/06/21 10:59
marginを使ってみては?
http://www.tagindex.com/stylesheet/box/margin.html

2   名前: カヅサツ : 2005/06/21 10:59  [URL
Operaの挙動が正しいです。

text-alignは、要素内のテキストの位置を指定するプロパティであり、要素内のブロック要素の位置には影響しません(ただし継承するので、さらにその中のテキストは影響され得る)。

ブロック要素そのものの位置を変えるには、marginプロパティの左か右、あるいは両方を auto にします。

以下のサンプルを IEとOpera両方で検証してください(今回のケースでは最初の文書型宣言(<!DOCTYPE〜)も重要です)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title>test</title>
<style type="text/css">
p{
background-color: #FFC;
width: 200px;
}
</style>
</head>
<body>
<p style="margin-left: auto; margin-right: auto;">段落そのものは中央。段落内テキストはたぶん左</p>
<p style="margin-left: auto; margin-right: 0px; text-align: center;">段落そのものは右。段落内テキストは中央</p>
</body>
</html>

3   名前: まこちゃ : 2005/06/21 10:59
phpinfo() さん、カヅサツさん、ありがとうございます。
やっぱり、ただの勉強不足だったんですね。
さっそく試してみます。

一覧へ戻る