CSSテクニックコミュのネスケで画像が文字に重なる。

以前もこちらで質問させて頂き、たいへん勉強になりました。
本当にありがとうございます。

DIVで囲んだブロックの中に、
画像を左側にフロートさせ、右側に文字を流してレイアウトしています。
IE（win/mac共）でも、Firefoxでもネスケ（7.0）でも
上記のように表示されるのですが、
今回、情報を頂いている美術館さんに見てもらったところ、
> 各美術館の絵と文字が重なっていて、何が載っているのかわからない
とのご指摘を受けました。。。

先方のバージョンは分からないのですが、
ネスケで見ているそうです。

こちらの方で旧バージョンのネスケなど持ってなくて確認できず、
またなぜ重なってしまうのか分からなくて、
困っています。。。。

ソースは以下のとおりです。

HTML
/////////////////////
<div class="msel">
<p><img src="kpo.jpg" width="120" height="170" border="0"><a href="kpo/051023.htm">キリンアート</a></p>
<p>2005～</p>
<p>ＫＰＯ</p>
<p>大阪府</p>
</div>
<div class="msel">
※上記と同じ
</div>

CSS
/////////////////////
/* msel index */
.msel {
float: left;
width: 320px;
padding: 7px;
vertical-align: top;
height: 190px;
background-color: #D7E1DF;
margin: 3px;
}

.msel p {
margin: 0 0 5px 0;
border-bottom: 1px dotted #FFFFFF;
}

.msel img {
float: left;
margin-right: 15px;
}

/////////////////

また、以前にもmac IE4.0で文字が小さすぎて見えない、と指摘されたことがあり、
旧バージョンを持ってなくて確認できず、困ってしまいました。。

旧バージョンのブラウザをどこかでダウンロードできないでしょうか？
探したのですが、見つからなかったのです・・。

どなたか教えていただけるとうれしいです。
よろしくお願いいたします。

コメント(25)

最初
全て
最新の40件

[1] mixiユーザー 09月05日 14:31

googleで検索してみたらこんなのが出てきましたがどうでしょう
http://wp.netscape.com/ja/download/download_comm.html

[2] mixiユーザー 09月05日 14:31

http://sillydog.org/narchive/

このへんからダウンロードできるかと思います。

[3] mixiユーザー 09月05日 14:32

ネスケの旧バージョンは、ここでしょうか

http://browser.netscape.com/ns8/download/archive.jsp

[4] mixiユーザー 09月05日 14:52

早速のご返答ありがとうございます！
私、全然見つけれなかったのに、こんなに・・（泣）

ネスケの4入れてみました！
（ブラウザ周りが全部英語バージョンだぁ・・）

すると、見事に全部重なってました・・・。
こ、こわい・・・。

<h2><a name="kinki"></a>近畿</h2>
<div class="msel"> 　 </div>
という風に地区ごとにｈ２を入れ、
地区の美術館をdivでくくってたのですが、
そのｈ２の下に全部重なってしまいました。。
フロートが全くきいてません・・

うーん、うーーーん・・どうしよう。。
やはりテーブルレイアウトの方が無難なのでしょうか・・。
（後ろ向きな考えだな。。。。）

[5] mixiユーザー 09月05日 14:54

NN4.7では<body>や<td>タグへの「line-height」指定を削除すると重ならないと思います。もし指定してあったらそれかもしれません。

[6] mixiユーザー 09月05日 15:42

NN4系も（見た目的に）サポートするなら、スタイルシートはあきらめた方がいいのでは？もしくは、
<link rel="stylesheet" type="text/css" src="foo.css" media="screen,print">

としてしまのが、もはや一般的だとは思うのですが。

[7] mixiユーザー 09月05日 16:08

NN4.7はマイナーなブラウザだってことを
美術館の方はご存知なんでしょうか？
環境の事情で使わざるを得ないなら
考えてあげないといけませんが、

今の主流になっているブラウザは何かを教えてあげて
その上でどこまでのブラウザに対応させるかを相談の上で
決めて作ったほうがいいと思いますよ。

[8] mixiユーザー 09月05日 17:33

まるちさん
「line-height」指定してました。
でも削除しても同じく重なってしまいました。。くすん・・

hirokiさん
やはり4.0用にmedia属性使った方がいいですよね。
実際自分が4.0で表示を確認していなかったからというのもあるけど、
よくバグの対処法わからなくて、苦手で避けてしまいました・・。
こんなことじゃだめですね＾＾；；　
一度ちゃんとやってみます！

さとさん
「IEも入ってるけど、国（行政？なんかそんな感じのトコ）から
ネスケを使うように指示されているそうです。
結構古い体質そうなので、美術館さんの体制を変えることはできないと思います。。
んーー、でも広くちゃんと見れるようにページを作らないとだめですよね。。

はぁ、4.0なんて・・。　と思いつつ・・。
今回も反省することいっぱいです。

