• ベストアンサー

NetscapeNavigatorでの高さ表示

1×1のスペーサーGIFをTDに入れて、背景に色をつけて 高さ1pxのラインを作っています。 が、IEですと素直に表示されるんですが、NNの場合は CSSのBODYでフォントサイズを指定していると、 たとえTDで高さ指定してあってもそれを無視した表示になります。 これを回避して、指定した高さで表示させる方法はありますでしょうか? 確認したNNはバージョン7.02です。 よろしくお願いします。

  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • Joh_Taka
  • ベストアンサー率76% (222/292)
回答No.2

う~ん・・。 何が原因なんだろう・・。 当方の例では、 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td>あいうえお</td> <td bgcolor="#33ff00"><img src="spacer.gif" border="0"></td> <td>かきくけこ</td> </tr> <tr> <td bgcolor="#33ff00"><img src="spacer.gif" border="0"></td> <td bgcolor="#33ff00"><img src="spacer.gif" border="0"></td> <td bgcolor="#33ff00"><img src="spacer.gif" border="0"></td> </tr> <tr> <td>さしすせそ</td> <td bgcolor="#33ff00"><img src="spacer.gif"></td> <td>たちつてと</td> </tr> <tr> <td bgcolor="#33ff00"><img src="spacer.gif" border="0"></td> <td bgcolor="#33ff00"><img src="spacer.gif" border="0"></td> <td bgcolor="#33ff00"><img src="spacer.gif" border="0"></td> </tr> <tr> <td>なにぬねの</td> <td bgcolor="#33ff00"><img src="spacer.gif" border="0"></td> <td>はひふへほ</td> </tr> </table> これにCSSで body { font-size: いろいろな数値pt } と、やってみましたが、Netscape でも表示に問題ないんですが・・。 この場合、ラインは透過GIF(1pixel×1pixel)に合わせて1pixelの幅となります。 <td> ~ </td> の間を改行していませんよね? ご存じだと思いますが、Netscape の場合、<td> ~ </td> の間を改行してしまうと、キャリッジリターンによってテーブルの表示が崩れてしまいます。 http://www.ep.sci.hokudai.ac.jp/~epnetfan/zagaku/2000/0929/carri.html 上の記述の<table>タグ内の cellspacing="0" は、ともかくとして、cellpadding="0" に指定していますよね? 問題箇所のソースをそのまま載せていただければ、早く解決するのではないかと思いますが・・。 あまり協力出来ずに、すいません。

RYOKUYA
質問者

お礼

今日改めて、書いて頂いたソースをNN7で見てみたところ、 縦ラインは1pxのままなのに、何故か横ラインが 文字サイズと同じ高さで表示されました。 昨日は1px表示出来たのに…何かおこってるんでしょうか… ひょっとして私がダウンロードしたNN7のバグ…?

RYOKUYA
質問者

補足

ご回答ありがとうございます。 書いて頂いたものですと、確かに表示崩れませんね。謎。 <td>~</td>間は改行していません。 cellspacing・cellpadding共に"0"指定しています。 以下のソースでNGです。 <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#3333cc"><img src="spacer.gif" border="0"></td> </tr> <tr> <td>aaaaaaaaaaaaaaaaaaaaaaaaa。<br> aaaaaaaaaaaaaaaaaaaaaaaaaa。</td> </tr> <tr> <td bgcolor="#3333cc"><img src="spacer.gif" border="0"></td> </tr> <tr> <td height="1"><img src="spacer.gif" border="0"></td> </tr> <tr> <td align="center" bgcolor="#c9e7ff"><b>aaaaaaa。</b></td> </tr> </table> </body> スタイルシートは <style type='text/css'> <!-- body{ font-size : 9pt; } --> </style> と指定しています。 自分では見落してる大ボケがどこかにあるのでしょうが… どうぞよろしくお願いします。

その他の回答 (2)

noname#107580
noname#107580
回答No.3

こんにちは! 詳しく調べずに回答するのも気が引けるのですが・・ Joh_TakaさんのサンプルとRYOKUYAさんのサンプルの違いは『あいうえお』(全角)と『aaaa』(半角)ではないでしょうか? RYOKUYAさんのサンプルを『aaaaaあいうaaaaa』としてみて下さい。 同じになると思います。 あと body { font-size : 9pt; } は body,td,th { font-size: 9pt; } にしないと文字の大きさが反映されないような気がしますが・・気のせいでしょうか? どちらにしろ今回の本来の質問の回答にはなっていませんね・・m(_ _)m

