chromeでの表示に問題があります。対策方法を教えてください。

前へ 次へ
このQ&Aのポイント
  • デザイナーに作ってもらったサイトですが、ChromeやFirefoxでは正常に表示されず、申し込み欄が大幅にずれています。
  • デザインに使われているbackground-imageがずれる原因となっています。
  • 解決方法としては、background-imageのパスを修正することや、widthやheightの値を調整することが挙げられます。
回答を見る
  • ベストアンサー

chromeではbackgroundの画像がずれる

はじめまして。 よろしくお願いします。 デザイナーに作ってもらったサイトですが、IEでは正常に表示されるのですが、crhomeやfirefoxでは大幅にずれて表示されます。 作成してもらったデザイナーが連絡が取れなくなった為、なんとか自力で修正しないといけなくなりました。 申し込み欄が大幅にずれているので非常に困っています。 http://www.lasses.jp/ ２か所同じパターンでズレが発生するのですが、下のフォームの方を具体的に説明すると <div class="form_760b"> .form_760b { background-image: url(../image/form_760b.jpg); width: 760px; height: 380px; background-repeat: no-repeat; } となっています。 ここの部分がずれてしまう部分です。 対策方法をお願いします。 よろしくお願いします。

  • CSS
  • 回答数2
  • ありがとう数4

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

  • ベストアンサー
  • outbrave
  • ベストアンサー率60% (231/380)
回答No.1

まず、互換モードで作成されているので、標準モードに変更します。 HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML xmlns="http://www.w3.org/1999/xhtml"> この２行を下のように変更 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> 次に CSS ファイルの修正 form.css の一部を下のように修正 .tbl_form { /*margin: 120px 310px 0px 50px;*/ padding: 120px 310px 0px 50px; line-height: 1; width: 400px; height: 110px; } 一度、これで見てください。

lasses
質問者

お礼

ありがとうございます。 完璧に治りました。 本当に感謝します。

その他の回答 (1)

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

