- ベストアンサー
DOCTYPEをStrictにするとtdに余白が表示される
- HTMLのDOCTYPEをStrictにすると、tdの上下に余白が表示されますか？
- 枠を表示させるために4つの画像を組み合わせようとしていますが、Strictではうまくいきませんか？
- どうしてもStrictで組みたいのですが、対策はあるでしょうか？
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
考え方を変えてみてはいかがでしょう？ 枠の画像を<img />タグを使って表示するのではなく、<td>の背景画像として表示させてみるとか？ 【XHTMLサンプル】 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" charset="UTF-8" /> <style> </head> <body> <table> <tr><td class="top"></td></tr> <tr> <td class="body"> テキストテキストテキスト </td> </tr> <tr><td class="bottom"></td></tr> </table> </body> </html> 【CSSサンプル】 table{ border:none; border-collapse:collapse; } td.top,td.body,td.bottom{ padding:0; width:400px; height:10px; } td.top{ background:url(top.jpg); } td.body{ background:url(body.jpg); padding:0 20px; width:360px; height:auto; } td.bottom{ background:url(bottom.jpg); } 幅とか高さは使用する画像に合わせてアレンジしてください。 td.body の幅は padding 分狭くするのを忘れずに！ 一応Firefox、IE、Opera、safariで表示確認してあります。 そしてソースをよく見てもらえばお判りの通り、もはや <table> を使う理由が微塵もありません。<div>を3つタテに重ねても同様の表示が可能ます。 DTD XHTML 1.0 Strict では lang プロパティは廃止されてたと思うのですが… 違いましたっけ？
その他の回答 (4)
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
lang プロパティが気になったので調べてみたら、xhtml1.1 から廃止でした。 xhtml1.0 ではまだ後方互換の為に併記することが許可されていたんですね。 大変失礼いたしました（恥 ついでと言ってはナニですが、<div>で記述したサンプルを作成しました。以下の URL を参照さなってみてください。
- salonpath
- ベストアンサー率48% (194/399)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 参考：http://www.w3.org/QA/2002/04/valid-dtd-list.html#DTD DOCTYPEはちゃんと書かないと後方互換モードで表示されるので注意が必要です。 ストリクトの話は置いて置いて、table周りに隙間が開いてるんじゃなくてimgの下に隙間が開いてるのかも。 以下の指定を追加してみてもらってもいいですか？ img{ vertical-align:bottom;}
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<?xml version="1.0" encoding="Shift_JIS" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> だね。 折角、XHTMLで作成するなら、tableで書かずに作成しましょう。 <body> <div> <hr class="top" /> <div> ここに記事など </div> <div class="border"> <span class="left">デザイン枠</span> <span class="right">デザイン枠</span> <span class="bottom">デザイン枠</span> </div> </div> </body> とかならHTMLも簡単
- salonpath
- ベストアンサー率48% (194/399)
DOCTYPE間違ってますよ。 あと対象のブラウザはなんでしょうか？ テーブルを表として使ってなかったりするのにストリクトに拘る理由は？
お礼
doctypeどこ間違っていますか？ 対象ブラウザはIE、Firefox、Operaをカバー出来ればと思っております。 上記ソースは全体の一部であり、ずっとストリクトでやってきたもので、出来ればこのままでいきたいと思っております。