divで囲んだ文字が消える

質問

外枠をtableで作った中に、<div>で囲んだ部分をいくつか作り、その中にそれぞれ文字を書き込んでいます。
形は大まかに説明すると、左側に大きな<div>、その右側に縦3段で<div>がある状態です。

左側の<div>内にインラインフレームを入れたところ、右側の縦3段のうち、下2段の書き込み文字が見えなくなってしまいます。
文字がある場所をマウスでなぞると、文字が現れます。
更新すると、また文字は見えなくなります。

なぜ、文字が消えてしまうのでしょうか。
インラインフレームがどうやら問題を引き起こしているようですが、対処方法がわかりません。
直し方を教えてください。
よろしくおねがいします。

回答No.4

leap_day · ベストアンサー

こんにちは

ソースを試してみましたが今のところ分かったのは
<div style="float:right;>
の右側の『"』が無いので画像が表示されていないということだけですね（－－；）
文字は表示されていました

すみませんが
class="waku"
class="moji"
のCSSもお願いできますか？
画像は出てて文字だけ出ていないのであればclass="moji"の記述がどこかおかしいのかな？

あとポップアップがあるということなのですがjavascriptを使用しています？
それかhtmlファイルをクリックして表示させています？

お礼

返事が遅くなってすみません。
アドバイスありがとうございます。
自分なりにどうにかならないか試行錯誤した結果、どうにか表示されるようになりました。

ポップアップの件ですが、iframeで入れているスライドショーがjavascriptで動かしているものです。
ポップアップＯＫで突然文字が消えていたので、javascriptがなんらかの原因のようです。

それと、３段目のところで、<div style="clear:both;"></div>を一個とり、最後の<div style="clear:both;"></div>のところで、spacerのようなものをheight="1px"で入れたら、なんとなく安定しました。
【最初】
<!--右側3段目-->
<div class="waku">
<div style="float:right;><img src="photo.jpg"></div>
<div class="moji">○○○○</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>

【修正後】
<!--右側3段目-->
<div class="waku">
<div style="float:right;><img src="photo.jpg"></div>
<div class="moji">○○○○</div>
</div>
<div style="clear:both;"><img src="base/spacer.gif" width="190" height="1"></div>

試行錯誤なので、どうしてなのかよく分かりませんが、とりあえず、これはどうにかなりました。

しかし、今度はその隣に設定していたiframeの枠が消えるようになり、ひとつ解決してはひとつ問題が発生するという感じです。

回答No.5

air_grow

使用しているブラウザは、何でしょうか？
もしそれがIE6なら、文字が消えているdiv要素に

<style type="text/css">
*html #hoge {
height:1%;
}
</style>
<div id="hoge">・・・・・</div>

のように、idを指定して、上記のようにしてみてください。
IE6では、div要素内の文字が消えるバグがたまにあります。

お礼

アドバイスありがとうございます。
正にIE6です。これバグなんですか。
消えたり現れたり、一定でないところがまた難しいです。

回答No.3

myeyesonly

また失礼します。m(__)m

スタイルシートの「float」の使い方がちょっと変な感じがします。
<div>に入れないで、img タグの中に入れるべきじゃないかと思いますが。
こんな感じでしょうか。

<img src="xxx.jpg" style="float:right;">

それで、img タグについてる <div>、</div>は取った方がいいかもしれません。
でないと、img タグについてる div のスタイルシートの適用範囲がおかしくなっちゃう気がします。

お礼

返事が遅くなってすみません。

分りにくくなるかなと思って、細かい情報は省いちゃったんですが、<img>の前の<div>はfloatとpaddingのために入れていました。取ってしまうと、配置が良くないので入れてます。

すこし、細かすぎるのかもしれませんね。

アドバイスありがとうございます。

回答No.2

leap_day

こんにちは

こういう感じ？

<table>
<tr>
<td rowspan="3">
iframe表示<p>
<iframe src="test1.html"></iframe>
</td>
<td>コンテンツ１</td>
</tr><tr>
<td>コンテンツ２</td>
</tr><tr>
<td>コンテンツ３</td>
</tr>
</table>

もしくは

<div style="width:510px">
<div style="float:left;width:300px;"><iframe src="test1.html"></iframe></div>
<div style="float:right;width:200px;height:200px;">コンテンツ１</div>
<div style="clear:right;"></div>
<div style="float:right;width:200px;">コンテンツ２</div>
<div style="clear:right;"></div>
<div style="float:right;width:200px;">コンテンツ３</div>
<div style="clear:right;"></div>
</div>

どちらも症状は出ないようですがソースを一部抜粋で提示されると何か情報が得られるかも？

お礼

すみません。上の補足に付けたしです。
右側2,3段目の<div class="moji">○○○○</div> の○○○のところが消えます。
この文字を太字にすると現れます。
<div style="float:right;><img src="photo.jpg"></div>の写真を取っても現れます。

文法的にめちゃくちゃだったらすみません。

補足

分りにくい説明ですみません。
前にdivで作ったらブラウザによって形がめちゃくちゃになったので、tableで外枠を作ったのです。
下記のような感じです。
文字が消える事態は、エクスプローラーのみに発生し、セキュリティのポップアップをＯＫすると消えるようです。
よろしくおねがいします。

<table>
<tr >
<td colspan="2">
<iframe src="slide.html">スライドを表示</iframe>
</td>
</tr>

<tr>
<td>
<iframe src="a.html" scrolling="no" frameborder="0">左側</iframe></td>

<td>
<!--右側1段目-->
<div class="waku">
<div class="moji">○○○○</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
<!--右側2段目-->
<div class="waku">
<div style="float:right;><img src="photo.jpg"></div>
<div class="moji">○○○○</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
<!--右側3段目-->
<div class="waku">
<div style="float:right;><img src="photo.jpg"></div>
<div class="moji">○○○○</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</td>
</tr>
</table>

回答No.1

myeyesonly

こんにちは。
table の使い方間違えてませんか？

<table border=1>
<tr>
<td rowspan=3>
<iframe></iframe>
</td>
<td>
あいうえお
</td>
</tr>

<tr>
<td>
かきくけこ
</td>
</tr>
<tr>
<td>
さしすせそ
</td>
</tr>
</table>

だとうまくいくみたいですけど。
何で div が出てくるのか意味が判りませんが・・・？