掲示板/HTML質問板/過去ログ/一覧/ DOCTYPE宣言による表示の違いについて

0 名前： オーディン ： 2007/03/30（金） 10:26 ID:DE3YQ7Jr sub-FV: はじめまして。オーディンと言います。

現在、DOCTYPE宣言が”TransitionalのURL無し”で制作中ですが、これを”URLあり”や"Strict"に変更した場合、
ブロック要素の右部分が画面の途中で切れる状態で表示されます。
margin-rightを20pxほど指定したときのような感じです。
この表示をStrictにした場合でも、”TransitionalのURL無し”と同じ様に表示したいです。
ちなみにいずれの宣言でも文法チェッカーでチェックしたところ100点でした。

以下問題部分のソースになります。

【HTML】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="Robots" content="INDEX,FOLLOW">
<meta name="Generator" content="notepad">
<title>サイトタイトル</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>



<h1 class="title">
サイトタイトル
</h1>





<div class="bread">
<a href="./">TOP</a>
</div>





<div class="menu">
<ul class="menu">
<li class="menu"><a href="">TOP</a></li>
<li class="menu"><a href="">錦祭について</a></li>
<li class="menu"><a href="">企画紹介</a></li>
<li class="menu"><a href="">ご参加をお考えの方へ</a></li>
<li class="menu"><a href="">ご支援をお考えの方へ</a></li>
<li class="menu"><a href="">アクセス</a></li>
<li class="menu"><a href="">リンク</a></li>
<li class="menu"><a href="">お問い合わせ</a></li>
</ul>
</div>





<div class="main">

<h2 class="menu-title">サブタイトル</h2>
文章文章文章文章文章文章文章文章文章文章
文章文章文章文章文章文章文章文章文章文章

<h2 class="menu-title">サブタイトル</h2>
文章文章文章文章文章文章文章文章文章文章
文章文章文章文章文章文章文章文章文章文章

</div>



<div class="copyright">Copy right(C) 46th Nishikisai All right reserved.</div>



</body>
</html>

【CSS】

body
{
background-color:#ffffff;/*ページ背景色*/
color:#151515;/*ページの文字色*/
font:16px "MS Pゴシック";/*文字サイズ　フォント種類*/
margin:0px;/*外側余白（縦横ともに0）*/
}

.bread
{
font-size:12px;
padding-right:10px;
text-align:right;
}

h1.title
{
background:#000000 url(http://www.nishikisai.com/test/images/title.jpg );
color:#ffffff;
font:italic 24px Century;
padding:25px 0px 25px 30px;
}

h2.menu-title
{
color:#151515;/*文字色*/
font:18px "MS Pゴシック";/*フォント指定（サイズ　種類）*/
border-bottom:1px #00ffff solid;/*下線指定（太さ　カラー　種類）*/
border-left:3px #7f7f7f solid;/*左線指定（太さ　カラー　種類）*/
width:80%;/*下線長さ指定*/
padding-bottom:5px;/*下内側余白*/
padding-left:5px;/*左内側余白*/
}

h3.menu-title
{
color:#151515;/*文字色*/
font:16px "MS Pゴシック";/*フォント指定（サイズ　種類）*/
border-bottom:3px #0080ff double;/*下線指定（太さ　カラー　種類）*/
width:80%;/*下線長さ指定*/
margin-top:30px;/*上外側余白*/
padding-left:5px;/*左内側余白*/
}

div.menu
{
background:#000000 url(http://www.nishikisai.com/test/images/menu-bg.jpg ) repeat-x;
/*↑背景指定（背景色、背景画像、画像の繰り返す方向）*/
font:15px "MS Pゴシック";/*文字サイズ　フォント種類*/
padding-top:5px;/*上内側余白*/
padding-bottom:5px;/*下内側余白*/
padding-left:50px;/*左内側余白*/
}

ul.menu
{
list-style:none;/*（・）の形状指定。noneの場合は非表示*/
margin:0px;/*外側余白*/
padding:0px;/*内側余白*/
}

li.menu
{
color:#ffffff;/*文字色*/
padding-right:10px;/*右内側余白*/
display:inline/*ブロック要素をインライン要素化*/
}

