現在Dreamweaver8でサイトを作成中の初心者です。
画像を縦に並べて表示したいのですが、<br>のタグを入れてないところはIE6,7だと隙間なく表示されるのですが、Firefoxだとどうも隙間が出来てしまいます。
ネットや本で自分なりに調べて試したつもりですが、どうにも解決できませんので、お手数ですがどなたかご協力頂けますようよろしくお願いいたします。
参考までにhtmlとcssです。
html部分
<div id="sidenavi">
<p><a href="jjj/index.html"><img src="image/xxx.jpg" width="245" height="79" border="0"></a></p>
<p><a href="jjj/index.html"><img src="image/yyy.jpg" width="245" height="79" border="0"></a></p>
<br>
<p><img src="image/zzz.jpg" width="245" height="40"></p>
<p><img src="image/aaa.jpg" width="245" height="80"></p><br>
<p><img src="image/aaa.jpg" width="245" height="106"></p>
</div>
css部分
#contents #sidenavi {
padding: 0px;
height: 450px;
width: 245px;
float: right;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
#sidenavi p {
margin-top : 0;
margin-bottom : 0;
padding-top: 0px;
}
No.1ベストアンサー
- 回答日時:
DOCTYPE宣言はどうなっていますか?それにより、標準準拠・後方互換モードが切り替わります。
本件の場合、Firefox(ver.2/3)での挙動を検証してみたところ:
・HTML 4.01 Transitional(システム識別子付)では隙間はできない
・HTML 4.01 Strict(システム識別子付)では隙間はできる
ですので、モードによってこの部分のCSSの解釈には差が出る様です。
下記にどの条件の時にどのモードになるかが一覧にまとめられたお役立ちのサイトがありますので、参考までに。
【参考】http://2xup.org/log/2007/07/27-2111
ただ、質問者様が現在のDOCTYPEを選択されているのには理由がお有りでしょうから(DOCTYPEによってHTMLの書き方も変えなければならない場合がありますから)、DOCTYPEだけをすげ替えれば良いというものではありませんので、その点は誤解されません様に。
もし、pの子要素が質問文のソースの様に、画像しかない(テキストがない)のであれば、一例として、#sidenavi p {~}にline-height: 0;を追加指定する事でいずれのモードでもFirefoxでの隙間を解消する事ができます。
ちなみに、p(段落:ブロック要素、前後に改行を含む)とpの間を空ける為に<br>(インライン内容の強制改行)を使うというのは本末転倒ですので、一行空きにしたいpにclass属性を設けて、classセレクタで下マージンを設定してあげる方が適切です。
#sidenavi p.hoge {
margin-bottom: 1em;
}
<p class="hoge"><a href="jjj/index.html"><img src="image/yyy.jpg" width="245" height="79" border="0"></a></p>
という感じで。
abril様
いつも丁寧で親切な回答を頂き、本当に有難うございます。
#sidenavi p {~}にline-height: 0;を追加したら無事解決しました。
その他頂きました情報を活かし、さらに勉強していきます。
本当に有難うございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLタグのDL DT DDを使ってli...
-
画像の横に文字をうまく配置で...
-
画像と背景色の幅が合わない
-
フレームを使わずに右側だけを...
-
画像を縦に並べたら隙間ができ...
-
ホームページで縦と横の写真を...
-
複数の画像を連動してロールオ...
-
imgとpを縦・横に中央揃えする
-
cssで画像を均等に配置する方法...
-
フォームのボタンをsubmitから...
-
クリッカブルマップで画像と画...
-
マウスをのせた時に画像の色を...
-
html オンマウスで変化する画...
-
position relativeの位置について
-
複数の画像を横にスクロールさ...
-
リンクを知らせる手のマークが...
-
画像をクリックしてラジオボタ...
-
CSS実装されない
-
ブラウザ別の余白誤差って解消...
-
画像と同じCSSデザインにしたい...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
ポップアップウィンドウのサイ...
-
画像のサイズが変わらない
-
【HTML/CSS】ボタンの枠が伸び...
-
画像の場合のみ、下線を消す方...
-
cssで、チェックボックスの画像...
-
HTMLのIMAGEに。。
-
XML画像データををHTMLで簡単に...
-
画像の横に文字をうまく配置で...
-
table で画像をピッタリとくっ...
-
画像をリンクさせると紫の枠が...
-
レスポンシブ対応のHTML・CSS(...
-
3つの画像を中央に寄せて表示さ...
-
UDP通信を使うチャットプログラ...
-
水面の波紋
-
cssヘッダー画像の下に配置した...
-
画像とテーブルの隙間をなくす。
-
HTMLは、シングルクォートかダ...
おすすめ情報