以下のページをInternetExplorerで開くと「DTPニュース…」とか書いてある帯の上に白い空白が開いてしまいます。


http://blog.ddc.co.jp/mt/dtp/

FireFoxやSafariでは白くあいてしまいます。
スタイルシートで「bodyのmarginも0px;」にしているつもりですがなぜ白くあいてしまうのでしょうか。なにかDIVなどの設定がおかしいのでしょうか。

解決策を教えてください。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/09/22 11:05:49
  • 終了:--

回答(5件)

id:hnd_info No.1

hnd_info回答回数329ベストアンサー獲得回数22005/09/22 11:45:44

ポイント20pt

http://blog.ddc.co.jp/mt/dtp/

DTPサポート情報

<body>


<div id=”container”> ← これは何ですか? これを取ってみて下さい。


<div id=”topbar” style=”background-color: #DDEEFF;margin:0px 1px;padding:2px 20px;border-top:1px #0099FF solid;border-bottom:1px #0099FF solid;font-size:x-small;font-weight:bold;”>

<p align=”right” style=”margin:0px;”>

<a href=”http://www.ddc.co.jp/dtpnews/”>DTPニュース</a> |

id:jdash

外しても直りませんでした…。(</div>も取りました)

#<div id=”container”>はMovableTypeのデフォルトテンプレートにあったと思います。

Six Apart - Movable Type: デフォルト・テンプレート

http://www.sixapart.jp/movabletype/default_tmpl.html#main-in...

2005/09/22 12:38:05
id:pasosavi No.2

pasosavi回答回数761ベストアンサー獲得回数282005/09/22 11:52:01

ポイント10pt

仕様、かもしれませんね…


> 「DTPニュース…」とか書いてある帯

これを一番上でなく、ロゴの下に置いたらどうでしょう?

テーブルで仕切って詰めたら一発のような


※でなければそのままテーブルに載せてしまうか

id:jdash

んー、テーブルですか。帯の部分だけならちょっとやってみたんですけどねぇ。なんかあいちゃうんですよね。

全部をテーブルで囲うってのはまだやってないのですけど、何かイヤです(ゴメンなさい)。

2005/09/22 12:44:00
id:cinZano No.3

cinZano回答回数186ベストアンサー獲得回数52005/09/22 11:56:36

ポイント10pt

http://css.uka-p.com/reference_margin.shtml

CSS簡易リファレンス − 余白関連

body{padding:0px;}を足してみてください。

id:jdash

ダメでした。原理的にはOKなはずなんですけどね。

ちなみにCSSではすべてのオブジェクトの余白は0にリセットしてあります。

* {

margin: 0;

padding: 0;

font-style: normal;

}

2005/09/22 12:48:11
id:junjun777 No.4

水無回答回数15ベストアンサー獲得回数02005/09/22 13:40:58

ポイント40pt

http://www.tohoho-web.com/wwwxx005.htm

文字化けしないようにするには

文字化け対策でしょうか?

回答者1さんが書かれた18行目あたりの「<DIV id=container>」タグの後ろに

0xFEFFの非表示文字が居ます。

IEはこれを無理やり表示して一行使い、Firefox等は無視しているためのようです。

非表示文字をHTMLコメントでくくってやると、余白はなくなると思います。

(ローカルでは確認済み)

id:jdash

Firefoxのソース表示では文字なんかない…と思ってInternetExplorerのソース表示で見たら確かにありますね。なんだこりゃ…。

実は<DIV id=”containe”>のあとの問題の帯の部分は

<$MTInclude file=”●●”$>

というMovableTypeのタグで他のファイルを差し込んでいたのですが、この差し込んでいたファイルの文字コードが不適切な文字コードだったために「0xFEFF」が入ってしまったようです。

調べてみたらUTF-8で保存していると0xFEFF(=BOM)が入ってしまい、UTF-8N(=BOMなしのUnicodeファイル)で保存すれば問題はない、というようですね。差し込むファイルをUTF-8Nで保存して再構築をしたら空きがなくなりました!

すばらしい! ありがとうございました!