なんとか見えるようにやってみます！

[9] mixiユーザー 09月05日 17:41

ネスケの旧バージョンのダウンロード情報、ほんとに助かりました。
あと、どなたかIEの旧バージョン（4とか5）のダウンロードご存知じゃないでしょうか？
私じゃやはり探せませんでした・・。

教えていただけるとほんとに嬉しいです。

[10] mixiユーザー 09月05日 17:42

http://www.quirksmode.org/browsers/multipleie.html
こちらとかどうですか？

[11] mixiユーザー 09月05日 17:47

私も初心者であまりお力になれませんが、私が過去に助けられた本です。
これで一気に解決したことがありました。

http://www.amazon.co.jp/exec/obidos/ASIN/4844356828/qid%3D1125909567/250-2495848-9893866

ここも参考になるかも。

http://www.keynavi.net/ja/bugh/index.html

応援してます！

[12] mixiユーザー 09月05日 18:40

わかっこさん
おぉ！すごい！　IEの旧バージョンがずらり！
助かりました！　ありがとうございます！

まるちさん
この本、私も好きです。
イメージツールバーの非表示とか、「おぉ！」って思いました。
といっても図書館で借りたのですが＾＾；
もう一回借りて読み直します！
あとサイトのご紹介ありがとうございます！
すごい見やすいしよさげなサイトですね。
早速お気に入り入れました！
応援ありがとうございます（泣）！

[13] mixiユーザー 09月05日 18:47

結局、
<link href="stylemsel.css" rel="stylesheet" type="text/css">
という指定に、
<link href="stylemsel.css" rel="stylesheet" type="text/css" media="all">
media="all"と指定しました。

するとネスケ4ではCSSの適用をはずしてくれました。（左図）
IEやCSSがきくブラウザでは右図のように表示されているものです。

とりあえずは、画像とテキストの重なりは解消されたので、
一度これで見てもらいます。
でも、、旧ブラウザなんて・・（ぐすん・・）
これからは、もっと色々気をつけるよう心がけますっ＾＾；

[14] mixiユーザー 09月05日 18:56

自分も試してみました
左がNN4.08　右がIE6

いろいろ駆使してみたもののなんか中間に間が･･･
テーブル使わずにこういうレイアウトをNN4に対応させるってむずかしいですね

[15] mixiユーザー 09月05日 19:31

爽健美さん
左のNN4.08でもちゃんとフロートが効いてる!!
中間に間ができてもちゃんと読めるし！
どうやってなさったんですか？？

[16] mixiユーザー 09月05日 19:37

media属性でネスケ4をはずしただけだと、
今度はIE４では上の画像のように、
フロートがもう一つ外側のブロックよりあふれて見えなくなってしまいました。。

なので、
<link href="import.css" rel="stylesheet" type="text/css" media="all">
で、import.cssを読み込んで、
そこに　@import "stylemsel.css";
と書くことで、IE４もＣＳＳからはずしました。

ふぅ。。。。。　旧バージョンって。。

皆さん、どのぐらいのブラウザまで見てらっしゃいますか？

[17] mixiユーザー 09月05日 20:41

内容ぐだぐだですが全部いきますね

/* 共通スタイルシート */
.msel {
float: left;
margin: 0;
padding: 0;
width: 320px;
height: 184px;
background-color: #D7E1DF;
}
.mselimg {
float: left;
padding: 7px;
height: 184px;
width: 134px;
}

.mselmsg {
margin:7px 7px 0 7px;
padding:0;
border-bottom:1px dotted #FFF;
background-color: #D7E1DF;
}
.mselbr {
clear: both;
}

/* media="all"で読み込むスタイルシート */
.msel {
border: 3px solid #FFF;
}
.mselmsg img {
display: none;
}

[18] mixiユーザー 09月05日 20:51

/* HTMLソース */

<div class="msel">
<div class="mselimg"><img src="image.gif" width="120" height="170" border="0"></div>
<div class="mselmsg"><a href="kpo/051023.htm">キリンアート</a><br><img src="border.gif" width="150" height="1"></div>
<div class="mselmsg">2005～<br><img src="border.gif" width="150" height="1"></div>
<div class="mselmsg">ＫＰＯ<br><img src="border.gif" width="150" height="1"></div>
<div class="mselmsg">大阪府<br><img src="border.gif" width="150" height="1"></div>
</div>

<div class="msel">
同上
</div>

<br class="mselbr">

<div class="msel">
同上
</div>

<div class="msel">
同上
</div>

[19] mixiユーザー 09月05日 21:00

borderスタイルdottedをNN4上で現すために150*1の透過gifを使ってます
自分はまだまだcssの仕様とかを理解しきれてない部分も多いんで
使い方を間違ってたりするかもです

あとWinでのみでしか確認できないのでMacでも確認したほうがよさげです（汗

