• ベストアンサー

左右のテキストの高さが合わない

2点解決できない問題がありまして http://shinroku.net/graypartner/industrial.html​ こちらのページ内のimg画像下のテキストなのですが 何故か右側が一行下がってしまうのですが左右のレベルを合わせるには どうしたら良いのでしょうか?(上のラインで合わせたいのですが) 以下ソースに記述 <div class="text01" style="font-family : Arial;"> 電力会社 ⇒ Warren RECC<br /> ・ 敷地内に12.47kVの配電線、敷地周辺に161kVと69kVの<br />  送電線<br /> ・ 敷地内に新規変電施設 </div> <div class="text02" style="font-family : Arial;"> ガス会社 ⇒ Atmos Energy<br /> ・ 敷地北側に8インチの本管<br /> ・ US Highway 68号線沿いに4インチの配管、US Highway 31<br />  号線沿いに2インチと6インチの配管 </div> 以下CSS記述 .text01{ width : 380px; float : left; font-size : 13px; font-family : "MS Pゴシック"; line-height : 1.6; color : #000000; padding-left : 30px; } .text02{ margin-left : 0px; font-size : 13px; font-family : "MS Pゴシック"; line-height : 1.6; color : #000000; padding-left : 23px; } もう1点は フッターないのメールアドレスとURLがフォントを"Arial"に指定しているのですがFireFoxですとフォント指定が無視されてしまうのですが解決策がありましたらご教授ください。 .adress{ background-image : url(img/adress.gif); background-repeat : no-repeat; width : 800px; height : 96px; margin-top : 0px; margin-left : auto; margin-right : auto; } .adress p{ font-size : 12px; font-family : Arial; color : #efefef; padding-left : 530px; line-height : 1.3; padding-top : 13px; } .adress p a{ color : #efefef; text-decoration : none; } .adress p a:hover{ color : #e2e2c7; text-decoration : underline; } お忙しいところすいませんが宜しくお願いします。

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

問題は見受けられませんが・・・ ただ、Araialは全角文字を含まないので、日本語を含むところに指定しても意味ないでしょう。無ければデフォルトの書体を使います。各所でArialが指定されていますが、日本語はIEならMS Pゴシック"か"MS UI Gothic"で、firefoxならデフォルトのMS P明朝"あたりが使われるでしょう。  きちんと、font-familyを羅列して、最後に一般名という書き方をしましょう。 Arialはプロポーショナルの刎ねの無いフォントですから、OSに合わせてプロポーショナルなゴシックを並べて最後に一般名を入れておけば良いでしょう。 font-family: Arial,"MS Pゴシック","MS UI Gothic",Osaka,Sans-Serif;

gonta5401
質問者

お礼

ORUKA1951さん とても参考になりました、ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

noname#83877
noname#83877
回答No.1

フォント指定はユーザーの指定が優先されます。なので、強制的に特定のフォントを表示するのは無理です。 おそらくFirefoxで何かしらのフォントが指定されているのでしょう。 画像の下の改行(?)はどのブラウザでの症状ですか?

gonta5401
質問者

お礼