【参考】

Windows 2000上でのUTF-8のページの作り方

http://homepage2.nifty.com/hobbit/html/utf8.html#bom

2005/09/22 14:33:46
id:mj99 No.5

mj99回答回数138ベストアンサー獲得回数382005/09/22 13:47:47

ポイント20pt

http://www.hatena.ne.jp/1127354749#

人力検索はてな - 以下のページをInternetExplorerで開くと「DTPニュース…」とか書いてある帯の上に白い空白が開いてしまいます。 http://blog.ddc.co.jp/mt/dtp/ FireFoxやSafariでは白く..

25行目付近の


<div id=”topbar”


の先頭の空白を削除してください。なにか変な文字です。


あと1100行目付近にDIV閉じがひとつ多いです。

id:jdash

前の回答と同じBOMってやつですね。

ありがとうございました。

2005/09/22 14:34:20
  • id:junjun777
    回答者1.の方、ごめんなさい。自らの未熟さを表明

    1.おそらく回答者1.さんは同じことを言っている
      →それに気づかない自分に反省、、、。
    2.UTF-8のBOMに考えが至っていない(そもそもUTF-8と気づいてない)
      →文字コードに注意するのは、基本ですね、、、。あさはか。
    3.回答1.のコメントで、インクルードを考慮すべき
      →質問者さんのコメントはよく読みましょう。
       ここまで考えれば、インクルード元ファイルのBOMに気づいていたはず、、、。

    結果は良かったものの、完全な失敗回答ですね、、、。反省。
  • id:jdash
    Re:回答者1.の方、ごめんなさい。自らの未熟さを表明

    質問者です。

    >1.おそらく回答者1.さんは同じことを言っている
    >  →それに気づかない自分に反省、、、。

    というか回答者1.さん(id:hnd_infoさん)の回答が実は大正解だと後で気がついたのですが、回答いただいたとき、矢印の左側に何かがあるということをよく理解できませんでした。すみません。

    >2.UTF-8のBOMに考えが至っていない(そもそもUTF-8と気づいてない)
    >  →文字コードに注意するのは、基本ですね、、、。あさはか。
    >3.回答1.のコメントで、インクルードを考慮すべき
    >  →質問者さんのコメントはよく読みましょう。
    >   ここまで考えれば、インクルード元ファイルのBOMに気づいていたはず、、、。
    >
    >結果は良かったものの、完全な失敗回答ですね、、、。反省。

    質問時の情報が少なかったのは申し訳ありませんでした(それも質問文の「FireFoxやSafariでは白くあいてしまいます。」は「FireFoxやSafariでは白くあいていません。」が正しいし…<をい)。
    回答者1.さんだけの情報だけではBOMまでは至らなかったのでBOMを教えていただいて感謝しています。BOMは実は知らなかったので(私の業界でBOMといったらBSD on Mac(だったかな))勉強になりました。

    ありがとうございました。
  • id:hnd_info
    Re:回答者1.の方、ごめんなさい。自らの未熟さを表明

    >結果は良かったものの、完全な失敗回答ですね、、、。反省。

    私の回答では分かりにくかったと思います。
    それを分かりやすく回答されていますから、優良な回答だったと思います。
    お気遣いしていただいて、ありがとうございました。
  • id:jdash
    DIVがひとつ多い件

    id:mj99さん、DIVが多いという件のご指摘ありがとうございました。

    どうもDIVだらけでどこがどう対応しているのかわからなかったのですが、FrontPage2003のタグビューにある「タグの選択」の機能できちんとタグが閉じているかどうかがわかるということに気がつきました。

    質問とは別件でしたがありがとうございます。

この質問への反応(ブックマークコメント)

トラックバック

  • SafariでAjax利用時に文字化けする問題 Uno, dos, tres, quatro! 2006-09-21 18:54:21
    Hot entryがSafariで文字化けしていたのをやっと修正。かなり基本っぽいですが、tipsが各サイトに分散してたのでまとめ。** Safariが文字化けする状況- XMLHttpRequestで取ってくる値に日本語が含ま
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません