tdタグにclassを入れた場合

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



0   名前: hana : 2006/06/06(火) 21:31  ID:v4VNKDzc
TAG bbsの皆様


tdタグにcssを入れると、winでは正確に表示されるのですが
macで見るとcssが効かないのです・・・

tdタグにはcssは不適格なのでしょうか?

基本的な事の質問ですみません。。。
どうぞ、よろしくお願いいたします。

1   名前: 匿名 : 2006/06/06(火) 21:31  ID:Ji0blfRq
MACは解釈が微妙な所がありますから…。
またはWINが好意的に拡張解釈している可能性も。

実際にはどんなCSSを充てたのでしょう。
対応していない属性を与えたりしていませんか?

2   名前: カヅサツ ◆ThCi95HEzw : 2006/06/06(火) 21:31  [URL]  ID:O5hEMlpW
> tdタグにはcssは不適格なのでしょうか?

いいえ。
ただし、ブラウザによっては無視したり、変な解釈をするかもしれません。例えば td要素に margin プロパティを指定しても、たぶん無視されるはずです。

3   名前: Z ◆XTzyosZXcL : 2006/06/06(火) 21:31  ID:7f4VEd9L
 タイトルと本文の内容が微妙にずれていませんか?

 仕様書に定義されているように、TD要素にid属性またはclass属性を設定することは認められていますから、十分仕様の範囲であり>>0の言い方を借りるならば「適格」です。

仕様書該当部分:
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.2.6
http://www.w3.org/TR/html401/struct/tables.html#h-11.2.6

仕様書の読み方:
http://www.kanzaki.com/works/2001/pub/wsd01.html

HTMLの基本など:
http://web.xii.jp/iec/html/

 その上で、HTMLの場合はCSSによる見かけのコントロールを行う訳ですが(必ずしもclass属性によるふるい分けとは限りません)、どんなプロパティでもその要素に当てはめることが可能であるとは限りません(この点については既に他の方も述べていらっしゃるので省略します)。

CSS Level2和訳:
http://www.y-adagio.com/public/standards/tr_css2/toc.html

CSSの利点と欠点:
http://members.jcom.home.ne.jp/pctips/www/cssmerit.html

CSSを使うわけ:
http://deztec.jp/lecture/css/css_why.html

CSS解説記事の一例:
http://web.xii.jp/iec/css/

4   名前: hana : 2006/06/06(火) 21:31  ID:v4VNKDzc
ご回答くださった
匿名様、カヅサツ様、Z 様
ありがとうございます。

●カヅサツ様
td要素に marginは無視されるとの事ですが
td要素にpaddingも無視されるのでしょうか?

質問後にTD要素ではなくDIVにclassを入れなおしたのですが
macだと、テキストが縦になってしまうそうなのです。

TDに戻さなくては・・・

●匿名様
属性はすごーく単純なpaddingとかmarginしか設定していないのです。




5   名前: カヅサツ ◆ThCi95HEzw : 2006/06/06(火) 21:31  [URL]  ID:O5hEMlpW
> td要素にpaddingも無視されるのでしょうか?

ルール上は無視されませんし、また、無視するブラウザというのは聞いたことがありません。

6   名前: six : 2006/06/06(火) 21:31  ID:ZPLL9zov
macのsafari、IE、Firefoxで検証してみましたが、td要素に指定したmarginもpaddingも正常に表示されました。
記述の仕方に問題があるのではないでしょうか?

7   名前: Z ◆XTzyosZXcL : 2006/06/06(火) 21:31  ID:7f4VEd9L
 UAの実装における差異の話ですと、それらを集めた資料を元に検証していかないと難しいかもしれません(本来は同じ出力先であれば同じ結果が期待される訳ですが)。

例えば:
http://cssbug.at.infoseek.co.jp/index.html
http://bugzilla.mozilla.gr.jp/

 文書型宣言においてDTDのURIがあったりなかったり(俗に言うDOCTYPEスイッチ)すると、レンダリングに差が出たりもするようです。もしかしたらそれが原因かもしれません。
#この辺の話は過去ログでも出ていたはずですので、出来れば確認してみてください。

参考)
http://deztec.jp/design/06/05/24_www.html

文書型宣言について:
http://members.jcom.home.ne.jp/pctips/www/DOCTYPE.html
http://bakera.jp/hatomaru.aspx/yomoyama/doctype
http://members.jcom.home.ne.jp/jintrick/Personal/markup_dtd.html

仕様書該当部分:
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#version-info
http://www.w3.org/TR/html401/struct/global.html#version-info

8   名前: 匿名 : 2006/06/06(火) 21:31  ID:DHOTWsNq
>質問後にTD要素ではなくDIVにclassを入れなおしたのですが
>macだと、テキストが縦になってしまうそうなのです。

差し支えなければそのページを見せてもらえませんか?

9   名前: hana : 2006/06/06(火) 21:31  ID:cI7QRlch
匿名様

まだ、公表していないページなので
ページはお見せできないのですが

タグをご確認いただければと思います。

.tableleft10 {
padding: 0px 0px 0px 10px;
display: table-row;
margin: 0px;

上記設定で(左部分のみ10PX空けたい場合)

td要素に
<td class="tableleft10">

で、入れています。

記述が間違っているのでしょうか。。。

10   名前: カヅサツ ◆ThCi95HEzw : 2006/06/06(火) 21:31  [URL]  ID:O5hEMlpW
>>9
display: table-row;

これは、何のために記述してあるのですか?



11   名前: Z ◆XTzyosZXcL : 2006/06/06(火) 21:31  ID:7f4VEd9L
>>10でカヅサツさんもおっしゃっていますが、displayプロパティの役割を>>3の仕様書やCSS解説で確認してみてください。どうやら原因は>>9にあります。

#displayプロパティをうまく使うと、論理構造を極めた上で見掛けも自在にコントロールが可能なはずです。ただし、セレクタの入れ子も含めて完全実装しているWebブラウザはかなり限られたような記憶がありますから、なれないうちはうかつに手を出さないほうがよいかと(^^;

12   名前: hana : 2006/06/06(火) 21:31  ID:cI7QRlch
カヅサツさん、Zさん
ありがとうございます。

display: table-row;
上記は、別の人のCSSに入っていたので
知らずに使用していました。

これが原因だったのかもしれないです。。。
上記を取って、再確認してみます。

初心者のわたくしに
こんなに丁寧にご指示いただきまして
ありがとうございます!!

一覧へ戻る