
よろしくおねがいします。
http://www.sonzai.net/test/test.html
参考URL↑
中央に<iframe>を置き、それを囲むようにフレームを設置したいのですが、
下辺だけ微妙に離れてしまいます。
【HTML】
<div id="subnavibar">
<p><img src="images/top/event.png" width="220" height="50" /></p>
<img src="images/top/event.png" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="images/top/event.png" width="10" height="300" />
<p><img src="images/top/event.png" width="220" height="20" /></p>
</div>
【css】
#subnavibar {
width: 240px;
float: left;
background-color: #ffffff;
height: 100%;
}
原因としては、何があるでしょうか?
No.2ベストアンサー
- 回答日時:
> 原因としては、何があるでしょうか?
「img要素の基準線としてbaselineが指定されているから」だそうです。(調べて知りました)
対策は2つあります。
1. 空白文字を取り除く
<div id="subnavibar">
<p><img src="01.gif" width="220" height="50" /></p>
<img src="02.gif" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="02.gif" width="10" height="300" /><p><img src="03.gif" width="220" height="20" /><BR><BR>赤のバーがピッタリとくっつきません。</p>
</div>
2. vertical-align:bottom; を指定する
<style type="text/css">
img,iframe { vertical-align:bottom; }
</style>
Export-Japan Blog » Blog Archive » IEで、画像の下に隙間ができたり、逆に隙間がバラバラだったり
http://www.export-japan.co.jp/blog/2007/06/21/ie …
No.3
- 回答日時:
なぜか改行場所を変えただけで、IE8では引っ付きました。
理由は分かりません。
<DIV id=subnavibar>
<P><IMG src="test.files/01.gif" width=220 height=50></P>
<IMG src="test.files/02.gif" width=10 height=300><IFRAME height=300
src="test.files/a.htm" frameBorder=0 width=200 name=side
scrolling=yes></IFRAME><IMG src="test.files/02.gif" width=10 height=300><P><IMG src="test.files/03.gif" width=220 height=20>
<BR>
No.1
- 回答日時:
Firefoxならくっついてますよ。
<div id="subnavibar">
<img src="01.gif" width="220" height="50"><br>
<div style="clear: both;">
<img src="02.gif" width="10" height="300" style="float: left;">
<iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side" style="float: left;">a.html</iframe>
<img src="02.gif" width="10" height="300" style="float: left;">
</div>
<img src="03.gif" width="220" height="20">
</div>
↑これに変えてみてください
「 /」はXHTMLで作ってないからいらないですよ。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
【HTML/CSS】ボタンの枠が伸び...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
画像とテーブルの隙間をなくす。
-
cssで、チェックボックスの画像...
-
画像の一部を選択した時のみマ...
-
IE7だけに出る謎の空白(CSS)...
-
画像の横に文字をうまく配置で...
-
XML画像データををHTMLで簡単に...
-
html オンマウスで変化する画...
-
HTMLは、シングルクォートかダ...
-
スタイルシートで画像リンク時...
-
リンクをつけた画像をクリック...
-
IEでの”a img”の枠線について
-
プルダウンの選択リストの中に...
-
htmlの文字が縦書きになる
-
含む含まないという概念自体の...
-
複数のボタンを等間隔に、かつ...
-
ulタグやliタグの中でbrタグ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
ホームページのCSSとスパム...
-
機種依存文字、m2(平方メート...
-
サイトのサムネイル取得が出来...
-
アマゾンアファリエイトをカズ...
-
inputタグでサーバにデータを送...
-
固定タグ内の画像サイズの変更
-
ホームページで画像を横に並べ...
-
画像の横に文字をうまく配置で...
-
footerの背景が切れて、背景画...
-
画像をラジオボタンとして使用...
-
スタイルシートで画像を中央に...
-
この解答は合っていますか?
-
【HTML/CSS】ボタンの枠が伸び...
-
xhtmlでの画像サイズ指定につい...
-
CSSの左横に隙間ができてしまい...
-
アイフレームについて
-
html オンマウスで変化する画...
-
プルダウンの選択リストの中に...
おすすめ情報