CSSが反映されなくて困っています。

質問

iframeを使ってhtmlファイルのdiv要素を表示しようとしていますが表示すると
iframeの左端に意図しないスペースができてしまい困っています。

"IEの要素を検証"でデバッグしながら検証しているのですが、
レイアウトを見るとOffsetが60となっています。

"IEの要素を検証"を使いdiv要素のスタイルを指定しているwidthを変更すると
IE上でスペースが小さくなっていくのが確認できるので、
その通りにCSSファイルの中身を書き換えるのですが、
何故か反映されず困っています。
ブラウザのキャッシュはクリアしています。

div要素のクラス以外で考えてみる必要のある項目が有るのかとも思うのですが、
何かアドバイス頂けませんでしょうか？

下記ソースです。
HTML（覗く側）--------------------------------------------------------------------

<IFRAME src="xxx/index.html"
name="Topページメイン画像" width="900px" height="550px"
frameborder="0" scrolling="no">
ブラウザがインラインフレームに対応していません。
表示される文章はこちらです。
</IFRAME>

HTML(index.html)覗かれる側----------------------------------------------------------
<div class="fallback-message">
<img src="top2.jpg" width="900px"></img>
</div>
----------------------------------------------------------------------------------

CSS------------------------------------------------------------------------------
.fallback-message {
width: 818px;
line-height: 0;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-family: sans-serif;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-top-color: #e4c652;
border-right-color: #e4c652;
border-bottom-color: #e4c652;
border-left-color: #e4c652;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
background-image: none;
background-attachment: scroll;
background-repeat: repeat;
background-position-x: 0%;
background-position-y: 0%;
background-color: rgb(238, 220, 148);
}

----------------------------------------------------------------------------------

何卒お願いいたします。

回答No.2

font_color

はじめまして。

おそらくbodyのデフォルトのマージンとパディングではないかと思います。

覗かれる側HTML(index.html)のスタイルシートに

html,body{
padding:0;
margin:0;
}

と追加してみてください。

ちなみに
<img src="top2.jpg" width="900px"></img>
の部分ですが・・
imgは単独タグなので終了タグは必要ないかと思います。

子要素であるimgが親要素の.fallback-messageの幅より大きいのも気になりますが・・

回答No.1

ORUKA1951

単純に画像だけを表示するために、わざわざiframeを使用するのですか？
必然的に非推奨なtransitinalを使わなくてはならなくなる。transitinalは、ブラウザ間の誤差が大きい。(特にIE)
　⇒HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )

CSSは、それぞれのHTMLに有効でiframeで埋め込まれるHTMLには利きません。埋め込まれるHTMLに記述しなければなりません。

なぜ、1行ですむ指定を何行にも分けるのですか？
.fallback-message {
width: 818px;
line-height: 0;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-family: sans-serif;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-top-color: #e4c652;
border-right-color: #e4c652;
border-bottom-color: #e4c652;
border-left-color: #e4c652;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
background-image: none;
background-attachment: scroll;
background-repeat: repeat;
background-position-x: 0%;
background-position-y: 0%;
background-color: rgb(238, 220, 148);
}
は・・・・
div.fallback-message {/* 基点となるセレクタを書く癖を */
width: 818px;
margin:0;
background-color: rgb(238, 220, 148);
}

と同じですけど・・・