全体的にまとまりはしたものの全部を同じように表現すると考えるとちと厳しいなぁと思ったのが今回やってみて思いました

[20] mixiユーザー 09月06日 19:53

爽健美さん
詳しいソース本当にありがとうございますっ

その通り試してみたところ、IEだとその通り表示されるのですが（左図）、
ネスケ7.0（win）だと画像のようにwidthが効いていませんでした（右図）。
全く同じソースなのに。。

それにやはりこのやり方だと、見栄えのためのソースが増えてしまうし。

あと、
/* media="all"で読み込むスタイルシート */
.msel {
}
.mselmsg img {
display: none;
}
ってどこに記述すればいいんでしょうか？
私は<link href="import.css"　media="all"> で、import.cssを読み込んだのですが、
これはメインで使うcssを読みこむために
@import "stylemsel.css";
ぐらいしか書いてなかったのですが、ここに記述すればいいんでしょうか？
よく分かってなくてすいません。。

でも、
.mselbr { clear: both;}　でbrにもＣＳＳ使えて、
しかもそれをフロートの解除に使うって
すごく新発見でした！

[21] mixiユーザー 09月06日 22:29

説明不足でしたね･･･
media="all"で読み込むのは他のcssを用意し
HTML上で別々に呼び出します

<link rel="stylesheet" type="text/css" href="stylemsel.css">
<link rel="stylesheet" type="text/css" href="excnn4.css" media="all">

のような２行になります

NN7台は7.1のみの確認だったので7.0をDLして確認してみましたが
特に変わりはないようでした

ソース容量削減ということなら、文字を記述する４行
<div class="mselmsg">～～</div>
<div class="mselmsg">～～</div>
<div class="mselmsg">～～</div>
<div class="mselmsg">～～</div>
のところを全て
<div class="mselmsg">
<div>～～</div>
<div>～～</div>
<div>～～</div>
<div>～～</div>
</div>
と変更し、共通スタイルシート側の
.mselmsg {
ここを
.mselmsg div {
に変える

あと妥協策になりますが
NN4では点線を表示しないということにしてHTMLソース上から
<br><img src="border.gif" width="150" height="1">
部分を全て削除して
media="all"で読み込むスタイルシートの
.mselmsg img {
display: none;
}
を削除する

更にレイアウトが多少広がってしまってもかまわない
という妥協策ならば、（上記の手順をやった上で）
cssを呼び出す記述を
<link rel="stylesheet" type="text/css" href="stylemsel.css">
の１行のみでmedia="all"の呼び出しは削除
media="all"で読み込むはずだった要素である

border: 3px solid #FFF;

を、共通スタイルシートと題していたstylemsel.cssの

.msel {
}
内に記述

など、妥協策も含みますがいろいろできそうな感じはします

[22] mixiユーザー 09月08日 01:19

さらに詳しくありがとうございますっ
私のリンクの書き方がおかしくて、同じにならなかったのか＾＾；
ネスケ4.0をCSSからはずすのじゃなくて、
4.0でも同じに見えるように考えてくださったんですものね。
まだまだブラウザ対策とか全然理解しきれてなくて。。
ほんの少しづつでもこれから分かっていきたいです。

いろいろ案考えてくださってありがとうです。
ソースを簡潔にするためなら、
点線ぐらいの見栄えは気にしません。
また試してみますっ
ほんとにありがとうです！

[23] mixiユーザー 09月08日 04:07

なんだかんだで自分もこのトピックをきっかけにNN4とかIE4に
初めて手をつけたので、いろいろ試せて勉強になりました
こちらこそありがとうございます

[24] mixiユーザー 09月09日 01:09

いえいえこちらこそ本当にありがとです。
これからもお互いがんばりましょうね☆

[25] mixiユーザー 09月09日 19:36

何度もすいません。。
自分でもかなり情けなくなるのですが、
またレイアウトが崩れていました。。

win　ＩＥ６・ＩＥ５　firefox　ネスケ
mac　サファリ
すべてレイアウトは崩れず表示してくれるのですが、
mac　IE5.XXだと崩れてしまうのです。。
左の画像のようになります。
mselの要素が終わったら、そのすぐ後にまた次のmselが始まります。。
これはたぶんボックスの幅が効いてないんじゃないかな、って思います。
mselの背景色も消えているし。

以前、/*\*/height:1%;/**/
という裏技でボックスのバグが解決されることがある、と聞いたことがあったので試してみたのですが、
図右のように内容がheight:190pxに満たないところは
高さが小さくなります。。

いくら考えてもどうしても分かりません・・。

ほんとに今回自分がすごく情けなくなりました。。。
少しずつだけどCSSを分かってこれたかな、
と思ったけど、全然理解しきれてない。
ほんとに情けない。。。
今度のことで、もっとブラウザをちゃんと見ないとと思いました。

どなたか、何かアドバイス頂ければほんとに助かります。

ログインすると、みんなのコメントがもっと見れるよ