IEしたら駄目です。 　そのページは互換モードで起動しますから、IE専用--IEの互換モードです。IE以外のすべてのブラウザでずれます。 DOCTYPEスイッチを書き換えて、標準モードで動かせば、IEでもずれます。 DOCTYPEスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a ) 受け取るときは最低限 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) 　でチェック位はしましょう。 　原因は、IEの互換モードでは、その要素のサイズをpadding辺の外側、borderの内側にとることにあります。本来はpadding辺の内側でなければならない。 　tableのmarginを調整(0にして)して、外側のdivのpaddingの値を大きくしてみましょう。 firefox+firebug( https://addons.mozilla.jp/firefox/details/1843 )で修正してみたら、それでまともにはなります。 　しかし、Another HTML-lint の指示に従って、大きな減点項目だけは修正しないとまずいです。 　重大なエラーは Html Validator ( https://addons.mozilla.jp/firefox/details/249 ) でもチェックできます。

lasses
質問者

お礼

ありがとうございます。 参考にさせていただいて勉強します。 感謝します。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？

    初めて質問させていただきます。 当方はCSS初心者です。 画像（グラデーションのある角丸四角枠）を３分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。

  • Chrome　だと、画像が少し下にずれてしまう

    こんにちは！ CSS初心者で、今回初めてＣＳＳを利用してホームページを作っています。 制作中に、行き詰ってしまい質問をさせていただきました。 メインナビの背景に画像、その上にリストのテキスト、そしてカーソルオーバーをすると、違う画像が表示するようにしています（ナビは、リストをfloatで横並びに表示しています）。 ＩＥだと、問題なく正しい位置で表示されるのですが、Ｆｉｒｅｆｏｘや Ｃhromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。 元凶を、探してみたんですが、なかなか見つけられません。 わかる方がいらっしゃったら、教えていただけないでしょうか。 お粗末なＣＳＳコードですが（多分、無駄なコードがいっぱいありそう・・・） のせさせていたたきました。 よろしくお願いします。 CSS -------------------------------------------------------------- @import url(base.css); body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(images/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; height : 100%; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } #com_back{ background-image : url(images/bg_green.png); background-repeat : repeat-x; } #g_navi_back{ width : 100%; height : 80px; text-align : center; background-repeat : repeat; background-image : url(images/bg_g_navi.png); } #g_navi{ overflow : hidden; width : 900px; margin 0 auto; margin-left : auto; margin-right : auto; background-repeat : no-repeat; background-image : url(images/navi_base.png); height : 80px; } #g_navi ul{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } #g_navi li{ text-align : center; width : 180px; float : left; border-collapse : collapse; background-position : left center; top : 50%; bottom : 50%; letter-spacing : 1px; line-height : 18px; } #g_navi li a{ display : block; padding-top : 20px; } #g_navi ul li a:link{ text-decoration : none; color : black; } #g_navi ul li a:hover{ background-image : url(images/navi_hover_g.png); background-repeat : no-repeat; background-position : center center; height : 80px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-repeat : repeat; height : auto; background-image : url(images/bg_white.png); } html ------------------------------------------------------------------------------ <!--外枠--> <div id="wrap"> <!--ロゴ--> <div id="com_back"><div id="com" ></div></div> <!--ナビ--> <div id="g_navi_back"> <div id="g_navi"> <UL style="list-style-type : none"> <LI><a href="index.html">ホーム</a></li> <LI><a href="**********">ご案内</a></li> <LI><a href="**********">ご利用方法</a></li> <LI><a href="**********">イベント詳細</a></li> <LI><a href="**********">アクセス</a></li> </UL></div> </div><!--ナビ_end--> <div class="clear"><hr /></div><!--ナビfloatクリア--> <div class="inner"><!--インナー-->

    • ベストアンサー
    • CSS
  • 画像をずらしてhoverしたいのですがIE7では×

    一枚の画像をずらしてロールオーバーさせてナビをつくったのですが、ＩＥ7以外の全ブラウザではうまくいきますが、唯一IE7だけはうまくいきません。 5つのナビボタンのうち、左3つがポイントしても矢印と画像が変わりません。 ですが、それはトップページのナビだけの話で、他のページは普通にロールオーバーします。 ナビの部分はDreamweaverのテンプレートで編集不可能領域に含まれてますので、全ページのコードは同一です。 以下、コードです。 <!--HTML--> <body> <div id="container"> <div id="hedder"> <div id="toprogo"><a href="index.html"><img src="○○"/></a></div> <div id="main_image"><img src="○○"/></div> <div id="navi"> <div id="top"><a href="index.html"/></a></div> <div id="kodawari"><a href="particular.html" /></a></div> <div id="catalog"><a href="goods-catalog.html" /></a></div> <div id="from_producer"><a href="index.html" /></a></div> <div id="contact"><a href="mailto:" /></a></div> </div> </div> </div> </body> <!--ここからcss--> body { font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace; color: #473906; background-color: #fafde1 ; } img { border: none; } a { color: #473906; text-decoration: none; } a:hover { color: #ff0000; } #container { width: 950px; margin: auto; } #hedder { widht: 950px; height: 380px; } #top_logo {margin-top: 10px; } #main_image { width: 950px; height: 300px; margin-top: 10px; } #navi { margin-top: 20px; /margin-top: 0 ; } #top a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px 0px; display: block; float: left; } #top a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px -50px; display: block; float: left; } #kodawari a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px 0px; display: block; float: left; } #kodawari a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px -50px; display: block; float: left; } #catalog a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px 0px; display: block; float: left; } #catalog a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px -50px; display: block; float: left; } #from_producer a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px 0px; display: block; float: left; } #from_producer a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px -50px; display: block; float: left; } #contact a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px 0px; display: block; float: left; } #contact a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px -50px; display: block; float: left; } つめて見にくくなっていますが、お願いいたします。

    • ベストアンサー
    • CSS
  • 背景画像上に複数枚の画像配置について

    お世話になります。 まだまだcss勉強中なので教えて頂きたいことがございます。 １枚の背景画像に対し、別箇所にマウスオーバー時のみ表示されるように複数枚画像を配置し、そのマウスオーバー用の複数枚の画像にリンクタグをつけて、別ページへのリンクを貼りたいのです。 しかし、ネットで調べた方法ですと、うまくマウスオーバーが反映されず 余計な画像も出てきてしまいます。 おそらく間違ったcssを記述していると思うので ご指摘いただけると助かります。 -------------------------------------------------------------- 【html】 <div class="demo"> <div class="demo1"><a href="#"></a></div> <div class="demo2"><a href="#"></a></div> <div class="demo3"><a href="#"></a></div> <div class="demo4"><a href="#"></a></div> <div class="demo5"><a href="#"></a></div> </div> 【css】 .demo { background: url("../img/imgbg.jpg") no-repeat; display: block; width: 800px; height: 1108px; } .demo1 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo1 a:hover { background-image: url("../img/img1.png"); position:relative; top:475px; left:635px; display:block; } .demo2 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo2 a:hover { background-image: url("../img/img2.png"); position:relative; top:469px; left:480px; display:block; } .demo3 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo3 a:hover { background-image: url("../img/img3.png"); position:relative; top:477px; left:322px; display:block; } .demo4 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo4 a:hover { background-image: url("../img/im4.png"); position:relative; top:477px; left:167px; display:block; } .demo5 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo5 a:hover { background-image: url("../img/img5.png"); position:relative; top:477px; left:10px; display:block; } -------------------------------------------------------------- a のクラスの時に背景画像を指定しなくても良いんじゃないかと思い 消してみたら画像が表示されなくなってしまったので そのまま記載しています。 上記の記述のままですと、マウスオーバーが正しく反応しないですし マウスオーバー時に別箇所に背景画像が表示されてしまいます。 やりたいことは画像にしましたのでご確認ください 黒○は背景画像内にある形で、その上に同じ形の赤○を マウスオーバー時の画像として表示したいです。 （図が下手ですみません） わかる方、ご教示をお願いします。

    • 締切済み
    • CSS
  • divの入れ子が上手くいきません。

    .line { background-image: url(../img/line.gif); background-repeat: no-repeat; background-position: left bottom; display: block; padding: 0px; clear: both; width: 600px; height:auto; margin: 0px; } .left{ width:210px; height:90px; float:left; text-align:center; padding:10px 5px 10px 0px;} .right{ width:360px; height:90px; float:left; padding:10px;} <div class="line"> <div class="left">あああ</div> <div class="right">いいい</div> </div> 上記のようにlineでleftとrightを内包したいのですが、IEでは表示されるのですが、fox・safariで確認すると画像が消えてしまいます。 どうもdivで括っているせいかline内に文字が入っていないと認識されているようで、ためしに適当な数字を入れてやると認識されました。 また、lineのheightをpx指定してやると表示されるのですが、lineは使いまわしたいクラスなので、縦を固定することができません。 どうしたら解決しますか？

    • ベストアンサー
    • HTML
  • 外部スタイルシートは同じなのですが…

    こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記／／／ <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div>　　←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス／設備</h2> ○○○徒歩３分<br /> 駐車場2台（バリアフリー）<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話　123-456-789 </div> </div> <div class="futter">Copyright &copy; 2007 All Rights Reserved</div> </div> </body> CSSは下記／／／ * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか？ リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ブロック要素の右下寄せ

    添付されている画像のように、Aブロック要素内の右下にBブロック要素を配置したいです。 下記の記述だとFFではきちん表示されるのですが、IEでは表示すらされません。 どうしたらよいでしょうか？ *htmlの記述 <div id="box-a"> <div class="box-c"> <h2>見出し</h2> <p>内容</p> </div> <div class="box-c"> <h2>見出し</h2> <p>内容</p> </div> <div id="box-b"> <p>内容</p> </div> </div> *CSS #box-a{ margin:0; padding:50px 0; position:relative; background-image:url(../img/box-a.gif); background-repeat:no-repeat; background-position:left bottom; } #box-c{ margin:20px 120px 0px 200px; padding:10px; background-image:url(../img/box-c.gif); background-repeat:no-repeat; } #box-b{ position:absolute; right:0; bottom:0; margin:0; padding:0; width:150px; height:150px; background-image:url(../img/box-b.gif); background-repeat:no-repeat; }

    • ベストアンサー
    • CSS
  • backgroundで文字がうまくおさまらない

    お世話になります、CSS初心者ですので、 質問内容に不明瞭な点がございましたら、ご容赦くださいませ。 上記のように、テキストで文字を書いてバックグラウンドさせたいのですが、 文字が画像から外れた位置に配置されたりしてしまいます。 尚、作った画像は4段重ねるように配置したいです。 解決策をご教授下さいませ。 （HTMLコード） <BODY> <div id="container"> <div id="header"> </div> <DIV id="main"> </div> <div id="left"> <p>軽量鉄骨プレハブ</p> <div class="left_keitetu"> <p class="left_keitetu"><a href="/seihin/top.htm">製品詳細</a><br> <a href="/sekou/01-keitetu/top.htm">施工一覧</a></p> </div></div> <div id="footer"> </div> </BODY> （CSSコード） div#container { width : 725px; margin : auto;} div#header { width : 725px; margin : auto;} div#main { width : 725px; margin : auto;clear : both; padding : 0 10px; } div#footer { width : 725px; margin : auto;clear : both; margin-bottom : 5px; background : url(img/footer_bg.gif) repeat-x; height : 55px; padding-top : 17px; } div#left { float : left; } div.left_keitetu { height : 80px; width : 170px; } p.left_keitetu { background : url(img/menu_keitetu.gif) no-repeat; padding-top : 30px; padding-left : 15px; }

    • ベストアンサー
    • CSS
  • ボックスに背景を指定した時、firefoxでうまく表示されない

    CSS初心者です。 タイトルの通りなんですが、ボックスにbackground-imageで背景を指定して、ブラウザで表示させると、IE6.0だとちゃんと表示されますが、firefoxだと表示されません。 サンプルソースを書きます。 -HTML- <div id="formbox"> <div id="box01">テストテスト</div> </div> -CSS- #formbox{ background-image: url(./img/bg.gif); background-repeat: no-repeat; width:750px; height:155px; } #box01{ margin-left:30px; width:280px; height:50px; background-color:skyblue; float:left; } どなたかご教授お願いできませんでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • ディスプレイサイズにあわせた背景画像

    html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthを調整するとかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat;//ライン画像の一部 position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x;//ライン画像 position:absolute; left:850px; top:0; } ************************************************

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する