RYOKUYA
質問者

お礼

アドバイス有難うございます。 ですが、半角でも全角でも関係ないので下のサンプルを作ったのですが、 「同じになる」とはどこの何が同じになるのでしょうか? 後、body { font-size : 9pt; }はtd,th指定無しでも文字設定は反映されますが?

RYOKUYA
質問者

補足

すみません、この欄をお借りします。 実際にページを作ってアップした後、他でも同じ質問をしました所、 DOCTYPE宣言の記述に問題があった事がわかりました。 どうもお騒がせしました。 OKWebでも個人のページの参考URLの書き込み可でしたら、 皆様にも発見して頂けたかと思います。 というか、ソース全部書いていれば…でも長くなるしと思いまして…(爆) 有難うございました。

noname#9047
noname#9047
回答No.1

1×1のスペーサーGIFそのものに色を付け、 <img src="spacer.gif" width="**" height="1px" alt="spacer"> といった具合に設定してみては? width= のあとは、ピクセルかパーセント表示で。 当方にはネスケの6しかないので確かなところわからないのですが… お役に立てませんでしたら、申し訳ありません。

RYOKUYA
質問者

補足

ご回答有難うございます。 使用例を詳しく書くべきでしたね。 ・テキスト入りの行の上下を細い行で隙間なく挟みたい。 ・あるいは文字の後ろにラインをつけたい。 テーブルを使用してラインを作っているのは、表示サイズを変更されても、 それに合わせて自在に左右サイズが変化するラインが欲しい為なんですが…