metametamuさんありがとうございます。 (左側text01) (右側text02) 電力会社 ⇒ Warren RECC ガス会社 ⇒ Atmos Energy といった具合で左側上部にスペースが入ってしまうのですが? この説明でわかりますでしょうか? 環境確認は ■Microsoft Internet Explorer 6 ■Microsoft Internet Explorer 7 ■Microsoft Internet Explorer 8 ■Sleipnir ■Firefox(バージョン3.0.1) で行ってます、全て上記のようになってます。 電力→ガス会社と上のラインに合わせたいのですが?

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • Firefoxで文字がimgの裏側に入ってしまう

    CSSでHPを作成しています、 ie6・7・8では下記ソースheader部分にimgを入れて<p>・・・</p>で 文字を上に表示しています、 ie6・7・8では思い通り表示されますがFirefoxでは<p>・・・</p>の文字が表示されません、imgの下側(裏側)になっているのか? 下記にソースとCSS記述を書きましたので解決方法を教えてください。 ソース記述 <body><!-- Container --> <div id="container"><!-- Header --> <div id="header"><img src="img/logotop.gif" width="800" height="143" /> <h1>ブルベリーパン</h1> <p>ブルベリーパンを作って39年、厳選された素材と<br /> 熟成されたパン生地が生み出す匠の味、1日限定350個<br /> </p> <dl> <dd>:::::::::::::<br /> ・・・・・・・・・・・・・・・・・<br /> ・・・・・・・・・・・・・・・・・<br /> <dd> </dl> </div> CSS記述 #header{ margin-bottom : 0px; } #header h1{ font-size : 8px; color : #4a7aab; font-weight : 100; margin-top : -144px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } #header p{ font-size : 13px; color : #000000; margin-top : 4px; padding-left : 3px; line-height : 1.6; margin-left : 10px; padding-top : 65px; font-family: Arial,"MS Pゴシック","MS UI Gothic",Osaka,Sans-Serif; width : 500px; float : left; } #header dd{ font-size : 13px; color : #4a7aab; margin-top : 0px; line-height : 1.4; font-family: Arial,"MS Pゴシック","MS UI Gothic",Osaka,Sans-Serif; }

  • EXCELでHTMLのタグの入ったセルを結合したい

    下記のHTMLのタグが入ったセルと画像URLのセルを結合したいのですが、&などで結合すると ダブルクォーテーションが倍くらいに増えてHTMLのタグとして機能しません。 どうやって結合させるのがいいのでしょうか? =A1(HTMLのタグ)&A2(画像URL)&A3(HTMLのタグ) <body> <div style="WIDTH: 100%; TEXT-ALIGN: center"> <div id="wrapper" style="FONT-SIZE: 23px; FONT-FAMILY: Arial, Helvetica, sans-serif; WIDTH: 860px; COLOR: #000; TEXT-ALIGN: left; MARGIN: 0px auto"> <h1 style="FONT-SIZE: 38px; HEIGHT: 60px; WIDTH: 850px; COLOR: #ffffff; PADDING-LEFT: 10px; MARGIN: 0px; LINE-HEIGHT: 60px; BACKGROUND-COLOR: #336600">Picture</h1> <img src="画像URL"> <div class="sub_tit" style="FONT-SIZE: 35px; HEIGHT: 40px; WIDTH: 850px; FONT-WEIGHT: bold; COLOR: #ffffff; PADDING-LEFT: 10px; LINE-HEIGHT: 40px; BACKGROUND-COLOR: #336600"> Description </div><br><font size="5">

    • ベストアンサー
    • HTML
  • CSSでエラーが出ました

    CSS初心者です、宜しくお願いします。 CSS Validatorで検証した結果 文法解析エラーが発生しましたtext04 p・・・ @layout-grid-line : 1.8; text04 p・・・Parse error - Unrecognized } と結果が出ました、 以下CSS記述 .text04{ font-size : 16px; font-family: Arial,"MS Pゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.8; color : #666666; background-color : #ffffff; margin-left : 0px; width : 662px; padding-left : 10px; } .text04 p{ font-size : 14px; font-family: Arial,"MS Pゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.8; color : #666666; background-color : #ffffff; margin-left : 0px;  layout-grid-line : 1.8; } どなたかご指導ください、お願いします。

    • ベストアンサー
    • HTML
  • ページの一番上にできた余分な余白の消し方

    ページの一番上に800×100の画像を用意し、それを背景画像として設定。 その上に<h1>のタイトルを表示しようとすると、 背景画像の上に無駄な余白ができてしまいます。 何か間違えているのでしょうか?この余白の消し方を教えてほしいです。 よろしくお願いいたします。 <html> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; background-color: #000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; text-align: center; } div#container { width: 800px; background-color: #ffffff; text-align: left; margin: 0 auto; padding: 0; } div#header { width: 800px; height: 100px; background-image: url(image/sample.jpg); background-repeat: no-repeat; padding: 0; margin: 0; } h1 { padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; font-size: 15px; font-weight: normal; line-height: 15px; margin-top: 30px; margin-right: 0px; margin-bottom: 0; margin-left: 0; color: #000; } div#mainContent { padding: 5px 15px 0 15px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>テスト</h1> </div> </div> <div id="mainContent"></div> </body> </html>

    • ベストアンサー
    • HTML
  • ブログでのスクロール枠の設置の仕方

    <div style="margin:0px;padding:0px;" align="left"><div style="margin:0px;padding:0px;line-height:1.3;width:200px;background-color:#FFFFFF;"><div style="margin:0px;padding:10px;line-height:1.3;overflow:auto;border: 2px solid #66CCCC;font-family:'MS Pゴシック',Osaka,sans-serif;text-align:left;font-size:100%;height:5em;scrollbar-arrow-color:#66CCCC;scrollbar-3dlight-color:#66CCCC;scrollbar-darkshadow-color:#66CCCC;scrollbar-face-color:#FFFFFF;scrollbar-track-color:#FFFFFF;scrollbar-track-color:#FFFFFF;scrollbar-shadow-color:#FFFFFF;">文章挿入</div></div></div> スクロール枠です。 これをブログにはめ込んでるんですが、この枠をもう一つ横並びに貼り付けたいのですが、段落ちしてしまいます。 改行はしてないので、それでの段落ちではないです。 お分かりになる方、よろしくお願いします。 ライブドアブログです。

  • firefoxで

    会社のHPをHPビルダーで作成しています、 <div class="content">要素の中に2つのBOX「左配置<div class="text09">・右配置<div class="text10">」を作成して左右に並べてみたのですがIE6,7,8では希望通り表示されるのですがfirefoxでは左text09のBOX下にtext10が配置されてしまいます、CSS初心者ですが右配置text10のwidth幅を指定しなければfirefixでも左右ならんで表示されるのですが、右配置text10の記字が左text09の下側に廻り込んでしまうのです? どうしたら良いでしょうか?どなたかご指導いただけませんでしょうか、宜しくお願いします。 ※サイドメニューの右側にcontentを配置 ※<?xml version="1.0" encoding="Shift_JIS"?> <!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"> <ソース記述> <div class="content"> <div class="text09"> <img src="img/industria01.jpg" width="331" height="272" alt="工業団地" title="工業団地" /><br />       Partnershipの工業団地</div> <div class="text10"><a href="01.html"><img src="img/industria02.jpg" width="220" height="142" alt="(写真をクリックすると拡大できます)" title="(写真をクリックすると拡大できます)" /></a><br /> Texas A&amp;M Park<br />   (写真をクリックすると拡大できます)<br /> <a href="02.html"><img src="img/industria04.jpg" width="220" height="88" alt="(写真をクリックすると拡大できます)" title="(写真をクリックすると拡大できます)" /></a><br />      Business Park<br />   (写真をクリックすると拡大できます) </div> </div> 以下CSS記述 .content{ background-color : #ffffff; margin-left : 0px; margin-bottom : 0px; padding-left : 0px; width : 682px; float : right; padding-top : 0px; padding-right : 0px; } .text09{ float : left; font-size : 13px; font-family: Arial,"MS Pゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.6; color : #000000; padding-left : 0px; margin-left : 50px; margin-right : 20px; width : 331px; display:inline; } .text09 a img{border-width : 0px 0px 0px 0px; } .text10{ font-size : 13px; font-family: Arial,"MS Pゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.6; color : #000000; margin-left : 15px; width : 220px; } .text10 a img{border-width : 0px 0px 0px 0px;} この質問内容で解りますでしょうか?

  • fc2ブログのスタイルシートについて

    h1~h6タグの文字の大きさ&改行(しない)を変更したいのですが、 fc2ブログのスタイルシートのどこに書き込めばいいのか分からない状態です。 色々調べてみたのですが、どうしても分からないので、分かる方がいましたら、教えて下さい。 よろしくお願いします。 ソースは、こちらになります。 (文字数が足りないので数ヵ所省きました)↓ body{ font-family: "Verdana","MS Pゴシック", "MS UI Gothic","Arial","Osaka"; margin:0px; margin-left:auto; margin-rught:auto; padding:0px; background-color: #FFFFFF; color:#666666; text-align:center; letter-spacing:1px; word-break: break-all; } #container{ width:840px; margin-right:auto; margin-left:auto; padding:0px 0px; background-color: #FFFFFF; border-left:1px solid #DECE21; border-right:1px solid #DECE21; } /* ### 共通のタグ ### */ blockquote{ font-family: "MS UI Gothic","Verdana","MS Pゴシック", "Arial","Osaka"; margin:15px 0px; padding:10px; background-color:; border:1px dashed #996600; font-size:12px; line-height:150%; width:90%; voice-family:"\"}\""; voice-family:inherit; width:90%; } html>body blockquote{ width:90%; } blockquote p{ margin:0px 0px; padding:0px; line-height:150%; } h1.blogtitle{ position:absolute; width:820px; font-family: "Century Gothic","MS UI Gothic","MS Pゴシック", "Arial","Osaka"; padding:0px; margin:0px; top:3px; left:20px; color:#333333; font-size:24px; font-weight:normal; z-index:1; } h1.blogtitle_back{ position:absolute; width:818px; font-family: "Century Gothic","MS UI Gothic","MS Pゴシック", "Arial","Osaka"; padding:0px; margin:0px 0px 0px 1px; top:4px; left:21px; color : #CCCCCC; font-size:24px; font-weight:normal; z-index:0; } /* ### メイン部(左側) ### */ #main{ width:590px; float:left; margin:0px; padding:0px; } #contents{ margin:0px 20px 0px 20px; padding:0px; text-align:left; width:590px; voice-family:"\"}\""; voice-family:inherit; width:550px; } html>body #contents{ width:550px; } /* ### エントリー(記事) ### */ .e_title{ font-family: "MS UI Gothic", "Verdana","MS Pゴシック", "Arial","Osaka"; height:20px; text-indent:60px; margin: 0px 0px 0px 0px; padding: 10px 0px 0px 0px; color:#967B3F; font-size:14px; font-weight:bold; letter-spacing:1px; } .e_date{ font-family: "Verdana","MS Pゴシック", "MS UI Gothic", "Arial","Osaka"; margin:0px 0px 30px 60px; text-align:left; color:#999999; font-size:10px; line-height:150%; letter-spacing:1px; } .e_body{ font-family: "MS UI Gothic","Verdana","MS Pゴシック", "Arial","Osaka"; margin:0px 0px 15px 0px; margin-bottom:25px; padding:0px ; color:#444444; font-size:12px; line-height:155%; letter-spacing:1px; } .e_body img, .e_body a img{ margin:2px; border:0px; } .e_body_w{ margin:0px; padding:5px 15px 5px 15px; background-attachment: scroll; background-image: url(http://blog-imgs-41.fc2.com/a/w/i/awitchsally/aws_np03_point.gif); background-repeat: no-repeat; background-position: 0% 0%; border:1px solid #E9F3E9; } .e_more{ margin:30px 0px 15px 0px; padding:0px; text-align:left; color:#333333; font-size:10px; font-weight:bold; letter-spacing:1px; } .e_state{ font-family: "Verdana","MS Pゴシック","MS UI Gothic", "Arial","Osaka"; margin:5px 0px; text-align:left; color#967B3F; font-size:10px; letter-spacing:1px; line-height:150%; font-weight:bold; }

    • ベストアンサー
    • HTML
  • divにも同じフォントスタイルを適用したい

    現在 p { color : #222222;} p { font-family: Arial, Helvetica, sans-serif;} p{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%; } このような指定をしてあります。 しかしセンタリングなどに <div style="text-align:center;">のタグを使用するとセンタリングはされますけれど、上記CSSが反映されませんよね。 あちこちのHPを参考に色々試行錯誤をしていますけれど上手く反映されません。 div { color : #222222;} div { font-family: Arial, Helvetica, sans-serif;} 以下略 div.test 等に変えても同じです。 どこがダメなのでしょうか?

    • ベストアンサー
    • HTML
  • テキストを画像の右にしたいのですが・・

    ブログパーツで下記のものを使用しています。 <div style="text-align:left;padding-top:10px; padding-bottom:5px"> <iframe src="http://chiccuri.sakura.ne.jp/blog_parts/kisotaisya.html" width="168" height="250" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" hspace="0" vspace="0"></iframe><p style="font-size:13px; margin-top:2px;"></p></div> このパーツの右に文章を回りこみさせたいのですが、どこにどのようなタグを挿入すればいいのでしょうか? <div style="text-align:left;float:left;padding-top:10px; padding-bottom:5px"> ではうまくいきませんでした。 初心者ですが、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • IE8での段落のズレについて

    IE7では正常(自分が思うように)に表示してくれますが、 IE8では互換モードにしないと大きなタイトル文字の前に1つ 段落が出来てしまい、2行分のタイトルが4行になってしまい、 タイトル画像からはみ出てしまいます。 (下記の例ですと、「アウトドア」の表示が空白の行の下に来ます。 また、「大好き!」の前にも空白の行があり、文字自体も タイトル画像からずれて表示されてしまいます) 色々チェックしたのですが自分では分からなかったので、どなたか 教えて下さい! <CSS> body {background-color:#000099;} div#box {width: 680px; margin-left:auto; margin-right:auto; background-color:#ffffff; padding-top:10px;} div#header{background-color: #999999;width:660px;height:290px;      background-image: url(./boad.jpg);      background-repeat: repeat; margin-right:auto; margin-left:auto; padding-top:10px; } div#header h1 {font-size: 12px; color:#ffffff;               padding:0px 10px 0px 10px; font-weight:bold;} div#header h2 {font-size:12px; margin-left:20px;           font-weight:bold; color:#ffff00;} div#header h3 {font-size:20px; margin-left:30px;               color:#ffffff;} div#header h4 {font-size:4.5em; color:#dddddd;       font-weight:bold; margin-left:80px; line-height:100%; } div#header h5 {font-size:4.5em; color:#dddddd;           font-weight:bold;margin-left:280px;      line-height:100%; } code.main      {text-align:left; } .p1 {font-size:15px; color:#333333; } div#footer {width: 680px;margin-top: 50px; } address {font-size: 0.75em; text-align: center;          font-style:normal; padding-bottom:20px; color:#cccc00;} <HTML ~head以降> <body> <div id="box"> <div id="header"> <h1>&nbsp;&nbsp;釣り&nbsp;&nbsp;キャンプ&nbsp;&nbsp;車&nbsp;&nbsp;etc&nbsp;&nbsp;</h1> <h2>多趣味な男のこだわり日記</h2> <h4>アウトドア</h4> <h5>大好き!</h5> </div> <p><code class="main p1">   皆さんはどんな趣味をお持ちですか?<br>   私は沢山の趣味を持っています。<br><br>   そのためいくら働いてもお金は溜まりません・・・・・<br>   でも、沢山の趣味を自分なりに楽しむのは<br>   ステキな事だと思っています。</code></p> <div id="footer"> <address>多趣味研究会, All rights reserved.</address> </div> </div> </body> </html> 宜しくお願い致します。

    • ベストアンサー
    • HTML