.menu a
{
color:#ffffff;/*リンク部分文字色*/
text-decoration:none;/*リンク部分下線消去*/
}

.menu a:hover {
color:#ffa500;/*マウスオーバー時の文字色*/
}
.main
{
background:url(http://www.nishikisai.com/test/images/info.jpg ) repeat-y;
border-top:3px #000000 double;
border-bottom:3px #000000 double;
padding:30px 10px 5px 50px;
}
.copyright
{
background:#000000 url(http://www.nishikisai.com/test/images/menu-bg.jpg ) repeat-x;
/*↑背景指定（背景色、背景画像、画像の繰り返す方向）*/
font:italic 14px "Century";/*フォント指定（斜体　サイズ　種類）*/
color:#ffffff;/*文字色*/
padding-top:10px;/*上内側余白*/
padding-right:20px;/*右内側余白*/
padding-bottom:10px;/*下内側余白*/
text-align:right;/*文字位置（左寄せ→left、中央→center、右寄せ→right）*/
}

長くなってしまい申し訳ありません。
ご指導のほどお願いいたします。

1 名前：匿名： 2007/03/30（金） 10:26 ID:BfugA0IG sub-Cl: ボックスのwidthは各DTDによってmargin,padding,boderの基準が違います、そのためのレイアウトが崩れるのだと　思いますが。

2 名前： カヅサツ ◆ThCi95HEzw ： 2007/03/30（金） 10:26 ［URL］ ID:O5hEMlpW sub-r2

多くのブラウザでは、文書型宣言を省略したり、あるいは”TransitionalのURL無し”などの書き方をすると、CSSを公式ルール通りに解釈しないことがあります。

なのですが、

> 以下問題部分のソースになります。

これをオーディンさんと同じ MSIE 7.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

から

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

に変えたりして見比べてみましたが、表示はかわらないように見えます。

3 名前： オーディン ： 2007/03/30（金） 10:26 ID:jzM/qme/ sub-9g: >>2
確かに一見表示は変わらないのですが、横スクロールバーが表示されるようになり、右にスクロールしてみると”h1”と”.main””.copyright ”が画面横幅一杯に表示されず、20～30pxほどの余白が生じてしまいます。

ただ、不思議なことに”div.menu”の部分は普通のブロック要素と同じように表示されます。

画面は12～19インチのもので試しましたが、どれも同じ現象が現れます。

4 名前：アヤ： 2007/03/30（金） 10:26 ID:I/L72zbC sub-0y: 私の場合はIE6ですが。
宣言を、HTML4.01Transitional（URLあり）またはHTML4.01 Strictした場合、ズレが見られるのは、copyright部分の文字のみでした。
少し（4px程度）左にズレる感じです。
また、どちらもボックス自体には変化が見られず、横スクロールバーは表示されませんでした。

5 名前： カヅサツ ◆ThCi95HEzw ： 2007/03/30（金） 10:26 ［URL］ ID:O5hEMlpW sub-r2: Win IE7ですが、>>3, >>4 共に再現しませんでした。

最初は >>1 かと思ったのですが、そもそも原因となるような width が見当たらないですしねぇ。

6 名前： オーディン ： 2007/03/30（金） 10:26 ID:Jtz2GnZL sub-h.: 皆さん、お返事ありがとうございます。
バイト先の会社のPCで試してみたところ正常に表示されました。
ただ、規則上会社からアップはできないため、メール添付にて送信後、自分のPCでアップしました。

しかし、今度は”div.menu”の背景指定が反映されず、途中で真っ白になってしまいます。
ローカルで見た場合でも変化がないので、サーバーの原因とは考えられないんです。

7 名前： カヅサツ ◆ThCi95HEzw ： 2007/03/30（金） 10:26 ［URL］ ID:O5hEMlpW sub-r2: とりあえず、状況が再現できるものがないと、検証不能と思われます。

8 名前： オーディン ： 2007/03/30（金） 10:26 ID:jzM/qme/ sub-9g: 自宅でアップしたところ、現在は何の問題はありません。
今度発生した場合、プリントスクリーンして画像をアップします。
皆様、どうもありがとうございました。