関連するQ&A

  • ダウンロードしたテキストを 「メモ帳」 で改行表示するには?

    例えば style.css をアップロードして、 それをまたオンラインからセーブし 「メモ帳」 で開くと 改行が無視され、続けて表示されてしまいます。 つまりこれが body { font-size: 10px; } td { font-size: 16px; } こうなります。 body { font-size: 10px;}td { font-size: 16px;} しかし WordPad で開けばうまく表示されるのですが、 メモ帳でも表示させる方法をご存知でしょうか?

  • テーブルの高さ表示が・・・

    テーブルのセルの高さを<TD>ダグにピクセルで指定したのですが(一行だけです) IEだときちんと表示されるのに、NN(vr6)だと まったく違う高さで表示されてしまいます。 全角スペースを入れてみたり、透明のスペーサーGIF(1×1)をセルに 挿入してみたりしたのですが、まったく直りません。 ちなみに、同セルは幅をピクセル指定をしていますが そちらはきちんと表示されます。 どうしてでしょうか。

    • ベストアンサー
    • HTML
  • NNでスタイルシート(フォント指定)使用

    今まではIEでしかページチェックをしていませんでしたが、やはりNNでもチェックしないと…と思ってチェックしてみたところ ひどいありさまでした…。 そんなにひどいレイアウトの崩れなどはなかったのですが、文字が画像の下(画像はCSSで位置指定)とかに隠れてしまったりとか。 フォントの指定は FONT{COLOR:GRAY; FONT-SIZE:12px;} のようにしているのですが、 NNの[表示]-[テキストの拡大]で大きさが変更できてしまいますよね? これを回避するにはどうしたらいいのでしょうか? IEは5.5 NNは7.0 です。(本当はNNは4.0が欲しかったのですが…) よろしくお願いします。

    • ベストアンサー
    • CSS
  • CSS {font-size:数値px}の指定について

    こんにちわ。 外部CSSにて、以下のような記述を読み込んでいます。 .12 {font-size:12px} 参考書を見た所、IE6とNN7は対応と書いてありました。 WindowsXPSP2にて、IE7で閲覧した所問題ありません。 同環境にて、NN7とFirefox1.5では文字が指定しない場合と 同じ大きさで表示されてしまいました。 指定箇所は、様々でDivやFontに入れても、TableやTDに 指定を行っても表示が全く変わりませんでした。 例:<td class="12">のように 私の指定や記述が間違いなのでしょうか。 %でのフォントサイズは、環境によって拡大縮小が異なると 思い、出来るだけ数値指定で表示をさせたいです。 ご存知の方おりましたら、ご教授頂けると幸いです。

    • ベストアンサー
    • HTML
  • NN4.xで右と下の余白をなくす方法

    BODYのマージンを0、テーブルのWIDTHとHEIGHTを100%で 指定しても、NN4.7だとウィンドウの右と下部分に 余白ができてしまいます。 IEで表示させると、きちんと表示されるのですが。。。 例えば、 <BODY BGCOLOR="#FFFFFF" TEXT="#000000" MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0"> <TABLE WIDTH="100%" HEIGHT="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR> <TD BGCOLOR="#000000"><IMG SRC="spacer.gif" WIDTH="100% HEIGHT="100%"></TD> </TR> </TABLE> </BODY> こんなソースにしたら真っ黒表示になると思うのですが NN4.7だと右と下に白い余白が…。 # ちなみにspacer.gifは透過画像です。 過去ログで同様の質問があったのですが、 そのときの方はBODYの指定と同様にスタイルシートにも BODY{margin : 0;} の指定をしたらうまくいったそうです。 私もやってみましたが、同じでした。 下記サイトは、NN4.7で見てもきちんと右と下の余白が 無く、キレイに表示されているので、できないことは ないと思うのですが、お手上げです。。。 どなたかご教授お願いいたします。 http://www.living-plus.jp/

    • ベストアンサー
    • HTML
  • 背景画像表示について

    CSSでbodyの中にbackground-image で背景を設定したのですが IE以外ではうつっていませんでした。 なので <div style="width : 1300px;      height : 1000px;      top : 1px;      left : 2px;position : absolute;      background-image: url(****.gif);      z-index: 1;      visibility : visible;      " id="pagebody"> としてみましたらIEとGooglechromeはうつるようになりました。が、 firefoxではうつりませんでした。ここで疑問に思ったのが 基本なはずの背景画像にブラウザによって表示が異なるのか、と。 本を読んでもインターネットで調べてもそんなことはないとかいてありました。 僕の記述が間違っているとしか考えられません。 正しい記述を教えてください。 ちなみにCSSは外部内部両方ためしました。 htmlでbodyに背景指定もやってみました。でもやっぱりIEしかうつりませんでした

    • ベストアンサー
    • HTML
  • 背景画像を二つ指定

    こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか? 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }

    • ベストアンサー
    • HTML
  • Operaで背景をリピートさせたくない

    サイトをIE 6/Firefox 2/Opera9で確認をとっているのですが Opera9だけ背景の指定(リピートさせない)がうまくいきません。 H3に背景を指定したいのですが、繰り返してしまいます。 h3 {background:url("h3.gif") no-repeat} h3,h4 {padding:2px 5px;margin:0.5em 0 0.8em;font-weight:bold} CSSは↑こんな感じで書いています。 背景をbodyで指定した場合は、繰り返さないのですが 何が原因なんでしょうか。 ご助言お願いいたします。

    • ベストアンサー
    • CSS
  • NN使用でのCSSでのBORDERについて

    IEで TD.TD1{BORDER-STYLE:SOLID; BORDER-COLOR:CORNFLOWERBLUE; BORDER-WIDTH:1; BACKGROUND-COLOR:ALICEBLUE;} のように指定すれば、細い線で囲まれたものをかくことができますが、NNでは、背景色は有効になっても線が出てきません。 これを有効にするにはどのようにしたらいいのでしょうか? また、IE・NNで表示結果が違うCSSの一覧などが載ってるような便利なサイトがもしあったら教えてください。

    • ベストアンサー
    • CSS
  • 文字をセル下部にぴったりくっつけたい

    お世話になります。 テーブル(の<td></td>)内に入れた文字を、セルの下部ボーダーにぴったりくっつけるように配置したいと思っているのですが、IE6でうまく文字の表示ができません。 その文字には font.●● {font-size:35px; font-weight:bolder; font-family:Verdana; color:#332600; letter-spacing:-2px; } とCSS指定し、またテーブルタグの方には <table cellspacing="0" cellpadding="0"> と <td valign="bottom"> を指定しています。 これで、Firefoxだときちんと表示されるのですが IEだと文字が潰れる、というか上下が欠けたように表示されてしまいます。 ためしに行間指定 line-height:100%; をつけくわえてみたところ、IEでの文字はきちんと表示されるようになったのですが、 テーブル下部のボーダーから浮いてしまい思ったようなレイアウトになりません。 (Firefoxも同様に浮いてしまいます) 文字を欠けなく表示し、また下部ボーダーにぴったりくっつけるやり方がありましたら教えてください。 よろしくお願いいたします。

専門家に質問してみよう