- ベストアンサー
CSSで行間の指定
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんにちは！ WinのIEのバグですね。 一部だけでしたら、下の行に margin-top: **px; を指定ではどうでしょうか。 div.aa { font-size: 10px; } .bb { margin-top: 10px; display: block; } －－－－－－－－－－－－－－－－－－－ <td> <div class="aa"> <img src="aa1.gif" width="16" height="9">ああああああああああ<br> <span class="bb"> <img src="aa1.gif" width="16" height="9">いいいいいいいいいい </span> </div> </td>
その他の回答 (1)
- zetn
- ベストアンサー率26% (5/19)
imageタグの中に、「align="left"」 と、alignを指定すると、 行の高さを指定できるようです。
お礼
回答をありがとうございました。
関連するQ&A
- 行間があかない
PHPでプログラムを組んでいます。 Firefoxでは行間（line-height）があくのですが、IEではあきません。 行間があかない、つまり指定なしの行間となってしまいます。 $tag_new .= $i . ".<a href =./index.php?mode=diary&id=' . $row[id] . '>" . $title . "</a><img src = ./images/new.gif><br />\n"; とプログラムを組んで、 <div class="new">新着コラム<br /> {$tag_new}</div> と表示しています。 ふしぎなことに、新着コラムとつぎの行だけ行間があきます。 Firefoxではすべてあきます。 Cssでは .new { width:210px; text-align: left; line-height: 24px; float:left; margin: 10 10 10 0; padding: 5; border:1px solid #800000; clear : left; } としています。 解消法あれば教えてください。
- ベストアンサー
- HTML
- スタイルシート line-heightのバグ？
ホームページの中で、行幅をあけるのに、line-heightを使っています。 簡潔なタグは以下の通りです。 <html> <body> <span style="font-size:13px; line-height:160%;"> <img src="image/point.gif" border=0 width=6 height=8 alt="">てすと1<br> <img src="image/point.gif" border=0 width=6 height=8 alt="">てすと2<br> </span> </body> </html> 「てすと1」「てすと2」の前に小さな画像を入れています。 WinXP、NN4.XやN7.Xで見た場合は、画像が入っていても問題なく行幅が開きますが、 WinXP、IE6.02で見ると、line-heightが効きません。 これはIEのスタイルシートバグなのでしょうか？ また、打開方法ありましたらお願いします！ （参考まで：テーブルタグを使いたくないのでline-heightで行間をあけています）
- ベストアンサー
- HTML
- オブジェクトを指定してください、のエラーについて
HTML作業中、下記のようなエラーメッセージが表示されます。 エラー：オブジェクトを指定してください。 文字：3 コード：0 恐らく↓この辺りでエラーが起きているのだとは思うのですが… どなたか分かる方はいらっしゃいますでしょうか？それと、 ライン：200 ↑この数値は、ソースを表示させたときの行数でいいのでしょうか？ メモ帳で開くと「行へ移動」ができなかったもので… 他にエラー場所を知る方法があれば教えてください。 <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align="right"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','img/click2.gif',1)"><img src="img/click1.gif" alt="クリック！" name="Image46" width="64" height="49" border="0"></a></td> <td colspan="2" align="right"><img src="img/suga-3.gif"></td> </tr> </table> <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="12" colspan="4"><img src="img/ue.gif" width="179" height="12"></td> </tr> <tr> <td width="14" height="124" background="img/hidari.gif"><img src="img/hidari.gif" width="14" height="7"></td> <td width="146" background="img/back.gif"><table width="145" height="110" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="img/main1.gif" width="70" height="102" hspace="2"></td> <td valign="top" class="text12">画像</td> </tr> </table> <img src="img/botan.gif" width="146" height="17"></td> <td width="19" background="img/migi.gif"> </td> </tr> <tr> <td height="12" colspan="4"><img src="img/sita.gif"></td> </tr></table>
- 締切済み
- HTML
- tableがずれる理由がわかりません
上のテーブルはずれないのですが 同じレイアウトの下のテーブルはずれます。 widthの指定がききません。 なぜでしょう？？ 前からこの現象はしていたのですが理由が知りたいです。 <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> </tr> </table> <br /> <br /> <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> </table>
- ベストアンサー
- その他([技術者向] コンピューター)
- テーブルを作ったんですが…
はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSで、リストでGlobalNavigation(画像ボタン)を作り、CSSでのRollOverと上下の隙間を消す方法
CSSでのWebサイト制作するのは二度目なので壁ばかりです。 リストでGlobalNavigation(画像ボタン)を作ります。 このとき、 [1] CSSでのRollOverをさせる方法(JavaScript非使用) [2] GlobalNavigation画像ボタンとボタンの間の隙間を消す方法(左に縦にボタン群を並べるので) を探しております。どのようにすればいいでしょうか？ ネットサーフして片っ端から現在調べ中ですがなかなかありそうで無く・・・ 以下、ソースです。 HTML】 <div id="wrapper"> <div id="hdr-all"> <div id="hdr-area"> <div id="hdr-vi"> <h1><img src="../img/share/hdr_vi.gif" alt="サイト名" /></h1> </div> ヘッダーエリア</div> <div id="hdr-line"></div> </div> <div id="main-all"> <div id="main-area"> <div id="nv-global"> <ul> <li><a href="index.html"><img src="../img/share/nv_lft01.gif" alt="ホーム" width="177" height="55" id="Image1" /></a></li> <li><a href="../corp/index.html"><img src="../img/share/nv_lft10.gif" alt="会社情報" width="177" height="55" id="Image10" /></a></li> </ul> </div> <div id="main-area-cts"> <table width="557" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="../img/share/cts_frm_top.gif" width="557" height="21" /></td> </tr> <tr> <td width="21" background="../img/share/cts_frm_lft.gif"><img src="../imgtb/cmn/trs.gif" alt="" width="21" height="10" /></td> <td width="515" height="500" valign="top" bgcolor="#F6F6F6">コンテンツエリア</td> <td background="../img/share/cts_frm_rht.gif"><img src="../imgtb/cmn/trs.gif" alt="" width="21" height="10" /></td> </tr> <tr> <td colspan="3"><img src="../img/share/cts_frm_btm.gif" width="557" height="21" /></td> </tr> </table> </div> </div> <div id="main-line"></div> <div id="ftr-all"> <div id="ftr-area">フッターエリア</div> <div id="ftr-line"></div> </div> </div> </div> 【CSS】 body { margin: 0 auto; background: #5ca786; font-family: "Osaka"; font-size: 12px; letter-spacing: 1px; line-height: 150%; color: #333333; } #wrapper { margin: 0px auto 0px auto; width: 100%; height: 100%; background: #333333;/*Total BG Color*/ text-align: left; } #hdr-all { margin: 0px 0px 0px 0px; width: 100%; height: 112px; background: #a2d8c0; } #hdr-area { margin: 0px 0px 0px 0px; width: 749px; height: 112px; background: url(../img/share/bg_hdr.jpg) no-repeat; float: left; } #hdr-line { margin: 0px 0px 0px 0px; width: 1px; height: 112px; background: url(../img/share/line_rht.gif); float: left; } #main-all { margin: 0px 0px 0px 0px; width: 100%; height: 100%; background: #5ca786; } #main-area { margin: 0px 0px 0px 0px; width: 749px; height: 100%; background: #266e4e; float: left; overflow: auto; } #main-line { margin: 0px 0px 0px 0px; width: 1px; height: 100%; background: url(../img/share/line_rht.gif) repeat-y; float: left; } #nv-global { top: 5px; left: 0px; margin: 5px 0px 0px 5px; width: 177px; padding-bottom: 30px; background: #7bb395; float: left; } #nv-global ul { } #nv-global li{ } #main-area-cts { top: 5px; left: 187px; margin: 5px 0px 0px 0px; width: 557px; padding-bottom: 30px; background: #266e4e; float: left; } #ftr-all { margin: 0px 0px 0px 0px; width: 100%; height: 150px; background: #FFFFFF; } #ftr-area { margin: 0px 0px 0px 0px; width: 749px; height: 150px; background: #FFFFFF; float: left; } #ftr-line { margin: 0px 0px 0px 0px; width: 1px; height: 150px; background: url(../img/share/line_rht.gif) repeat-y; float: left; }
- ベストアンサー
- HTML
- line-heightと画像
例えば、 <div style="line-height:200%"> 一行目<br> 二行目<br> 三行目<br> 四行目 </div> とすれば、それぞれの行間（行の前後の余白）は通常の200%となりますよね。 このとき文章内に（文字と同じくらいの高さの）画像を入れると、IEではその行前後に行間が開かないようなのですが、どうすればよいのでしょうか。 Netscapeでは文章と同じように行間が開いて表示されるのですが。 <div style="line-height:200%"> 一行目<br> <img src="gazou.gif">二行目<br> <img src="gazou.gif">三行目<br> 四行目 </div> のようにすると、二行目と三行目に行間が開きません。 （二行目と三行目のそれぞれの行の前後に余白がありません。） ちなみに、DTDは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ですが、システム識別子をつけても同様でした。 ※準拠にしたらtd,th内にも適用されました。余談ですが。 IEで、画像を含んだ行にline-heightを適用させるにはどうすればよいのでしょうか。 誤った表現をしていたら申し訳ありません。
- ベストアンサー
- HTML
- インラインフレーム内でのテーブル位置指定が上手くいきません
インラインフレームを使用したホームページ作成中なんですが 一箇所だけどうしても解決できないことがあったので質問させていただきます フリー素材サイトのメニューテーブルを左上フレームに使用しているんですが htmlとスタイルシートを上手く使いこなせてないせいで メニューテーブルの位置指定ができずにいます テーブルは縦につなげるタイプのものです 左上フレーム内のright bottomに指定したいのですが上手くいきません 大変見苦しい点が多いとは思いますが どなたか解決策、アドバイス等ありましたらよろしくお願いいたします 【index.html】 <html><head>～</head> <frameset cols="220,*" frameborder="no" border="0"> <frameset rows="90%,10%" frameborder="no" border="0"> <frame src="menu.html" name="menu" scrolling="no"> <frame src="sita.html" name="sita" scrolling="no"> </frameset> <frame src="top.html" name="main" scrolling="auto" > </frameset> <body>～</body> </frameset> </html> 【menu.html】 <html><head>～</head> <body> <table id="left" cellpadding="0" cellspacing="0"> <h2>サイト名</h2> <tr><td><img src=".gif" width="80" height="47"></td></tr> <tr><td><img src=".gif" width="80" height="4"></td><tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><img src=".gif" width="80" height="16"></td></tr> </table> </body> </html> 【スタイルシート】 ～ #left{ width:180px; text-align:right; vertical-align:bottom; }
- ベストアンサー
- HTML
- CSSでfloat指定した画像に隙間
floatの指定をすると並べた画像に隙間ができます。 div aで外を囲み、幅を400px固定し、 その中にli(幅200px）を放り込んでいます。 （幅400pxの入れ物に200pxの小箱を2列に並べていく） 画像をfloatさせなければ隙間は出ないのですが、下記cssのようにfloatさせると幅400pxにIEだけ収まりません。 WinXP・irefox1.0やOpera7.5では意図通り表示されます。。 どなたか解決策お持ちの方よろしくおねがいします。 <html> <head> <title></title> <style type="text/css"> <!-- #a{ width:400px; margin: 0 auto; padding:0; } li{ width:200px; padding:0; list-style:none; float:right; display: inline; } img{ border:none; margin:0; padding:0; vertical-align:top; float:left; ←これの有無で不具合 } --> </style> </head> <body> <div id="a"> <dl> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="100" /><img src="xxx.jpg" width="50" height="100" /></li> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="200" /></li> </dl> </body> </html>
- ベストアンサー
- HTML
- tableの作成方法について
よろしくお願いします。 表を以下のように作成しました。 表の横のラインに罫線を引きたいのですが記述方法が分かりません。 表の周りにはcssで記述して2pxの罫線を引いてあります。 どなた様か、ご指導の程よろしくお願いします <table> <tr> <td rowspan="3" class="b"><img src="img/wg.jpg" alt="パソコンノウハウ" width="190" height="250" /></td> <td class="c"><img src="img/txt21.gif" alt="" width="168" height="24" /><br /> </td> </tr> <tr> <td class="d"><img src="img/9.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/ten.gif" alt="パソコンノウハウ" width="21" height="63" /><img src="img/8.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/en.gif" alt="パソコンノウハウ" width="131" height="63" /></td> </tr> <tr> <td class="e"><a href="http://www."><img src="img/enter_off.gif" alt="" width="349" height="83" /></a></td> </tr> ----------------------------------------------------------------ここに横の罫線を引きたいのですが記述方法が分かりません。 <tr> <td rowspan="3" class="b"><img src="img/wg.jpg" alt="パソコンノウハウ" width="190" height="250" /></td> <td class="c"><img src="img/txt22.gif" alt="" width="103" height="23" /><br /> </td> </tr> <tr> <td class="d"><img src="img/1.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/ten.gif" alt="パソコンノウハウ" width="21" height="63" /><img src="img/8.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/en.gif" alt="パソコンノウハウ" width="131" height="63" /> </td> </tr> <tr> <td class="e"><a href="http://"><img src="img/enter_off.gif" alt="" width="349" height="83" /></a></td> </tr> </table>
- ベストアンサー
- HTML
お礼
いつもありがとうございます。 CSSにもバグってあるんですね。 サイトも大変参考になりました。