行間があかない PHPでプログラムを組んでいます

このQ&Aのポイント
  • PHPでプログラムを組んでいますが、Firefoxでは行間(line-height)があきますが、IEでは行間があきません。行間があかない、つまり指定なしの行間となってしまいます。
  • $tag_newのプログラムを組んで、新着コラムとつぎの行だけ行間があきます。Firefoxではすべて行間があきます。
  • 問題の解消法があれば教えてください。
回答を見る
  • ベストアンサー

行間があかない

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; } としています。 解消法あれば教えてください。

noname#102619
noname#102619
  • HTML
  • 回答数1
  • ありがとう数0

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

  • ベストアンサー
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

IE6だとline-height関連のバグがいくつかあった気がするけど。 <div class="new">新着コラム<br /> {$tag_new}</div> を <div class="newtitle">新着コラム</div> <div class="newcolumn">{$tag_new}</div>・・・繰り返し $tag_new:<br/>なし にするとかはダメかしら。 そうするとline-heightじゃなく paddingとかでも代用できるわ。

関連するQ&A

  • line-heightが利いてない

    下記のように指定しましたが、line-heightだけ利いてないと 思います。行間があきません。 #new { width:160px; text-align: left; line-height: 150%; float:left; margin: 10 10 10 0; padding: 5; border:1px solid #800000; clear : left; } HTML <div id="new">コラム<br>{$tag}</div> $tagはphpを使っています。 line-heightが利かないことはあるのでしょうか?

    • ベストアンサー
    • HTML
  • CSSでDIV IDをつかった行間設定

    css div#hoge { line-height: 200%; } hoge.html <body> <div id="hoge"> あいうえお<BR> かきくけこ<BR> </div> </body> 上記にてやってみると行間が200%になってくれません。行間を200%にするにはどうすればいいですか。 おしえてください ぐー!

    • ベストアンサー
    • HTML
  • Firefoxでheight:100%がきかない?

    ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ:100%がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定・IE6のハック*/ #wrapper { width: 1000px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FF0000; } body > #wrapper { height:auto; } /*ヘッダの設定*/ #header { width: 1000px; height: 123px; clear: both; } /*メインコンテンツの設定*/ #container { width: 1000px; clear: both; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#00FF00; } /*左カラム外側(2カラム内包)*/ #container_left01 { width: 732px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム(左側)*/ #container_left02 { width: 268px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム(右側)*/ #container_left03 { width: 463px; float: right; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height: 100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FFFF00; } /*右カラム*/ #container_right01 { width: 267px; float:left; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>

  • CSSでmarginを指定すると、表示の仕方がブラウザによって変わってしまいます。

    はじめまして、CSS初心者です。 お聞きしたいことがあります。 ---CSS--- body{   margin:0px;   padding:0px; } #formbox{  width:750px;  height:155px; } #box01{ margin-left:30px; width:280px; height:50px; } ---HTML--- <div id="formbox"> <div id="box">ほげほげ</div> </div> というHTMLをIE6.0とfirefox1.5で表示させたときに、 <div id="box">のmargin-leftがIE6.0だと60pxぐらいになってしまいます。firefoxでは、30pxとられているようなのですが…。 IE6.0とfirefox1.5で誤差が生じしてしまうのはなぜなのでしょうか。 どなたかご教授お願いできないでしょうか。 よろしくお願い申し上げます。

    • ベストアンサー
    • HTML
  • ヘッダー・左カラムは固定、右カラム可変のレイアウト

    CSSでレイアウトを制作中なのですが、途中から分からず止まっております。 今の状況は縦に可変した時、左カラムのスクロールバーが最大まで表示されない状態です。また、右カラムは途切れてしまいます。 height100%に対し、ヘッダでピクセル指定しているからだと思うのですが。 ■CSS *{ margin:0px; padding:0px; } /** html */ html,body { height:100%; min-height:500px; overflow-y:hidden; } /** ヘッダ */ #header { height:125px; width:100%; } /** 左・右カラムの囲い */ #container { height:85%; margin-left:400px; } /** 左カラム */ #menu { float:left; height:85%; margin-left:-400px; overflow:auto; width:400px; } /** 右カラム */ #main{ float:right; height:100%; margin-left:430px; overflow:auto; width:100%; } /** フッタはありません */ ■HTML側 <div id="header"> ヘッダ </div> <div id="container"> <div id="menu"> 左カラム </div> </div> <div id="menu"> 右カラム </div> 以上です。 理想のレイアウトが、GoogleマップもしくはYahoo!マップの様に組みたいのですが・・・ http://maps.google.co.jp/ Googleマップ http://map.yahoo.co.jp/  Yahooマップ どなたかお力添えをお貸しください。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • 3カラムのカラム落ちについて質問です。

    3カラムのカラム落ちについて質問です。 IE6だけ3カラムのうち右カラムだけカラム落ちしてなおりません。 ネットで検索して色々試した結果「clear: right;」を追加したら右に戻ったのですが、今度は隙間ができました。 <div id="wrap">  <div id="left">左カラム</div>  <div id="left">メインカラム</div>  <div id="left">右カラム</div> </div> という形です。 --CSS-- #wrap{ width: 970px; margin: 0 auto; background-color: #FFFFFF; height: 100%; min-height: 100%; position:relative; overflow: hidden; } #left{ width: 175px; margin: 15px 15px 0 15px; padding: 0; float: left; display: inline; } #contents{ width: 560px; float: right; margin-top: 15px; display: inline; clear: right; } #right{ width: 175px; margin: 15px; float: right; display: inline; clear: right; } です。 それぞれの中にはmargin やpaddingを使っています。 2日間それで悩まされていますができずに困っています。 IE6以外はすべて大丈夫なので、分かるかた教えてください。

  • CSS height:100%の時の背景

    下記のようなページを、スクロールバーが出るウィンドウサイズで開いて スクロールするとbodyの背景色「赤」が見えます。 スクロールしてもこの赤背景が見えないように、columnの緑背景を下まで敷きつめたいのですが方法ありますでしょうか? どなたかご教示いただけるとありがたいです。 <html> <head> <style type="text/css"> <!-- body{ background: #ff0000; } body , html { margin: 0; padding: 0; height: 100%; } #left-column { width:50%; background: #99ff99; height: 100%; float:left; } #right-column { width:50%; background: #99ff99; height: 100%; float:right; } --> </style> </head> <body> <div id="left-column">left-column</div> <div id="right-column"> right-column<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>right-column 末端 </div> </body> </html>

  • floatを使ったデザインについて

    CSSで、左側にメニュー・右側にメイン記事、という 設定にしたいのですが(ブログではありません)、うまく行きません。 以下の状態で、IE6.0では思い通りに左右に分かれてくれるのですが、 FireFoxの場合に 右カラムの.midashiで指定したグリーンの背景色が、左カラムの左端から始まってしまい、 文字は.midashi、.text共々「画像に回り込むテキスト」のように 左のメニューが終わったところで左カラムの左端から始まります。 #right_textに、margin-right:0px;、margin-left:auto;と付け加えると FireFoxでも予定通り、左右がキレイに分かれてくれるのですが 本来、こうするものなのでしょうか? ブログのカスタマイズもしたことがあるのですが、 http://allabout.co.jp/internet/hpcreate/closeup/CU20050228A/index3.htm この通りなら、こんな風にしなくても大丈夫ですよね? いつもテキストエディタで入力しているので 素人ながらに色々とチェックはしたのですが(スペルミス・ブラウザ間のpadding合わせなど) 基本的なことが間違っていないか、御教授ください。 [HTMLソース] <div id="frame"> <div id="left_text"> (中略) </div> <div id="right_text"> <div class="midashi"> らりるれろ </div> <div class="text"> ああああああ<br> いいいいいい<br> </div> </div> </div> [CSSソース] #frame { width : 660px; background-color : #F0F0F0; } #left_text { width : 150px; float: left; padding-left: 10px; padding-right : 10px; } (#left_text内の細かい部分は省略) #right_text { width : 470px; padding-left: 10px; padding-right : 10px; } .midashi { font-size:20px; background-color: #b3c716; width : 470px; } .text { line-height: 170%; font-size: 15px; width : 470px; }

    • ベストアンサー
    • CSS
  • リスト表示を左に寄せたい

    いつもお世話になります。 下記のようなCSSで縦並びのリスト表示をさせていますが、 どうしてもリスト(全体)が左に寄らないので困っています。 できたらボックス(id-=navi)の左から10ピクセルぐらいのところから リストを始めたいのですが・・・ (ちなみに3段組みの一番左のボックスです) 現在はおそらく30pxくらいのところから始まっていて、何をしてもうごきません。 よろしくお願いします。 ---------CSS------------------ #wrapper { width: 855px; background-color:#A96223; } #main{ float:left; width:675px; background-color:#EBE3BE; } #navi{ float:left; width:150px; background-color:#A96223; padding-top:20px; padding-left:10px; text-align:left; margin: 0px; } #advertisement{ float:right; width:30px; background-color:#A96223; } #footer{ clear:both; background-color:#804C2E; height:20px; } #navi ul{ list-style:none; margin:0px; padding:0px; } #navi li{ list-style:none; color:#FFFFFF; margin-left:0px; padding-left:10px; line-height:10px; background-image:url(img/common/yajirushi.gif); background-repeat:no-repeat; background-position:left center; } --------------html---------------------- <body> <div id="wrapper"> <div id="navi"> <ul> <li>TOP</li><br /> <li>新着情報</li><br /> <li>おすすめメニュー</li><br /> <li>ご宴会・パーティー</li><br /> <li>お店のご案内</li><br /> <li>イベントご案内</li><br /> <li>お得クーポン</li><br /> </ul> </div> <div id="main"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="advertisement"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="footer"> </div> </div> </body>

    • ベストアンサー
    • HTML
  • BRのCSSをつかって行間を統一

    HTMLのBRを使用して改行を行っていますが、 FireFoxとIEとで行間が違ってきてしまいます。 行間をそろえるためにline-heightで統一したいのですが、 BRのCSSをつかって行間を統一することは可能でしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML

専門家に質問してみよう