[Expression Web]ブラウザの上部余白をとりたい

■1711 / inTopicNo.1)

　ブラウザの上部余白をとりたい

□投稿者/ navi 一般人(1回)-(2007/09/07(Fri) 10:46:27)

記事内容:[Expression Web]　

お教え下さい。
Expression Webを使っています。

DOCTYPEは
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">です。

何も指定しないとブラウザの上部に余白が空いて表示されますね。
その余白をとりたいのです。

cssで
bodyにmargin=0,padding=0としました。
レイアウトテーブルを使っているので、そのテーブル（class=maintable）
にもpadding=0としました。
レイアウトテーブルはブラウザの中央揃えにしたいのでmarginはautoに
したのですが、それがいけないのでしょうか。

※HTMLのソース
___________________________________
<body>
<div id="main">
<table border="0" cellpadding="0" cellspacing="0" class="maintable">
<tr>
<td style="height: 97px" valign="top">
<img alt="...>
</td>
</tr>
.....
___________________________________

※CSSのソース
___________________________________

.maintable {
border-style: solid;
border-width: 1px;
border-color: #C0C0C0;
margin:auto;
padding:0;
text-align:left;
width: 730px;
background-color:white;

#main {
padding: 0px;
margin: 0px;
text-align: center;
}

body {
margin: 0;
padding-top: 0;
background-image: url('image/abc.jpg');
background-repeat: repeat-y;
}
___________________________________

です。

どこをさわってもブラウザの余白がなくなりません。
説明が足りないかもしれませんが、どうぞお教えください。
よろしくお願いいたします。

■1712 / inTopicNo.2)

　Re[1]: ブラウザの上部余白をとりたい

▲▼■

□投稿者/ wanichan 大御所(629回)-(2007/09/07(Fri) 10:53:19)

一度、単位が省略されている部分もつけてみてはいかがでしょうか？
0 → 0px という感じに。

どうぞよろしくお願いします。

■1713 / inTopicNo.3)

　Re[2]: ブラウザの上部余白をとりたい

▲▼■

□投稿者/ navi 一般人(2回)-(2007/09/07(Fri) 12:47:06)

さっそくのお返事ありがとうございます。

おっしゃるとおりにｃｓｓのソースを0→0pxに変えてみたのですが、
やはり上部に余白が表示されます。（バージョンはＩＥの７です。）

レイアウトテーブルをdiv=mainでくくり、
そのなかにテーブル（maintable）を入れていることがいけない
のでしょうか・・・

今の状態は、背景画像はブラウザいっぱいに敷いてあるけれど、
レイアウトテーブルがブラウザの一番上までくっついた状態になっていないのです。

質問の内容を変えます。

・レイアウトテーブルを中央揃えにする。
・レイアウトテーブルをブラウザ上部に余白を表示させずに、
　くっついた状態にする。

このようにするためには、cssで定義するとすれば
どのようなソースになりますか。
よろしければお教えください。よろしくお願いいたします。

■1724 / inTopicNo.4)

　Re[3]: ブラウザの上部余白をとりたい

▲▼■

□投稿者/ イオ一般人(3回)-(2007/09/11(Tue) 23:52:23)

こんばんわ。

IE６では確認しましたか？
IE６だと余白はないようです。
IE６で、余白なし、IE7で余白ありだとまた違った解答になります。

★HTML★
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<html>
<body>
<div id="main">
<table border="0" cellpadding="0" cellspacing="0" class="maintable">
<tr>
<td style="height: 97px" valign="top">
<img scr="" alt="...">
</td>
</tr>
</table>
</body>
</html>

★CSS★

.maintable {
border-style: solid;
border-width: 1px;
border-color: #C0C0C0;
margin:auto;
padding:0;
text-align:left;
width: 730px;
background-color:white;
}
#main {
padding: 0px;
margin: 0px;
text-align: center;
}

body {
margin: 0;
padding-top: 0;
background-image: url('image/abc.jpg');
background-repeat: repeat-y;
}

＝＝＝ここまで＝＝＝
maintableの括弧が閉じてないからかな？

995×390 => 250×97

test.JPG/41KB

■1730 / inTopicNo.5)

　Re[4]: ブラウザの上部余白をとりたい

▲▼■

□投稿者/ navi 一般人(3回)-(2007/09/14(Fri) 12:46:32)

お返事ありがとうございます。返信がおそくなりました。

当方、IEはバージョン７です。
素人なのでよくわからないのですが、今からIEの６ってどこかで
ダウンロードできるのでしょうか？（関係のない質問ですみません）
たしかにバージョン６もあるといろいろ確かめられてべんりですよね。
IE６では余白が出ないのですか・・・

お返事いただいた中で、
maintableのところの括弧については、私の転記ミスで、
もともとのｃｓｓソースの中にはちゃんと括弧がとじてありました。
すみません。

あちこち調べているうちに
いちばん大きなdiv=mainに、マイナスのマージンをとってはどうかなと
いうことで、
margin: -20px
と指定したところ、IE７で確認すると画像を入れたレイアウトテーブルが
ブラウザの一番上まできました。

我流なので、よくわからないのですが。
これで私の中ではなんとかできたということで、これでもありでしょうか・・・

お返事いただいたみなさん、どうもありがとうございました。
また何かあったらよろしくお願いいたします。